Intro
我自己有做一个个人主页, 虽然效果不怎么样 (不懂设计的典型程序猿...), 但是记录了我对于前端框架及工具的一些实践,
从开始只有一个 angularjs 制作的页面到后面加入 less 动态写 CSS, gulp 自动化的将 less 文件编译成 css 文件以及自动化的压缩 js 和 css, 到后面加入的基于 vue 和 angular 实现, 主要维护的是基于 angular 的, 目前 angular 的个人主页已经支持 PWA(Progressive web Application), 前几天添加了 docker 部署的支持, 记录一篇文章记录一下.
个人主页体验地址: https://weihanli.xyz/
编写 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
- # 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 镜像, 详细命令使用参考 https://docs.docker.com/engine/reference/commandline/build/
docker build -t weihanli/homepage .
启动容器
docker run
通过 docker run 命令启动一个容器, 部署打包好的镜像, 详细命令使用参考 https://docs.docker.com/engine/reference/commandline/run/
- docker run -p:5200:80 --rm --name homepage-demo weihanli/homepage
- docker compose
通过 docker-compose.yml 启动容器, 启动命令: docker-compose up
更多 compose 信息参考 https://docs.docker.com/compose/compose-file
docker-compose.yml 文件如下:
- version: "3"
- services:
- web:
- image: "weihanli/homepage"
- container_name: "weihanli-homepage-demo"
- ports:
- - "5200:80"
访问容器中的应用
访问 http://localhost:5200/ , 即可访问到容器中部署的应用
More
项目源代码: https://github.com/WeihanLi/weihanli.github.io
- Contact
- Contact me: mailto:weihanli@outlook.com
来源: https://www.cnblogs.com/weihanli/p/angular-app-containerization.html