nginx - 使用 Nginx 在 Docker 容器中部署带有路由器的 Angular2

Question

我正在尝试部署一个使用框架路由器功能的 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;
  }
}

除了 Angular 路线外，一切正常。意思是/有效，但是/resume 被重定向到/

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

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

Answer 1

我也使用了上述所有方法，但仍然无法正常工作。最终我发现 nginx.conf 文件中还有另一个包含。这个include需要被移除，或者include(default.conf)中的文件需要被覆盖。我最终选择了后者。

所以nginx.conf就没有再复制了，我用的是最开始的那个。现在这是我的 docker 文件:

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

我的 default.conf 是:

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 文件:

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 配置中。如果你在你的正常 nginx.conf 中有你的 try_files $uri $uri//index.html =404; 并且你不删除或替换这个包含，那么它仍然不是去上类。

我在这个问题上纠结了很久，所以我希望我能帮助人们找到这个非常具体的答案。