Question

我有一个在docker容器内运行的Angular2 / Angular应用程序，并使用nginx来提供它。所以我的app base = / 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文件中映射我的所有应用网址，但似乎没有任何效果。我如何让它工作？

更新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
  }
];

Answer 1

这是我的nginx sites-available / myapp

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

在设置配置后，您要启用网站，请运行：

<base href="./">

我的index.html上的basehref

{{1}}

希望这有帮助！

Answer 2

nginx Docker image包含一个基本配置文件/etc/nginx/nginx.conf。该配置文件将各种项目设置为映像维护者（大概）知道是Docker容器的良好值的值，因此在服务Angular时尽量利用该配置文件是很诱人的。预期用户可能会希望这样做，因此基本配置文件包含指令

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

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

该文件可以很好也很简单。根据{{3}}和the Angular documentation的建议，它仅使用the Nginx documentation为所有深层链接路径提供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

Answer 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映像，然后运行应用程序。

Nginx Angular2 / Angular路线

3 个答案: