如何在docker中公开角度应用程序的端口

时间:2018-08-27 08:03:08

标签: angular docker

我要启动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

工作正常

1 个答案:

答案 0 :(得分:0)

您不应该在生产Docker容器中使用ng serve,因为它会调用开发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!
****************************************************************************************

我将为您提供一个Dockerfile示例,该示例文件将Angular应用程序与Nginx HTTP服务器(两个使用最广泛的服务器之一)包装在一起:

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.confnginx。 您还可以将Apache用作HTTP服务器。