Nginx 反向代理多个 React 应用程序

Question

亲爱的堆栈溢出，

我正在尝试配置一个 Nginx 反向代理，以基于同一域下每个的基本 URL 为两个 react 应用程序提供服务，您将在下面找到项目中使用的当前配置。

当前的情况是，当浏览到 ADMIN URL (/admin/) 时，会为浏览器完成的每个请求加载 index.html 文件，因此所有资产都像 @987654328 一样加载@，所以我的假设是缺少的配置在 nginx.conf 文件之一中？

---

项目结构

• NGINX（代理）
  • NGINX - React APP (/)
  • NGINX - React APP 管理员 (/admin)

配置

Docker 编写

version: "3.7"

services:
  nginx:
    image: nginx:stable-alpine
    container_name: nginx
    ports:
      - 8000:80
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro
  frontend:
    container_name: frontend
    build:
      context: ../frontend
      dockerfile: Dockerfile.prod
  frontend-admin:
    container_name: frontend-admin
    build:
      context: ../frontend-admin
      dockerfile: Dockerfile.prod

nginx.conf

http {

  server {
    listen                80;

    location /admin/ {
      proxy_pass          http://frontend-admin:80;
    }

    location / {
      proxy_pass          http://frontend:80;
    }

  }
}

REACT 应用程序

两个项目都使用了以下文件，我尝试将管理项目中的“location /”更改为“location /admin/”，但没有任何成功。

Dockerfile

# build environment
FROM node:14.16.1-alpine as build
WORKDIR /usr/src/app
COPY package.json yarn.lock ./
RUN yarn
COPY . ./
RUN yarn build

# production environment
FROM nginx:stable-alpine
RUN rm /etc/nginx/conf.d/default.conf
COPY --from=build /usr/src/app/dist /usr/share/nginx/html
COPY --from=build /usr/src/app/nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

nginx.conf

server {
  listen 80;
  
  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
  }
}

反应应用

• 最终 URL 应该是：http://myapp.com/
• 基本路径：
  • ``在wouter中配置
  • / 配置在vite

vite.config.js

// ...
export default defineConfig(({ mode }) => ({
  base: '/',
  // ...
}));

React APP 管理员

• 最终的 URL 应该是：http://myapp.com/admin/
• 基本路径：
  • /admin 配置在wouter
  • /admin/ 配置在vite

vite.config.js

// ...
export default defineConfig(({ mode }) => ({
  base: '/admin/',
  // ...
}));

Answer 1

对我有用的是在管理员的位置块上使用rewrite，这样下游的 nginx 就会收到干净的路径。

经过一些修改，全局配置如下所示：

user nginx;

events {
  worker_connections 1024;
}

http {
  include /etc/nginx/mime.types;

  server {
    listen 80;

    location /admin {
      rewrite /admin(.*) /$1 break;
      proxy_pass http://frontend-admin:80;
    }

    location / {
      proxy_pass http://frontend:80;
    }
  }
}

虽然应用配置如下所示：

user nginx;

events {
  worker_connections 1024;
}

http {
  include /etc/nginx/mime.types;
  sendfile on;
  server {
    listen 80;

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

然后，请求被正确转发到管理员 nginx：

frontend-admin    | 172.21.0.4 - - [19/Jul/2021:14:35:02 +0000] "GET / HTTP/1.0" 200 362 "-" "curl/7.77.0"
nginx             | 172.21.0.1 - - [19/Jul/2021:14:35:02 +0000] "GET /admin HTTP/1.1" 200 362 "-" "curl/7.77.0"

还有几点需要注意：

1. 我必须包含 /etc/nginx/mime.types 以便所有 nginx 将正确的 Content-Types 发送到浏览器。
2. 我没有去掉default.conf，把nginx.conf加到/etc/nginx/conf.d，而是直接替换了/etc/nginx/nginx.conf
3. 使用 nginx:latest 和 node:14.16.1 进行构建，但 alpine 应该可以正常工作

---

docker-compose.yml

version: "3"

services:
  nginx:
    image: nginx:latest
    container_name: nginx
    ports:
      - 8000:80
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
  frontend:
    container_name: frontend
    build:
      context: ./frontend
      dockerfile: ../Dockerfile.prod
  frontend-admin:
    container_name: frontend-admin
    build:
      context: ./frontend-admin
      dockerfile: ../Dockerfile.prod

Dockerfile.prod

# build environment
FROM node:14.16.1 as build
WORKDIR /usr/src/app
COPY [ "package.json", "yarn.lock", "./" ]
RUN yarn install --frozen-lockfile
COPY . ./
RUN yarn build

# production environment
FROM nginx:latest

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

Answer 2

我不确定它是否会有所帮助，但值得一试：

1. 您的管理应用文件应放在frontend-admin 容器的/usr/share/nginx/html/admin 目录下。

2. 对管理应用使用以下 nginx 配置：

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

Answer 3

最好使用子域，这样就不会出现这样的问题，下面是我用于 jenkins 的示例：

server     {
    listen 80;
    listen [::]:80;

    server_name     jenkins.site;

    location / {
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
                include       /etc/nginx/mime.types;
                proxy_pass http://jenkins:8080;

}
}