Vuejs + nginx разрешить URL-адрес бэкенда в docker -составить?

Question

Моя цель - создать файл docker, где контейнер внешнего интерфейса может взаимодействовать с внутренним интерфейсом, в то время как доступ к backend-api не предоставляется через прокси внешнего интерфейса. По умолчанию конечная точка бэкэнда :8080/api/v1/.

Ссылка на репозиторий в конце сообщения.

Решение 1:

Проблема в том, что пользователи пользовательского интерфейса могут получить доступ к API-интерфейсу через внешний интерфейс, например, curl localhost:3000/api/v1/users.

Я нашел рабочее решение, в котором внешний интерфейс выполняет обратную связь с восходящим потоком, который следует за внутренним интерфейсом.

Вопрос: Не могли бы вы порекомендовать мне лучший подход о том, как ограничить (или не предоставлять) доступ к backend-api через интерфейс? Другими словами, запрос к localhost:3000/api/v1/users должен возвращать 400.

config внешнего интерфейса - .env.production

export const API_URL = "/api/v1/";

default.conf

upstream backend-api {
  server backend:8080; #service in docker-compose
}
server {
  listen            3000;
  location / {
    root      /app;
    index     index.html;
    try_files $uri $uri/ /index.html;
  }
  location /api/v1/ {
    proxy_pass http://backend-api;
  }
  ...
}

Решение 2 (работа в процессе): Решение пока не работает. Я думаю nginx default.conf неверно.

Я верю, что могу использовать docker DNS, но я продолжаю получать GET http://backend:8080/api/v1/users net::ERR_NAME_NOT_RESOLVED во внешнем приложении.

Вопрос: Как решить docker DNS внутри nginx блока сервера?

внешний интерфейс - .env.production

export const API_URL = "http://backend:8080/api/v1/";

default.conf

server {
  resolver          127.0.0.11;
  listen            3000;

  location / {
    root      /app;
    index     index.html;
    try_files $uri $uri/ /index.html;
  }

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

  location ~ /\.ht {
    deny  all;
  }
}

Ссылка на хранилище : https://github.com/zhenik/vue-prod-example

РЕДАКТИРОВАТЬ 1 Я нашел другой способ ограничения серверной части с помощью решения 1 выше, вам понадобятся две вещи:

1. Система аутентификации (например, AWS Cognito, Firebase и др. c ...).
2. Nginx ngx_http_auth_request_module

Nginx config будет выглядеть так:

location /api/v1/ {
    auth_request /auth;
    proxy_http_version 1.1;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_cache_bypass $http_upgrade;
    proxy_pass http://backend-api;
  }

  location = /auth {
    internal;
    proxy_method      POST;
    proxy_set_header  Token $http_Token;
    proxy_pass        http://auth-api/auth;
  }