如何在 Docker 中托管 angular 应用程序？

Question

我正在寻找正确的 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;"]

Answer 1

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

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

EXPOSE 4200

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

它的转发端口 80 到 4200，本质上是映射你的 angular 应用程序。

---

2. 更新您的配置文件： 经过消毒的 docker 配置的良好参考样本。 您应该将您的图像与此进行比较，以使用 yarn 更新您的安装，并复制到正确的 output 目录。 等等

---

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

---

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

   docker run -p 4200:4200 test:latest