使用Nginx在Docker容器內部署帶有路由器的Angular2

我想部署一個使用框架的路由器功能的Angular 2，但我有一些問題在docker容器內爲nginx服務。使用Nginx在Docker容器內部署帶有路由器的Angular2

由角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; 
    } 
}

這一切除了角路徑的作品。意義/作品，但/恢復重定向到/

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

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

來源

2016-09-10 CESCO

'/ resume'請求不應該打到nginx。應該在客戶端處理角度。你的nginx在這裏只能用來處理你的角度應用程序的初始下載。所以我會專注於你的角度設置。你能在這裏發佈更多嗎？ – Alkaline

@Alkaline在本地主機上工作，因爲它應該是。 – CESCO

-1

我在ng2中不是很好，是否丟失了路由路徑的斜槓？
你有沒有試過這個？

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

來源

2016-09-10 01:45:15 Choldrim

例程在容器外部工作，使用'ng serve' – CESCO

我使用

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

礦山nginx.conf

來源

2016-09-10 06:15:46 Rem

我的位置部分使用此：

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

來源

2017-05-19 13:02:06 reyiyo

我還使用人的上面，但仍然無法實現它的工作。最終我發現在nginx.conf文件中有另一個包含。我真的需要刪除或替換包含的文件（default.conf）。我最終做了後者。

因此nginx.conf不會被複制，而是使用最初的一個。這是我現在的搬運工文件：

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中，並且您不刪除或替換此包含，那麼它仍然不起作用。

我在這方面掙扎很久，所以我希望我可以幫助人們提供這個非常具體的答案。

來源

2017-10-30 08:23:46

使用Nginx在Docker容器內部署帶有路由器的Angular2

回答

相關問題