时间戳

首页 > 解决方案 > 如何在 docker 中为 Angular 应用程序公开端口

angular - 如何在 docker 中为 Angular 应用程序公开端口

问题描述

我想启动一个 docker 图像，然后进入浏览器，角度应用程序应该可以开箱即用。

这是我的码头文件：

FROM node_net_angular
WORKDIR /source

COPY . .

EXPOSE 4200

RUN npm install

ENTRYPOINT ["ng", "serve"]

我愿意

docker build -t test01 .

一切都正确构建。现在我做

docker run  test01

控制台显示我打开 localhost:4200，但这没有显示任何内容。

有步骤我忘记了吗？

谢谢

编辑：

我可以直接进入文件夹，输入 ng serve ，一切正常。我将所有内容直接复制到我的 docker 映像中。运行 ng serve 也不会产生任何错误。

我试着跑步

docker run -p 4200:4200 test01

但这也没有显示网站

编辑：我发现了问题。问题是入口点。如果你这样做

CMD ng serve --host 0.0.0.0

它工作正常

标签： angulardocker

解决方案

您不应该ng serve在生产 Docker 容器中使用，因为它调用开发 HTTP 服务器，根本不安全，只是为了在本地测试应用程序。这就是该命令ng serve --prod触发以下警告的原因：

**************************************************************************************** 
This is a simple server for use in testing or debugging Angular applications locally. It hasn't been reviewed for security issues.

DON'T USE IT FOR PRODUCTION!
****************************************************************************************

我会给你一个用 Nginx HTTP 服务器（两个最广泛使用的服务器之一）包装 Angular 应用程序的 Dockerfile 示例：

FROM node:10.13.0-stretch as build-stage
WORKDIR /app
COPY package*.json /app/
RUN npm install
RUN npm install -g --unsafe-perm @angular/cli@latest
COPY ./ /app/
ARG configuration=production
RUN ng build --prod --build-optimizer=true --aot=true --output-hashing=all --extract-css=true --named-chunks=false --vendor-chunk=true

FROM nginx:1.14.1

# Add application files
COPY --from=build-stage /app/dist/name-of-your-app/ /var/www/html
COPY --from=build-stage /app/nginx/nginx.conf /etc/nginx/nginx.conf 
COPY --from=build-stage /app/nginx/site.conf /etc/nginx/conf.d/default.conf 

RUN touch /var/run/nginx.pid && \
    chown -R www-data: /etc/nginx/ && \
    chown -R www-data: /var/run/nginx.pid && \
    chown -R www-data: /var/cache/nginx && \
    chown -R www-data: /var/www/html

USER www-data

#Expose the port
EXPOSE 8080

STOPSIGNAL SIGTERM

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

这将创建两个容器，第一个安装 CLI 并构建应用程序，第二个将文件从“构建容器”复制到由 Nginx HTTP 服务器提供服务的文件夹，然后第一个容器被销毁。

这假设您有适当的nginx.conf并且site.conf在一个nginx包含您的证书配置的文件夹中。您还可以使用 Apache 作为 HTTP 服务器。

推荐阅读