angular - 如何在 Linux 上使用 Docker 和 Azure Web App 部署 Angular 4 应用程序

Question

我正在尝试遵循此文档来使用 docker 部署我的 Angular 4 Web 应用程序。

Azure Web App on Linux Documentation

下面是我的 Docker 文件当前的样子:

# 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"]

我的 package.json 目前在脚本下有这个 “开始”:“ng服务-H 0.0.0.0”，

我能够在 Linux 上创建 Web 应用程序并推送我的图像，但在尝试浏览 Web 应用程序时收到以下信息:

无效的主机 header

我的 docker 文件中是否缺少某些内容？我现在有点陷入困境，因此我们将不胜感激。

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/

处理 Angular 中的 url 的基本 nginxconf 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 以上。