Fatal编程技术网
  • reactjs/
  • Reactjs 在docker compose上使用nginx代理react应用程序

Reactjs 在docker compose上使用nginx代理react应用程序

reactjs docker nginx docker-compose

Reactjs 在docker compose上使用nginx代理react应用程序,reactjs,docker,nginx,docker-compose,reverse-proxy,Reactjs,Docker,Nginx,Docker Compose,Reverse Proxy,我正在尝试使用docker compose运行两个容器—一个示例react应用程序和一个作为反向代理的nginx。 我已经运行了npx create react app react app来创建第一个容器，并将以下Dockerfile添加到文件夹中- FROM node RUN yarn global add serve WORKDIR /usr/src/app COPY package.json yarn.lock ./ RUN yarn COPY . ./ RUN yarn build CM

我正在尝试使用docker compose运行两个容器—一个示例react应用程序和一个作为反向代理的nginx。
我已经运行了
npx create react app react app
来创建第一个容器，并将以下Dockerfile添加到文件夹中-

FROM node
RUN yarn global add serve
WORKDIR /usr/src/app
COPY package.json yarn.lock ./
RUN yarn
COPY . ./
RUN yarn build
CMD serve -s build
然后，我在
/nginx
下创建了以下nginx配置文件

server {
    listen       80;
    server_name  localhost;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
    location /react {
        proxy_pass http://react:5000;
    }
}
最后，我在项目的根目录中创建了这个
docker compose.yaml
文件-

version: '3'
services:
  nginx: 
    image: nginx:latest
    container_name: production_nginx
    volumes:
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
    ports:
      - 80:80
      - 443:443

  react:
    build: ./react-app
    container_name: react-app
    expose:
      - "5000"
    ports:
      - 5000:5000
然后，我使用
docker compose-up--build
启动堆栈，但是当我使用
http://localhost/react
path我的nginx访问日志中出现以下错误-

eact-app | INFO: Accepting connections at http://localhost:5000
production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:29 +0000] "GET /react HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
production_nginx | 2020/01/29 18:24:29 [error] 7#7: *1 open() "/usr/share/nginx/html/static/css/main.d1b05096.chunk.css" failed (2: No such file or directory), client: 172.18.0.1, server: localhost, request: "GET /static/css/main.d1b05096.chunk.css HTTP/1.1", host: "localhost", referrer: "http://localhost/react"
production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:29 +0000] "GET /static/css/main.d1b05096.chunk.css HTTP/1.1" 404 555 "http://localhost/react" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:29 +0000] "GET /static/js/2.250dc4af.chunk.js HTTP/1.1" 404 555 "http://localhost/react" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:29 +0000] "GET /static/js/main.de4c6317.chunk.js HTTP/1.1" 404 555 "http://localhost/react" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
production_nginx | 2020/01/29 18:24:29 [error] 7#7: *4 open() "/usr/share/nginx/html/static/js/2.250dc4af.chunk.js" failed (2: No such file or directory), client: 172.18.0.1, server: localhost, request: "GET /static/js/2.250dc4af.chunk.js HTTP/1.1", host: "localhost", referrer: "http://localhost/react"
production_nginx | 2020/01/29 18:24:29 [error] 7#7: *3 open() "/usr/share/nginx/html/static/js/main.de4c6317.chunk.js" failed (2: No such file or directory), client: 172.18.0.1, server: localhost, request: "GET /static/js/main.de4c6317.chunk.js HTTP/1.1", host: "localhost", referrer: "http://localhost/react"
production_nginx | 2020/01/29 18:24:29 [error] 7#7: *5 open() "/usr/share/nginx/html/manifest.json" failed (2: No such file or directory), client: 172.18.0.1, server: localhost, request: "GET /manifest.json HTTP/1.1", host: "localhost", referrer: "http://localhost/react"
production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:29 +0000] "GET /manifest.json HTTP/1.1" 404 555 "http://localhost/react" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
production_nginx | 2020/01/29 18:24:34 [error] 7#7: *3 open() "/usr/share/nginx/html/static/js/2.250dc4af.chunk.js" failed (2: No such file or directory), client: 172.18.0.1, server: localhost, request: "GET /static/js/2.250dc4af.chunk.js HTTP/1.1", host: "localhost", referrer: "http://localhost/react"
production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:34 +0000] "GET /static/js/2.250dc4af.chunk.js HTTP/1.1" 404 555 "http://localhost/react" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:34 +0000] "GET /static/js/main.de4c6317.chunk.js HTTP/1.1" 404 555 "http://localhost/react" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
production_nginx | 2020/01/29 18:24:34 [error] 7#7: *4 open() "/usr/share/nginx/html/static/js/main.de4c6317.chunk.js" failed (2: No such file or directory), client: 172.18.0.1, server: localhost, request: "GET /static/js/main.de4c6317.chunk.js HTTP/1.1", host: "localhost", referrer: "http://localhost/react"
在我看来，nginx似乎在nginx容器中寻找react静态资产，但我不确定它为什么不将这些请求代理给react容器。知道如何解决这个问题吗？

我还没有使用nginx将代理服务器反向到我的前端。仅用于将请求从前端连接到服务器。相反，您可以尝试直接通过nginx托管
react应用程序。这是我做这件事的一个方法

我没有运行两个容器，而是在我的
react应用程序的根目录下设置了
Dockerfile
。
Dockerfile
对react应用程序进行生产构建，然后将其复制到nginx中，以托管在nginx配置中的
/
路径上。这就是该文件的外观


# Frontend build based on Node.js
FROM node:11.12.0-alpine as build-stage
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json /usr/src/app/package.json
RUN npm install
RUN npm install react-scripts@latest -g
COPY . /usr/src/app
#RUN CI=true npm test
RUN npm run build

# Stage 1
# Production build based on Nginx with artifacts from Stage 0
FROM nginx:1.15.9-alpine
COPY config/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build-stage /usr/src/app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]


在
react应用程序的根目录中，我还有一个
config
目录。在这个目录中，我有一个类似这样的
nginx.conf
文件


server {

    listen 80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri /index.html;                 
    }

    # redirect server error pages

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}


由于前端构建是在第一步复制到nginx中的，因此它现在可以在自己的文件系统中找到构建目录。之后，您可以在容器中构建和运行映像，所有内容都应该正确构建。我认为此时您所要做的就是将您的
docker compose.yml
文件移动到
react应用程序的根目录中，摆脱
react
服务，将
image:nginx:latest
更改为
build:。
并运行
docker compose-up-d
。您也可以放弃编写，只需通过运行docker build-t react app
来使用docker，在构建之后，在
react app
目录的根目录中运行
docker run-d-p 80:80 react app
。这是一个非常简单的开始方式，可能不是你想要的。但希望它能有所帮助。
在找到后，我通过将nginx配置更改为以下方式解决了问题-


upstream backend {
    server react:5000;
}

server {
    listen 80;
    server_name localhost§

    root /usr/src/app;

    location / {
        try_files $uri @backend;
    }

    location @backend {
        proxy_pass http://backend;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # Following is necessary for Websocket support
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}



谢谢你的详细解释。问题在于，这是一项本地努力，试图复制一个生产示例，在该示例中，nginx必须从远程位置为资产和应用程序提供服务。事实上，我在等待答案的时候成功了，我现在发布解决方案。哦，好的。我很想看看你是怎么想出来的。