详解angular应用容器化部署

　　Intro

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

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

　　编写 dockerfile

　　完整的 dockerfile 如下：

　　 FROM node # set working directory WORKDIR /app # 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 #

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

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

　　打包 docker 镜像

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

　　 docker build -t weihanli/homepage .

　　启动容器

　　docker run

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

　　 docker run -p:5200:80 --rm --name homepage-demo weihanli/homepage

　　docker compose

　　通过 docker-compose.yml 启动容器，启动命令： docker-compose up

　　更多 compose 信息参考

　　docker-compose.yml 文件如下：

　　 version: 3 services: web: image: weihanli/homepage container_name: weihanli-homepage-demo ports: - 5200:80

　　访问容器中的应用

　　访问 ，即可访问到容器中部署的应用

　　More

　　项目源代码：

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