web-dev-qa-db-ja.com

Angular nginxで実行され、追加のnginxリバースプロキシの背後にあるアプリ

現在、2つのAngularアプリに対してリバースプロキシを作成しています。SSLが有効になっている( httpsのように)docker Hostの443ポートを介して両方のアプリにアクセスできるようにしたい://192.168.xx/app1 および https://192.168.xx/app2 )なので、ユーザーは各アプリのポート番号を入力する必要がありません。

私の設定では、アプリケーションのすべての部分が独自のDockerコンテナ内で実行されます。-コンテナ1:Angular App 1(ポート80がポート8080のホストに公開されています)-コンテナ2:Angularアプリ2(ポート80がポートポート8081のホストに公開されている)-コンテナ3:リバースプロキシ(ポート443が公開されている)

Angularアプリとリバースプロキシの両方がnginxで実行されています。アプリは次のようにビルドされます:ng build --prod --base-href /app1/ --deploy-url /app1/

アプリのnginx設定は次のとおりです。

server {
  listen 80;
  sendfile on;

  default_type application/octet-stream;

  gzip on;
  gzip_http_version 1.1;
  gzip_disable      "MSIE [1-6]\.";
  gzip_min_length   256;
  gzip_vary         on;
  gzip_proxied      expired no-cache no-store private auth;
  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  gzip_comp_level   9;

  root /usr/share/nginx/html;

  index index.html index.htm;

  location / {
    try_files $uri $uri/ /index.html =404;
  }
}

リバースプロキシのnginx構成は次のようになります。

server {
  listen 443;
  ssl on;
  ssl_certificate /etc/nginx/certs/domaincertificate.cer;
  ssl_certificate_key /etc/nginx/certs/domain.key;

  location /app1/ {
    proxy_pass http://192.168.x.x:8080;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $Host;
    proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto  $scheme;
    proxy_http_version 1.1;
    proxy_cache_bypass $http_upgrade;

  }
  location /app2/ {
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $Host;
    proxy_http_version 1.1;
    proxy_cache_bypass $http_upgrade;
     proxy_pass http://192.168.x.x:8081;
  }
}

https://192.168.xx/app1 」というURLでアプリを開こうとすると、アプリに到達しますが、すべての静的ファイル「Uncaught SyntaxError:Unexpected token < ': Chromeからのエラーメッセージ

静的なjsおよびcssファイルの代わりに、アプリのindex.htmlが返されるようです。これはアプリ自体のnginx設定の問題だと思います。

私はその問題を解決する方法を理解しようとかなりの時間を費やしましたが、まだ運がありません。ここの誰かが私を助けてくれることを願っています。

14

まず、私は1つのサービス、1つのコンテナーがnginxでリダイレクトを提供するアプローチを好みます。また、証明書で dockerized nginxリバースプロキシ を使用してほぼ自動的にhttpsもカバーします。必要に応じて letsencrypt証明書 を使用することもできます。 Angularアプリケーションをコンテナーにデプロイできます リバースプロキシの背後

enter image description here

以下に、Dockerデプロイメントの手順を説明します。また、コンテナ展開用のGUIである portainer も含めます。

  • オプション-v $ HOME/certs:/ etc/nginx/certsを使用してyour.domain用に生成された証明書を共有するポート443でnginxを実行します。たとえば、ホスト上のどこかに証明書を配置します/ etc/nginx/certs。サーバーの再起動時にコンテナーを自動的に実行するには、オプション-restart = alwaysが必要です。
docker run -d --name nginx-proxy --restart=always -p 443:443 -v /root/certs:/etc/nginx/certs -v /var/run/docker.sock:/tmp/docker.sock:ro jwilder/nginx-proxy
  • アプリ1と2はappX.yourdomainにデプロイする必要があり、Docker IPにリダイレクトする必要があります(これにより、nginxはサブドメインをコンテナーにリダイレクトできます) 。
  • Dockerfileは、異なるポート(8080および8081)でWebサービスを公開する必要があります。コンポーネントもそのポートにデプロイする必要があります
  • 最も重要なことは、アプリケーション1と2のコンテナにオプション-e VIRTUAL_Host = appX.yourdomainを含める必要があることですPROXY_ADDRESS_FORWARDING = true
docker run --name app1 --restart=always -d -e PROXY_ADDRESS_FORWARDING=true -e VIRTUAL_Host=app1.yourdomain yourcontainer
  • Portainerも起動して、Dockerコンテナーのダッシュボードを提供します。
docker run --name portainer --restart=always -v ~/portainer:/data -d -e PROXY_ADDRESS_FORWARDING=true -e VIRTUAL_Host=portainer.yourdomain portainer/portainer -H tcp://yourdockerip:2376

したがって、基本的には、いくつかのリクエスト(サブドメイン)がnginxに到着すると、自動的にangularコンテナーアプリ(appX.yourdomainによって参照される)にリダイレクトされます。jwilder/ nginx-proxyが自動的にnginx.confは、さまざまなコンテナーが起動したときに発生します。マイクロサービスアーキテクチャはSpring(autodeployment)で実装されているため、 angular and nginx を使用してコンテナーを構築する方法をここに含めますが、これはすでに解決していると思います。 docker-composeの使用も検討します。

4
Carlos Cavero

問題は次のとおりです。8080および8081コンテナは、localhost:8080/styles.cssまたはlocalhost:8080/bundle.jsなどのリソースを開くことができます。ただし、現在の構成では、代わりにlocalhost:8080/app1/styles.cssリクエストを取得します。 rewrite /?app1/(.*)$ /$1 break;ルールをリバースプロキシに追加して、正しいリクエストが得られるようにしてください

0
Andrei