如何在 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

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

First, in your Docker config you are missing the Expose option/line such as:

EXPOSE 4200

将其插入到 docker 文件中的最后一个运行命令之前，以允许容器中的端口（例如 port 4200），以便来自 compose 的映射有效（80： 4200)

其转发端口80到4200，.

更新您的配置文件：一个很好的参考 sample of sanitized docker 配置。您应该将您的图像与此进行比较，以使用 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

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

How to host angular application in Docker?

nginx

docker

devops

angular