最近打算部署一个前端应用(线上文档)，参考了下发现结合Docker非常方便，你不需要对nginx、linux很熟悉就可以很方便的将一个前端应用容器化。借助DaoCloud实现一个简单的CI/CD流程。
环境准备
在开始这个应用之前，我们需要准备相应的环境。
- node环境
- 准备一个服务器
- github账号
创建一个项目
我们选用vuepress帮助我们搭建一个站点。
- 我们在github创建一个repo。比如my-programming-dock。
- 参考vuepress快速入门搭建对应配置
接下来就是创建Dockerfile配置文件、并配置。
# 选择node镜像
FROM node:12.6.0-buster-slim
# 安装nginx
RUN apt-get update \
&& apt-get install -y nginx
# 指定工作目录
WORKDIR /app
# 把当前所有目录下文件拷贝到工作目录
COPY . /app/
# 运行时容器提供服务端口
EXPOSE 80
# 1. 安装依赖
# 2. 构建打包
# 3. 把dist目录下文件拷贝到 nginx目录下
# 4. 删除工作目录下的文件 减少镜像体积
RUN npm install --registry=https://registry.npm.taobao.org \
&& npm run docs:build \
&& cp -r docs/.vuepress/dist/* /var/www/html \
&& rm -rf /app
# 启动nginx
CMD ["nginx", "-g", "daemon off;"]
- 上传到github。
配置DaoCloud
DaoCloud成立于2014年末，是一家容器云平台服务商，围绕Docker技术提供各类云计算平台服务，包括Docker Hub镜像服务，Docker原生应用运维和管理平台，开源技术社区活动等。
我们的整个CI、CD流程就是借助DaoCloud完成。
- 通过github登陆你的DaoCloud。
- 去创建你的项目
- 每个项目都有一个流水线，可以自行根据需要配置。
前期我们没有主机的话可以先不配置发布阶段，后面会讲到。另外我们需要注意流程编辑有一个选择需要注意下：触发条件。 分支即代码分支，标签即git tag。
- 我们可以手动触发构建一次。
- 在集群管理里面添加我们的主机。
这里你只需要在你的服务器安装Docker、然后执行对应安装主机监控程序的shell即可。 s
- 我们可以选择手动部署一次
- 部署成功
访问http://182.61.39.64:32772/成功。
自动化发布
我们现在整个流程已经跑通，但是还不够自动化。
我们理想中期望的是一键自动部署：所以我们选择通过打tag来作为构建的触发条件。
- 配置CI/CD流程，在发布流程那里添加一个发布流程。
同时所有流程的触发条件改为标签。
- 编写node脚本自动打tag。
选择完毕后自带打tag推github，触发CI/CD流程！。
ps: 代码仓库地址。commit测试时候踩了些坑有点不干净，后续merge下。
参考
欢迎关注我的公众号 xyz编程日记
