如何在Linux上部署Docker和Azure Web App的Angular 4應用程序

Question

我正在嘗試按照此文檔部署我的angular 4 web應用程序和docker。

Azure Web App on Linux Documentation

下面是目前我什麼泊塢文件看起來像：

# Create image based on the official Node 6 image from dockerhub 
FROM node:6 
# Create a directory where our app will be placed 
RUN mkdir -p /usr/src/app 
# Change directory so that our commands run inside this new directory 
WORKDIR /usr/src/app 
# Copy dependency definitions 
COPY package.json /usr/src/app 
# Install dependecies 
RUN npm install 
# Get all the code needed to run the app 
COPY . /usr/src/app 
# Expose the port the app runs in 
EXPOSE 80 
# Serve the app 
CMD ["npm", "start"] 

"start": "ng serve -H 0.0.0.0",

我能夠創建Web應用程序上的我的package.json currenly有這個腳本下Linux和推我的形象，但我試圖瀏覽Web應用程序時得到以下內容：

無效主機標頭

我在碼頭文件中丟失了什麼嗎？我有點卡在這一點，所以任何幫助將不勝感激。

Answer 1

如果您只是提供生成的應用程序，請儘可能簡單。你真的需要容器中的ng-cli和圖像中的所有節點模塊嗎？單獨的節點模塊至少爲200 MB。

用ng-build --prod在本地構建應用程序。這會生成dist文件夾，這是您需要的唯一一件事。

你結束了一個非常簡單的Dockerfile：

FROM nginx:stable-alpine 
ADD dist /usr/share/nginx/html 
ADD default.conf /etc/nginx/conf.d/ 

基本的nginx的conf處理的URL在角default.conf：

server { 
    listen  80; 
    server_name localhost; 
    root /usr/share/nginx/html; 
    charset utf-8; 

    location/{ 
     try_files $uri /index.html; 
    } 
} 

這給你基礎上，或許是30 MB一個微小的圖像您的應用程序的大小而不是250 MB +的所有工具和依賴關係。

Answer 2

我假設內置的網絡服務器需要一個不同的主機。您可以嘗試使用「ng serve -host 0.0.0.0」而不是npm-start命令。 對於生產用途，我建議採取不同的方法，但是：我會使用nginx（或任何其他）生產Web服務器來爲角度應用程序提供服務，並構建僅包含最終應用程序交付的映像。 如果你想使用docker作爲構建容器，我會分開這些職責並考慮docker多階段構建。 舉例碼頭工人，多級建立

FROM trion/ng-cli:latest AS ngcli 
WORKDIR /app 
COPY . .       
RUN npm install 
RUN ng build --prod --aot --progress=false 

FROM nginx:alpine AS app   
ENV PORT=8080 
EXPOSE 8080 
COPY --from=ngcli dist /usr/share/nginx/html/ 
COPY nginx/default.conf /etc/nginx/conf.d/default.conf.template 
RUN chown -R nginx /etc/nginx 

CMD ["/bin/sh","-c",\ 
"cp /etc/nginx/conf.d/default.conf.template \ 
/etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"] 

nginx的配置（從nginx的/ default.conf）可能看起來像這樣

server { 
    listen 8080; 

    location/{ 
    root /usr/share/nginx/html; 
    index index.html index.htm; 
    try_files $uri$args $uri$args/ $uri $uri/ /index.html =404; 
    } 
} 

所以，你得到兩個不同的容器：一個剛剛建立的應用程序，一個只是爲了提供應用程序。