使用 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;
  }
}

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

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

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

Answer 1

我也在使用上述所有方法，但仍然无法正常工作。最终我发现nginx.conf 文件中还有另一个包含。这个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; 并且您没有删除或替换这个包含，然后它仍然无法工作。

我在这方面苦苦挣扎了很久，所以我希望我能帮助人们回答这个非常具体的问题。

Answer 2

我正在使用

try_files $uri $uri/ /index.html =404;

在我的 nginx.conf 中

Answer 3

我在位置部分使用这个：

try_files $uri$args $uri$args/ $uri/ /index.html =404;