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 # 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 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"
访问容器中的应用
访问 http://localhost:5200 ，即可访问到容器中部署的应用
more
项目源代码： https://github.com/weihanli/weihanli.github.io
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
使用 Angular RouteReuseStrategy 缓存（路由）组件的实例代码
分享Angular http interceptors 拦截器使用(推荐)
网友评论