Блог

Главная - Вопросы по программированию - Как настроить обратный прокси nginx с несколькими приложениями узла

Как настроить обратный прокси nginx с несколькими приложениями узла

#node.js #docker #nginx #vue.js

#node.js #docker #nginx #vue.js

Вопрос:

У меня есть два 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).

Я пытался использовать директиву «try_files» в nginx, вот так:

 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"

Спасибо за любой вклад 🙂

Комментарии:

1. Как насчет того, чтобы добавить префикс / app1 или / app2 к вашим статическим файлам?

2. Являются ли ваши два приложения vue только приложениями для статических файлов? Или существует какая-то логика на стороне сервера?

3. @JustinLessard На самом деле это не сработало бы, основная причина в том, что сервер nginx ищет файлы, например, на localhost: 8080/my_resource_app1 или localhost: 8080 / my_resource_app2 , в то время как он должен идти на localhost: 8080 / app1 / my_resource_app1 . Добавление префикса к статическим файлам на самом деле не исправит это, не так ли? Или я что-то упускаю?

4. @lifeisfoo Они статичны. Я могу загрузить css в css / *.css и js в js / *.js (и index.html ), но ничего в других папках того же уровня (например, файлы в 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;
    }
}