reactjs - 我如何在docker容器中从我的React构建中提供静态文件

Question

我是docker和构建项目的新手。我试图将我的应用程序放入带有nginx的docker容器中，但是当我运行该容器时，我得到了一个空白页面，其中包含404错误的静态目录中的文件。我基本上遵循这篇文章:https://blog.aevitas.co.uk/running-react-on-docker-with-nginx/

我使用了create-react-app，但未在webpack中进行任何更改。这是我的文件的外观:

Dockerfile:

#Node image
FROM node:8.11.3 as builder
#Create app directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app

COPY . .

# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH

# install and cache app dependencies
ADD package.json /usr/src/app/package.json
RUN npm install
RUN npm install react-scripts@1.1.1 -g

RUN npm run build

CMD ["npm", "start"]

FROM nginx:1.13.3-alpine

RUN rm -rf /usr/share/nginx/html/*

COPY nginx/default.conf /etc/nginx/conf.default
COPY --from=builder /usr/src/app/build /usr/share/nginx/html

CMD ["nginx", "-g", "daemon off;"]

default.config:

server {
  listen 80;

  sendfile on;

  default_type application/octet-stream;


  gzip on;
  gzip_http_version 1.1;
  gzip_disable      "MSIE [1-6]\.";
  gzip_min_length   256;
  gzip_vary         on;
  gzip_proxied      expired no-cache no-store private auth;
  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  gzip_comp_level   9;

  root /usr/share/nginx/html;

  location / {
    try_files $uri $uri/ /index.html =404;
  }
}

Answer 1

我已经阅读了https://blog.aevitas.co.uk/running-react-on-docker-with-nginx/文章，以及我所做的事情:

1-npx create-react-app sample
2-在示例目录中，我使用default.conf创建了目录nginx

3-将COPY nginx/default.conf更改为COPY ./nginx/default.conf
4-建立图片:docker build -t react-app .
5-运行:docker run --name react-app-run -p 8080:80 react-app:latest
6-访问:localhost:8080

工作完美!