使用Nginx在Docker容器内用路由器部署Angular2 [英] Deploy Angular2 with Router inside a Docker Container using Nginx
问题描述
我正在尝试部署一个使用该框架的路由器功能的Angular 2，但是在docker容器中使用nginx为其服务时遇到了一些问题.
由angular-cli构建的角度应用程序具有如下文件结构:
./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);
我在上面也使用了al，但仍然无法正常工作.最终，我发现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配置中.如果您的try_files $uri $uri/ /index.html =404;位于常规的nginx.conf中，并且没有删除或替换此包含，则仍然无法使用.
我为此苦苦挣扎了很久，所以希望我可以为这个非常具体的答案的人提供帮助.
I am trying to deploy an Angular 2 that uses the router capabilities of the framework but I am having some issues serving it with nginx inside a docker container.
An angular app built by the angular-cli, has a file structure like this:
./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
I am trying to deploy using the below dockerfile
FROM nginx:1.10-alpine
COPY dist/ /var/www
COPY ng2.conf /etc/nginx/conf.d/default.conf
CMD 'nginx'
The tricky part is how to setup the default.conf file below:
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;
}
}
It all works except the angular routes. Meaning / works but /resume get redirected to /
const appRoutes: Routes = [
{
path: '',
component: DevComponent
},
{
path: 'resume',
component: ResumeComponent
}
];
export const router: ModuleWithProviders = RouterModule.forRoot(appRoutes);
I was also using al the above, but still couldn't get it to work. Eventually I found out that there was another include in the nginx.conf file. This include needs to be removed, or the file in the include (default.conf) needs to be overwritten. I ended up doing the latter.
So nginx.conf is not copied any more, and I am using the initial one.
This is now my docker file:
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;
}
}
Further explanation:
This is the default 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;
}
Note this line: include /etc/nginx/conf.d/*.conf; this makes sure the default.conf (with the server tag inside is included in the nginx config. If you have your try_files $uri $uri/ /index.html =404; in your normal nginx.conf and you don't remove or replace this include, then it's still not going to work.
I struggled long on this, so I hope I can help people with this very specific answer.
这篇关于使用Nginx在Docker容器内用路由器部署Angular2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
