使用 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需要覆盖include( )中的文件。我最终做了后者。

所以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 （里面的 server 标签包含在 nginx 配置中。如果你有你try_files $uri $uri/ /index.html =404;的正常nginx.conf并且你没有删除或替换这个包含，那么它仍然无法工作。

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