使用docker和nginx部署的React应用程序:/etc/nginx/conf.d/default.conf与这些

Question

hi我在使用docker和nginx 部署React应用程序(创建React应用程序(时遇到问题

图像创建成功：使用以下脚本：docker build -t front --network=host .

如何运行容器：docker run -p 3000:80 front

它不起作用，我收到以下消息：

10-listen-on-ipv6-by-default.sh: /etc/nginx/conf.d/default.conf differs from the packages version, exiting

我的docker文件：

FROM node:12.19.0-alpine3.12 as build
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
#ARG REACT_APP_BACKENDURL
#ENV REACT_APP_BACKENDURL $REACT_APP_BACKENDURL
# install and cache app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm ci
RUN npm install react-scripts@3.2.0 -g --silent
COPY . ./
RUN npm run build

# add app
#COPY . /app
# generate build
#RUN npm run  build
############
### test ###
############
# base image
FROM nginx:1.19.0-alpine
# copy artifact build from the 'build environment'
COPY --from=build /app/build /usr/share/nginx/html
#nginx config with react router
COPY  nginx/nginx.conf /etc/nginx/conf.d/default.conf
# expose port 80
EXPOSE 80
#COPY .env /usr/share/nginx/html
# run nginx
CMD ["nginx", "-g", "daemon off;"]

我的nginx.conf：

server {
listen 3000;
location / {
root   /usr/share/nginx/html;
index  index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page   500 502 503 504  /50x.html;
location = /50x.html {
root   /usr/share/nginx/html;
}
}

我做错了什么，我也在寻找部署REACT APP和docker 的最佳实践

Answer 1

您应该将上面的dockefile分离为2个dockerfile，一个用于正面图像，一个用于nginx。然后创建两个图像。2个容器属于这些图像。

暴露dockerfile nodejs:3000

并添加到nginx配置文件中：proxy_pass ip_address_nodejs_container:3000