Docker Nginx Angular2/Angular 路由

Posted 2023-03-04

【中文标题】Docker Nginx Angular2/Angular 路由

【英文标题】：Docker Nginx Angular2/Angular routes

【发布时间】：2017-07-18 01:42:21

【问题描述】：

我有一个 Angular2/Angular 应用程序在 docker 容器中运行，并使用 nginx 为其提供服务。所以我的应用程序库 = /myapp/。使用基本网址（即 www.server.com/myapp 或 www.server.com/myapp/

）点击应用程序时，一切正常

events 
  worker_connections  4096;  ## Default: 1024


http 
  include /etc/nginx/conf/*.conf;

  server 
    listen       80 default_server;

    root   /usr/share/nginx/html;
    index  index.html index.htm;
    include /etc/nginx/mime.types;
    underscores_in_headers on;

    location /myapp 
      # If you want to enable html5Mode(true) in your angularjs app for pretty URL
      # then all request for your angularJS app will be through index.html
      try_files $uri /myapp/index.html;

    

    #Static File Caching. All static files with the following extension will be cached for 1 day
    location ~* .(jpg|jpeg|png|gif|ico|css|js)$ 
      expires 1d;
    

    ## PROXIES ##
    # location matcher for get requests. Any query params will be proxied using this location block
    location = /myapp/api 

      proxy_pass http://$hostname/api$is_args$query_string;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_set_header Host $host;
      proxy_cache_bypass $http_upgrade;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_connect_timeout       120;
      proxy_send_timeout          120;
      proxy_read_timeout          120;
      send_timeout                120;
    

    # location matcher for post requests i.e. updateAsset. Any request with additional path params will be proxied using this location block
    location ~ ^/myapp/api/(?<section>.*) 

      proxy_pass http://$hostname/api/$section;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_set_header Host $host;
      proxy_cache_bypass $http_upgrade;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_connect_timeout       120;
      proxy_send_timeout          120;
      proxy_read_timeout          120;
      send_timeout                120;
    
  

我的应用还有其他几条路线，例如/myapp/page1 或 /myapp/page2。当使用 nodejs 在开发模式下为应用程序提供服务时，这些路由可能会被命中。但是，一旦我将它容器化（容器化不是问题）并使用 nginx 提供服务，那么在尝试访问 /myapp/page1 或 /myapp/page2 时会出现 404 未找到。错误日志输出

2017/02/27 12:15:01 [error] 5#5: *3 open() "/usr/share/nginx/html/myapp/page1" failed (2: No such file or directory), client: 172.17.0.1, server: , request: "GET /myapp/page1 HTTP/1.1", host: "localhost"

我尝试在 nginx conf 文件中映射我所有的应用程序 url，但似乎没有任何效果。我如何让它发挥作用？

更新 1

添加了角度路线

主应用路由：

import  Route  from '@angular/router';
import  MyAppComponent  from './index';

export const MyAppRoutes: Route[] = [
  
    path: '',
    component: MyAppComponent
  
];

第 1 页路线：

import  Route  from '@angular/router';
import  Page1Component  from './index';

export const Page1Routes: Route[] = [
  
    path:'page1',
    component: Page1Component
  
];

【问题讨论】：

位置 /myapp 不应该是位置 /myapp/ 吗？

无论哪种方式都可以。我的问题是我无法让 /myapp/page1 映射到我的 Angular2 路由“page1”。这总是返回 404

嗯.. 它应该将所有内容重定向到 index.html，然后您的路由器可以接收它。它没有正确重定向到 /myapp/index.html 的事实表明位置或 try_files 不正确。您是否尝试添加结束 / ？

是的，两者都试过了。两种方法都奏效了。用角度路线更新了问题。 @MikeOne

不确定这是否是一个问题，但 html base href = 。如果我在浏览器中输入localhost/myapp，则始终添加尾随/

【参考方案1】：

这是我的 nginx 站点-available/myapp

server 
    listen 80;
    listen 80 [::]:80;
    root /my/root/path;
    server_name www.mysite.com mysite.com;

    location /app1/ 
        alias /my/root/path/app1/;
        try_files $uri$args $uri$args/ $uri/ /app1/index.html;
    

    location /app2/ 
         ...
        

设置好要启用站点的配置后，运行：

sudo ln -s /pathtonginx/sites-available/myapp /pathtonginx/sites-enabled/myapp

我的 index.html 上的 basehref

<base href="./">

希望这会有所帮助！

【讨论】：

try_files $uri$args $uri$args/ $uri/ /app1/index.html;像魅力一样工作

【参考方案2】：

nginx Docker image 包含一个基本配置文件 /etc/nginx/nginx.conf。该配置文件将各种项目设置为镜像维护者（可能）知道对于 Docker 容器来说是好的值，因此在为 Angular 提供服务时尽可能多地使用该配置文件是很诱人的。预计用户可能想要这样做，基本配置文件包含指令

http 
...
    include /etc/nginx/conf.d/*.conf;

因此，您可以将您的 Angular 特定配置放在文件 /etc/nginx/conf.d/ng.conf 中，并获得使用基本配置文件的好处。

那个文件可以很简单。根据the Angular documentation 和the Nginx documentation 的建议，它只使用try_files directive 为您的index.html 提供所有深层链接路径：

  server 
    location / 
      root /usr/share/nginx/html;
      try_files $uri $uri/ /index.html;
    
  

您的 Dockerfile 只需将该文件从构建上下文复制到 Docker 映像中：

COPY src/etc/nginx/conf.d/ng.conf /etc/nginx/conf.d/

我这样做了，但没有成功，因为还有一个障碍。 nginx Docker 映像还包括一个文件 /etc/nginx/conf.d/default.conf。该文件适用于提供静态内容（来自 /usr/share/nginx/html），如果 Nginx 优先使用该配置而不是您的配置（可能发生），您的 try_files 将毫无用处。因此，您的 Dockerfile 也应该删除该默认配置：

RUN rm /etc/nginx/conf.d/default.conf

【参考方案3】：

你需要像下面这样配置你的 docker 文件；

FROM nginx:1.17.8-alpine

COPY nginx.conf /etc/nginx/conf.d/nginx.conf
WORKDIR /usr/share/nginx/html/
COPY dist/mooveinn .
RUN rm /etc/nginx/conf.d/default.conf

一个重要的事情是删除默认的 nginx conf 文件。

那么你的 nginx 文件会和这个类似；

server 
    listen 80;
    server_name localhost;
    #sending logs to console(standard out) in a predefined json fromat
    #access_log / dev / stdout json_combined;
    #error_log / dev / stdout info json_combined;
    root / usr / share / nginx / html;
    index index.html index.htm;
    include / etc / nginx / mime.types;
    # compression
    gzip on;
    gzip_min_length 1000;
    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;

    # angular index.html location
    location / 
        try_files $uri $uri / /index.html;
    
    # potential reverse proxy
    for sending api calls
    location / reverse - proxy / 
        proxy_set_header Host $host;
        proxy_set_header Content - Type application / json;
        proxy_set_header X - Real - IP $remote_addr;
        # proxy_pass http: //pointer-api:8080/;
    

再次构建 docker 镜像，然后运行应用程序。