详解angular应用容器化部署

前端之家收集整理的这篇文章主要介绍了详解angular应用容器化部署前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Intro

我自己有做一个个人主页,虽然效果不怎么样(不懂设计的典型程序猿...),但是记录了我对于前端框架及工具的一些实践,

从开始只有一个 angularjs 制作的页面到后面加入 less 动态写css, gulp 自动化的将 less 文件编译成 css 文件以及自动化的压缩 js 和 css,到后面加入的基于 vue 和 angular 实现,主要维护的是基于 angular 的,目前 angular 的个人主页已经支持 PWA(Progressive Web Application),前几天添加了 docker 部署的支持,记录一篇文章记录一下。

编写 dockerfile

完整的 dockerfile 如下:

install and cache app dependencies

COPY . /app

install dependencies and build the angular app

RUN yarn && yarn run build

FROM Nginx:stable-alpine

copy from dist to Nginx root dir

COPY --from=builder /app/dist/weihanli /usr/share/Nginx/html

expose port 80

EXPOSE 80

set author info

LABEL maintainer="WeihanLi"

run Nginx in foreground

https://stackoverflow.com/questions/18861300/how-to-run-Nginx-within-a-docker-container-without-halting

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

整个 dockerfile 可分为两部分,第一部分是编译 angular 应用,生成最后要部署的文件

第二部分则是将生成的部分拷贝到基于 Nginx 的环境中,部署到 Nginx

打包 docker 镜像

通过 docker build 命令打包 docker 镜像,详细命令使用参考

启动容器

docker run

通过 docker run 命令启动一个容器,部署打包好的镜像,详细命令使用参考

docker compose

通过 docker-compose.yml 启动容器,启动命令: docker-compose up

更多 compose 信息参考

docker-compose.yml 文件如下:

访问容器中的应用

访问 http://localhost:5200 ,即可访问到容器中部署的应用

More

项目源代码:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/31013.html

猜你在找的JavaScript相关文章