使用 Nginx 在 Docker 容器内部署带有路由器的 Angular2

我正在尝试部署一个使用框架的路由器功能的 Angular 2，但在 docker 容器内使用 nginx 为其提供服务时遇到一些问题。

由 angular-cli 构建的 Angular 应用程序具有如下文件结构：

./dist
├── 08c42df75dd2c636f46f3c564b3ddaa5.ttf
├── 8eab7754b320d3562a2deff1ca81bb6f.woff2
├── assets
│   ├── fonts
│   │   ├── Avenir_Next_New_Regular.otf
│   │   ├── Avenir_Next_New_Regular.ttf
│   │   └── material.woff2
│   └── img
│       ├── angular-2.svg
├── index.html
├── inline.js
├── main.dc3f8a76e21296ab1f32.bundle.js
├── main.dc3f8a76e21296ab1f32.bundle.js.gz
├── styles.771fbb659c3d6c4edd71.bundle.js
└── styles.771fbb659c3d6c4edd71.bundle.js.gz

我正在尝试使用下面的 dockerfile 进行部署

FROM nginx:1.10-alpine
COPY dist/ /var/www
COPY ng2.conf /etc/nginx/conf.d/default.conf
CMD 'nginx'

棘手的部分是如何设置default.conf文件如下：

server {
  listen 80;

  root /var/www/;

  // The question is how do I set this location block
  // making sure both angular and the local files are happy?
  location / {
    try_files $uri  /index.html;
  }
}

除了有角度的路线之外，一切都有效。含义 / 有效，但 /resume 被重定向到 /

const appRoutes: Routes = [
    {
    path: '',
    component: DevComponent
  },
    {
    path: 'resume',
    component: ResumeComponent
  }
];

export const router: ModuleWithProviders = RouterModule.forRoot(appRoutes);

我也使用了上述所有内容，但仍然无法使其工作。最终我发现还有另一个包含在nginx.conf文件。这include需要删除，或者包含（default.conf）需要被覆盖。我最终做了后者。

So nginx.conf不再复制了，我用的是最初的那个。 现在这是我的 docker 文件：

FROM nginx
COPY dist /usr/share/nginx/html
COPY fast-nginx-default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

And my default.conf is:

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;

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

进一步解释：

这是默认设置nginx.conf file:

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;
#tcp_nopush     on;

keepalive_timeout  65;

#gzip  on;

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

注意这一行：include /etc/nginx/conf.d/*.conf;这可以确保 default.conf （里面有服务器标签）包含在 nginx 配置中。如果你有try_files $uri $uri/ /index.html =404;在你正常的情况下nginx.conf并且您不删除或替换此包含，那么它仍然无法工作。

我在这个问题上挣扎了很长时间，所以我希望我能帮助人们给出这个非常具体的答案。