Nginx 實戰: 部署 React 前端專案
文章目錄
- Nginx 實戰: 部署 React 前端專案
- 正文
- 1. 準備 React 專案 & 完成打包
- 2. 準備 Docker 鏡像 & 組態檔
- 3. 啟動 / 停止服務
- 其他資源
- 參考連接
- 完整代碼示例
正文
1. 準備 React 專案 & 完成打包
先準備一個 React 專案，使用 create-react-app 腳手架搭建的也好，自己手動搭建的也行，通常是使用 webpack 作為打包工具
- 這里推薦一個作者自己寫的腳手架
$ yarn global add @youxian/cli
$ yx-cli deploy_react
然后選擇前端專案
- 接下來進入專案根目錄后運行打包指令
$ cd deploy_react
$ yarn build
2. 準備 Docker 鏡像 & 組態檔
接下來要準備好 Docker 環境，安裝就不說了，請先安裝好 Docker 和 Docker Compose 兩個工具（Linux 環境下 Docker Compose 需要額外安裝）
- 拉取 nginx 鏡像
$ docker pull nginx
- 準備
docker-compose.yml組態檔
/deploy_react/docker-compose.yml
version: '3'
services:
# 服務名稱
nginx:
# 鏡像:版本
image: nginx:latest
# 映射容器80埠到本地80埠
ports:
- '3000:80'
# 資料卷 映射本地檔案到容器
volumes:
# 映射nginx.conf檔案到容器的/etc/nginx/conf.d目錄并覆寫default.conf檔案
# - ./nginx.conf:/etc/nginx/conf.d/default.conf
# 映射 build 檔案夾到容器的 /usr/share/nginx/html 檔案夾
- ./dist:/usr/share/nginx/html
# 覆寫容器啟動后默認執行的命令，
command: /bin/bash -c "nginx -g 'daemon off;'"
當然你可以提供自己的 nginx.conf 來替換默認的，這里先注釋掉使用默認的組態檔
當你找不到 nginx 的默認組態檔的時候可以使用 nginx -t 指令來查找
$ nginx -t
3. 啟動 / 停止服務
- 最后使用
docker-compose up指令啟動容器
$ docker-compose up -d
- 訪問應用埠
- 要停止服務則是使用
docker-compose down
$ docker-compose down
其他資源
參考連接
| Title | Link |
|---|---|
| Docker 使用: docker-compose 實作按配置啟動容器 | https://blog.csdn.net/weixin_44691608/article/details/120624526 |
| Webpack配置區分開發環境和生產環境 | https://www.cnblogs.com/dengyao-blogs/p/11598431.html |
| React 實踐專案 （五） | https://github.com/DigAg/digag-pc-react/issues/10 |
| Nginx安裝，目錄結構與組態檔詳解 | https://www.cnblogs.com/liang-io/p/9340335.html |
| linux下如何查找nginx組態檔的位置 | https://www.cnblogs.com/jpfss/p/10077004.html |
| Nginx —— nginx的命令列控制（nginx的啟動與停止、多載組態檔、回滾日志檔案、平滑升級等操作） | https://blog.csdn.net/weixin_42167759/article/details/84999456 |
| docker運行nginx為什么要使用 daemon off | https://www.cnblogs.com/weifeng1463/p/10277178.html |
完整代碼示例
https://github.com/superfreeeee/Blog-code/tree/main/deployment/docker/deploy_react
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/305927.html
標籤：其他