用于多个反应应用程序的 Nginx 配置（docker-compose）答案

【问题标题】：Nginx config for multiple react apps (docker-compose)用于多个反应应用程序的 Nginx 配置（docker-compose）
【发布时间】：2021-01-30 01:26:17
【问题描述】：

为了开发，我正在尝试在同一端口上本地运行两个 react 应用程序（因此两者都可以共享 localStorage），其中 app1 在 localhost:8000 和 app2 在localhost:8000/app2 上运行。但是，通过下面的设置，我遇到了对localhost:8000/app2/... 的所有请求都被路由到 app1 的问题。

有没有办法解决这个问题？

nginx.conf

更新：将/app2 块移到/ 前面（见评论）。

server {
  listen 8000;
  server_name localhost;

  location /app2 {
    proxy_set_header   X-Forwarded-For $remote_addr;
    proxy_set_header   Host $http_host;
    proxy_pass http://app2:3001;
    proxy_http_version 1.1;
    proxy_set_header   Upgrade $http_upgrade;
    proxy_set_header   Connection "upgrade";
  }

  location / {
    proxy_set_header   X-Forwarded-For $remote_addr;
    proxy_set_header   Host $http_host;
    proxy_pass http://app1:3000; 
    proxy_http_version 1.1;
    proxy_set_header   Upgrade $http_upgrade;
    proxy_set_header   Connection "upgrade";
  }
}

docker-compose.yml

version: "3"
services: 
  nginx:
    image: nginx:latest
    ports:
      - "8000:8000"
    volumes: 
      - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf
  app1:
    container_name: "app1"
    image: node:12
    ports:
      - "3000:3000"
    build:
      context: "./app1"
    volumes:
      - "./app1:/src/app"
  app2:
    container_name: "app2"
    image: node:12
    ports:
      - "3001:3001"
    build:
      context: "./app2"
    volumes:
      - "./app2:/src/app"

Dockerfile app1

app2 Dockerfile 有EXPOSE 3001 和npm start --port 3001

FROM node:12    
WORKDIR /src/app    
COPY package*.json ./    
RUN npm install    
EXPOSE 3000    
CMD ["npm", "start", "--port", "3000"]

【问题讨论】：

您是否尝试过在您的 Nginx 配置中将 location /app2 { ... } 块移动到第一个位置块之上？
谢谢！是的，我已经尝试过了。没用。我会更新问题。

标签： node.js reactjs nginx docker-compose reverse-proxy

【解决方案1】：

我将用一个答案更新这个老问题：该问题与 nginx 或 docker-compose 无关。相反，我在开发模式下运行了两个 create-react-app 应用程序，我忘记在 package.json 中设置 { "homepage": "/app2" } 或将 PUBLIC_URL=/app2 设置为环境变量，以便从子目录中为应用程序提供服务。

【讨论】：