nginx位置正则表达式角度路由答案

【问题标题】：nginx location regex angular routingnginx位置正则表达式角度路由
【发布时间】：2019-11-02 03:20:33
【问题描述】：

我目前正在尝试让一个基于 Angular 8.x 的应用程序与路由在我的开发服务器上工作。我已经配置了一个在根路由上提供 api 的服务器以及一个应该在不同路由上运行的 Angular 应用程序。下面应该提供一个最小的 nginx-config 示例：

server {
  listen 443 ssl;
  listen [::]:443;

  root /home/user/;
  server_name sub.tld.com;

  ssl_certificate /path...;
  ssl_certificate_key /path...;

  location / {
    proxy_pass http://localhost:10020/;
  }

  location ^~/dashboard {
    alias /home/user/my-dashboard;
    try_files $uri $uri/ /index.html;
    index index.html;
  }
}

由于以正则表达式开头的位置表达式在执行时优先考虑，因此我预计可以使用普通的try_files $uri $uri/ /index.html; 调用，该调用适用于位于/ 位置的角度应用程序。

通常路由确实有效，但是重新加载页面会导致响应错误，即找不到 /index.html 文件。

有没有人使用过这样的部署管道，并提出任何有意义的建议？

【问题讨论】：

好的，等一下
如果我的回答对您有帮助，请告诉我。
嗯，问题是，我的 api 在/ 位置运行，而仪表板应用程序本身在 ^~dashboard 路径下运行，这很可能导致传统的 try_files 命令不起作用。

标签： angular nginx angular-routing nginx-location

【解决方案1】：

您应该配置位置，以便让角度来决定路线，这也将解决重新加载问题。

location / {
      root   /usr/share/nginx/html;
      index  index.html;
      expires -1;
      add_header Pragma "no-cache";
      add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";


      # Old deafult, I comment this because i have SPA app look: line 55
      # try_files $uri$args $uri$args/ $uri $uri/ =404; 

      # If the route dont exist return index.html 
      # This is the best option for (SPA Applications) like: React, Angular 5, Vue.js and Angular.js
      try_files $uri /index.html; 
    }

您可以查看我的 nginx.conf 文件，其中我有一个用于 api 和 NGINX 的烧瓶服务器，用于提供角度 dist 文件。

另外，您可以查看我的存储库，其中我展示了如何使用（NGINX、Angular 5、Docker、Flask）的工作示例

https://github.com/George35mk/Docker-NGINX-NG5-Flask-Elastic

nginx.conf

# ==============================================================================
# New Config
# ==============================================================================

user  nginx;
worker_processes  1;

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


events {
  worker_connections  1024;
}


http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;

  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';

  access_log  /var/log/nginx/access.log  main;

  sendfile    on;

  keepalive_timeout  65;

  gzip  on;

  # Configuration for the server
  server {

    listen 80;

    location /api {
      proxy_pass http://flask_api:5000;
    }

    location / {
      root   /usr/share/nginx/html;
      index  index.html;
      expires -1;
      add_header Pragma "no-cache";
      add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";


      # Old deafult, I comment this because i have SPA app look: line 55
      # try_files $uri$args $uri$args/ $uri $uri/ =404; 

      # If the route dont exist return index.html 
      # This is the best option for (SPA Applications) like: React, Angular 5, Vue.js and Angular.js
      try_files $uri /index.html; 
    }

  }

}

【讨论】：