如何在 Docker 中托管 Angular 应用程序？答案

【问题标题】：How to host angular application in Docker?如何在 Docker 中托管 Angular 应用程序？
【发布时间】：2021-01-10 03:32:36
【问题描述】：

我正在寻找正确的 docker 文件的解决方案，但是当我在浏览器上写 localhost:8080 时，我可以看到 nginx，但在浏览器上看不到默认的 angular 网站。我可以用我的 Docker 文件做什么。怎么了？


FROM node:12.8-alpine AS builder

WORKDIR /app
RUN npm install
COPY . .
RUN npm run build

# Step 2: Use build output from 'builder'
FROM nginx:stable-alpine
LABEL version="1.0"

COPY nginx.conf /etc/nginx/nginx.conf

WORKDIR /usr/share/nginx/html
COPY --from=builder . /app

CMD ["nginx", "-g", "daemon off;"]

【问题讨论】：

除了正确的 Dockerfile 之外，还需要正确运行容器。如果你想从你机器上运行的浏览器访问localhost:8080 上的服务，你需要publish that port，这是在运行时发生的事情。这不是你的 Dockerfile 中的内容。
您最后的COPY 行正在复制到Nginx 映像中的/app，而不是您在上一行中设置的WORKDIR。你的意思是让参数以相反的顺序排列，COPY --from=builder /app .？

标签： angular docker nginx devops

【解决方案1】：

我马上就看到了一些东西，比如EXPOSE

首先，在您的 Docker 配置中，您缺少 Expose 选项/行如：

EXPOSE 4200

在 docker 文件中的最后一个 RUN 命令之前将其插入，以允许容器中的端口（例如 port 4200），以便 compose 的映射有效 (80:4200)

它的转发端口80到4200，essentially mapping your angular app。

更新你的配置文件：一个好的参考sample of sanitized docker config。您应该将您的图像与此进行比较，以使用 yarn 更新您的安装，并复制到正确的输出目录。等

FROM node:13.3.0 AS compile-image
// install
RUN npm install -g yarn

WORKDIR /opt/ng
COPY .npmrc package.json yarn.lock ./
RUN yarn install

ENV PATH="./node_modules/.bin:$PATH" 

# configure your expose port
#expose the port
   EXPOSE 4200
COPY . ./
RUN ng build --prod

FROM nginx
COPY docker/nginx/default.conf /etc/nginx/conf.d/default.conf
COPY --from=compile-image /opt/ng/dist/app-name /usr/share/nginx/html

您可能需要将端口从容器转发到您的系统/主机：

docker run -p 4200:4200 test:latest

【讨论】：