使用 Docker 構建為生產創建 React 應用程序？

Question

我正在使用 docker docker build和以下 Dockerfile 創建一個 React 應用程序：

# build env
FROM node:13.12.0-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./
RUN npm ci
RUN npm install react-scripts -g
RUN npm install --save @fortawesome/fontawesome-free
RUN apk add nano
RUN apk add vim
COPY . ./
RUN npm run build

# production env
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

然而，我相信 Dockerfile 在這里並不是非常重要。 在我的源代碼中有一個主配置文件，我想將其從docker image刪除，以便能夠輕松部署我的 React 應用程序。 這會在 Dockerfile 命令RUN npm run build期間導致編譯錯誤，因為編譯器沒有找到被另一個文件引用的文件。 對於開發版本，這不是問題，因為npm start不是那么敏感。

我會在最終應用程序中將配置文件添加為docker volume ，因此代碼將能夠毫無問題地找到它。 我只是想知道如何處理這樣的情況，因為它在我的道路上沒有更早出現？

也可以隨意評論或優化我的Dockerfile ，因為我不確定例如 Nginx 是否適合用於網站前端應用程序的這些生產構建。

Answer 1

如果您的應用程序當前require配置文件，就像您已經注意到的那樣，它類似於在構建時將值“硬編碼”到其中。 如果您確實需要能夠在運行時動態交換另一個配置文件，您將需要使用例如fetch()來加載它，而不是捆綁它（如require那樣）。

如果在構建時配置東西沒問題，那么我還建議查看CRA 自定義環境變量； 然后，您可以在構建時將合適的值作為環境變量注入。

除此之外，如果您正在尋找對 Dockerfile 的批評，從一個 Aarni 到另一個：

• 如果在構建過程中需要執行npm ci或yarn之外的任何操作來安裝東西，則 package.json 已損壞。 react-scripts應該是開發依賴項，Font Awesome 應該是常規依賴項。
• 您不需要在臨時容器中添加nano和vim ，即使您這樣做了，也最好在apk add中一步apk add它們。
• 您不需要修改構建容器中的 PATH。
• 使用 Nginx 絕對沒問題。

# build env
FROM node:13.12.0-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . ./
RUN npm run build

# production env
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Answer 2

這是我的 react docker 文件的示例。 如果您想優化，可能可以使用它。

PS：我從 kubernetes 運行它。

# #############################   Stage 0, Build the app   #####################
# pull official base image
FROM node:13.12.0-alpine as build-stage
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install app dependencies
COPY package*.json ./
#RUN npm install
RUN npm install

# add app
COPY . ./

#build for production
RUN npm run-script build

# #### Stage 1, push the compressed  built app into nginx ####
FROM nginx:1.17

COPY --from=build-stage /app/build/ /usr/share/nginx/html