如何使用多个节点应用程序设置 nginx 反向代理

Posted 2023-02-22

【中文标题】如何使用多个节点应用程序设置 nginx 反向代理

【英文标题】：How to set up nginx reverse proxy with multiple node apps

【发布时间】：2019-08-17 03:53:30

【问题描述】：

我有两个想要在同一个域上运行的 Vue.js 应用程序（例如，https://localhost:8080/app1 和 https://localhost:8080/app2）。这两个应用程序都在单独的 docker 容器中运行，并且我已经设置了第三个 docker 容器运行带有反向代理的 nginx，以便拥有 ssl。

我可以访问所需位置的应用程序，但缺少一些资源（图像、字体等）。我意识到我的 nginx 服务器在 https://localhost:8080/my_resource 上查找它们，但我不知道如何将它们转发到正确的位置（即 https://localhost:8080/app1/my_resource 和 app2 的类似位置）。

我尝试在 nginx 中使用“try_files”指令，如下所示：

location / 
   try_files $uri $uri/ http://app1:8080 http://app2:8080

但它不起作用。

这是我的 nginx 配置文件

server 
  listen 80;
  listen [::]:80;
  server_name localhost;
  return 301 https://$server_name$request_uri;


# Change the default configuration to enable ssl
server 
    listen 443 ssl;
    listen [::443] ssl;

    ssl_certificate /etc/nginx/certs/my_app.crt;
    ssl_certificate_key /etc/nginx/certs/my_app.key;

    server_name localhost;
    server_tokens off;

    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

    location / 
        if ($http_referer = "https://localhost:8080/app1/") 
            proxy_pass http://app1:8080;
            break;
        
        if ($http_referer = "https://localhost:8080/app2/") 
            proxy_pass http://app2:8080;
            break;
        
    


    location /app1/ 
        proxy_pass http://app1:8080/;
    

    location /app2/ 
        proxy_pass http://app2:8080/;
    

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

这是我的 docker-compose

version: "3.6"
services:
  app1:
    image: "app1"
    expose:
      - "8080"
    command: ["serve", "-s", "/app/app1/dist", "-l", "8080"]

  app2:
    image: "app2"
    expose:
      - "8080"
    command: ["serve", "-s", "/app/app2/dist", "-l", "8080"]

  nginx:
    image: "nginx"
    ports:
      - "8080:443"
    depends_on:
      - "app1"
      - "app2"

感谢您的任何意见:)

【问题讨论】：

在静态文件中添加前缀 /app1 或 /app2 怎么样？

你的两个vue应用都是静态文件应用吗？还是存在一些服务器端逻辑？

@JustinLessard 那行不通，主要原因是 nginx 服务器在例如localhost:8080/my_resource_app1 或localhost:8080/my_resource_app2 查找文件，而它应该去localhost:8080/app1/my_resource_app1。为静态文件添加前缀并不能真正解决这个问题，对吗？还是我错过了什么？

@lifeisfoo 它们是静态的。我能够在 css/*.css 和 js/*.js（和 index.html）中加载 css，但在同一级别的其他文件夹中没有任何内容（例如，img 中的字体文件）。如果重要的话，我已经使用 npm run build 进行了部署。

【参考方案1】：

经过多次尝试和错误，我找到了解决方案。我不认为这是最佳解决方案，但它正在工作。这是我的 nginx 配置：

# Pass any http request to the https service
server 
    listen 80;
    listen [::]:80;
    server_name localhost;
    return 301 https://$server_name$request_uri;


# Configure the ssl service
server 
    listen 443 ssl;
    listen [::443] ssl;

    ssl_certificate /etc/nginx/certs/my_app.crt;
    ssl_certificate_key /etc/nginx/certs/my_app.key;

    server_name localhost;
    server_tokens off;

    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

    location / 
        proxy_intercept_errors on;
        error_page 404 = @second;
        proxy_pass http://app1:80;
    

    location @second 
        proxy_pass http://app2:80;
    


    location /app1/ 
        rewrite ^/app1(.*) /$1 break;
        proxy_pass http://app1:80;
    

    location /app2/ 
        rewrite ^/app2(.*) /$1 break;
        proxy_pass http://app2:80;
    

    # redirect server error pages to the static page /50x.html
    error_page   500 502 503 504  /50x.html;
    location = /50x.html 
        root   /usr/share/nginx/html;