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

工作完美！

如何从docker容器中的react build中提供静态文件

1 个答案: