有個需求是要將 React 專案 Deploy 在公司開發用的 Docker 上,簡單寫個筆記,以後有類似的需求可以直接複製貼上使用
新建 React 專案
現在主流大致上就是以 【Create React App】 或 【Vite】 來建置,這篇文章的範例是使用 Vite,如果是使用 Create React App 麻煩自行做對應的調整
新建測試專案 test-vite-docker,執行指令
npm create vite@latest
大家很熟的東西就不再多說
Docker 設定
新增 Dockerfile
在新建的 React 專案 目錄下新增一支 Dockerfile 檔案,內容如下
FROM node:20.11-alpine as build
WORKDIR /app
COPY . /app
RUN npm install
RUN npm run build
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx","-g","daemon off;"]
簡單說明一下,這裏 node 用的版本是 20.11.0 LTS,如果需要用別的版本請自行更換,docker image 用的都是 alpline,其實我一直搞不懂差在哪裏,只知道檔案比較小,跑起來沒什麼問題就一直用下去了
docker 是使用 multi-stage builds 的語法,簡單說就是將拆成兩個 stage
- node stage:build react 專案
- nginx stage:將 node build 後的結果複製到 nginx,然後執行
multi-stage builds 的詳細說明,可參考官方文件【Multi-stage builds】
新增 .dockerignore
在 Dockerfile 同一個目錄下增加一支 .dockerignore 檔案,作用很像 git 的 .gitignore,在上傳 docker 時會忽略掉這些目錄和檔案,內容如下,可以自行新增或減少內容
build
dist
node_modules
package-lock.json
README.md
建立 Docker Image 檔案
範例 image 名稱叫做 test-vite-docker
docker build -t test-vite-docker .
建立 Docker Container 且執行
範例 container 名稱也叫 test-vite-docker,port 改成 8081
docker run --name test-vite-docker -p 8081:80 test-vite-docker
然後點選瀏覽器,port 用 8081 就可以看到測試網頁了
解決 Nginx 配置正確處理 Router 的 history 模式
不過 deploy 後有點問題,直接在瀏覽器點連結時會出現 404 (從首 頁的連結點擊就會正常),同時記錄一下解決方法
在根目錄增加一支檔案 nginx.conf,內容如下:
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
然後修改 Dockerfile,增加一行如下
FROM node:20.11-alpine as build
WORKDIR /app
COPY . /app
RUN npm install
RUN npm run build
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf # 增加這一行
EXPOSE 80
CMD ["nginx","-g","daemon off;"]
重新建立 Docker Image 檔案和建立 Docker Container 且執行,問題解決