Nginx Angular Docker [英] Nginx Angular Docker

问题描述

我用一个前端服务器和两个后端服务器运行docker-compose.对后端的请求就像一个护身符一样工作，我可以使用angulars路由器在我的应用程序中进行导航.网址在我的浏览器中已更改，但我认为这是通过角度以某种方式在内部完成的.我的baseref是/，我也尝试过使用./.

I run docker-compose with one frontend and two backend servers. The requests to the backends work like a charm, I can navigate in my app by using angulars router. The urls are changed in my browser but I assume this is done somehow internally by angular. My baseref is / I also tried it with ./.

问题: 一旦我重新加载不是索引的页面(或手动输入uri)，nginx就会尝试将此页面转发到未找到的@node.然后，我可以使用express重定向到索引，但这听起来不像是对我有效的解决方案.

Problem: As soon as I reload a page (or enter an uri manually) which is not index nginx tries to forward this page to @node where it is not found. I could then redirect with express to index but this does not sound like a ligid solution to me.

我的nginx配置:

#This is a minimalist nginx configuration file that might be an appropriate starting point for dev work
#This file was not developed with the intent of being used on a production environment.
#user nobody nogroup;

worker_processes 1;

pid        /var/log/nginx/nginx.pid;
error_log  /var/log/nginx/error.log error;

events {
    worker_connections 512;
}

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

  #send all requests which are not served by nginx to nodejs core
  upstream docker-node {
      server myapp_core:3000;
  }
  upstream docker-intergram {
      server myapp_intergram:5000;
  }

  #chatbot
  server {
    listen 8443 default_server ssl;
    ssl_certificate /etc/ssl/cert_chain.crt;
    ssl_certificate_key /etc/ssl/my-app.key;
    server_name my-app.com;

    location / {
        proxy_pass         http://docker-intergram;
        proxy_redirect     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-Host $server_name;
    }
  }

  #redirect to ssl
  server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name _;
    return 301 https://$host$request_uri;
  }

  # nginx server instance
  server {
      access_log /var/log/nginx/access.log;
      listen 443 default_server ssl;
      ssl_certificate /etc/ssl/cert_chain.crt;
      ssl_certificate_key /etc/ssl/my-app.key;
      server_name my-app.com;

      client_header_buffer_size 256k;
      large_client_header_buffers 8 1024k;
      client_max_body_size 5M;

      location /assets {
          alias /usr/src/app/assets/;
      }

      location /node_modules {
          alias /usr/src/app/node_modules;
      }

      location / {
          index index.html index.htm;
          root /usr/src/app;
          # try_files $uri $uri/ @node;
          try_files $uri$args $uri$args/ $uri/ @node;
      }

      location @node {
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header Host $http_host;
          proxy_set_header X-NginX-Proxy true;
          proxy_buffering on;

          proxy_pass http://docker-node;
          proxy_redirect off;

          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection "upgrade";
      }

      location /socket.io/ {
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header Host $http_host;
          proxy_set_header X-NginX-Proxy true;
          proxy_buffering off;

          proxy_pass http://docker-node;
          proxy_redirect off;

          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection "upgrade";
     }
  }

}

都不是

try_files $uri $uri/ @node;

也(来自 nginx-angular2-angular-routes )

try_files $uri$args $uri$args/ $uri/ @node; # solution from other stackoverflow question does not work

工作.

在此解决方案中，似乎无法索引，但我想保留我的后端路由没有前缀.

In this solution seems to be to froward to index but I would like to keep my backend routes unprefixed.

推荐答案

根据建议，位置顺序很重要. 尝试这样的事情(在下文中，我为所有API使用前缀)

As suggested, the location order is important. try something like this (in the following i use a prefix for all API)

upstream node_server {
  server localhost:3000;
}

server {
    listen 80;

     root /home/ec2-user/Elaisian/dist/;
     include /etc/nginx/default.d/*.conf;

    if ($http_x_forwarded_proto = 'http'){
       return 301 https://$host$request_uri;
    }

location /api/ {
   proxy_pass http://node_server/api/;
   proxy_http_version 1.1;
   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 / {
   try_files $uri $uri/ /index.html;
 }

这篇关于Nginx Angular Docker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！