• 0

  • 484

Docker小试牛刀:前端应用容器化

2星期前

最近打算部署一个前端应用(线上文档),参考了下发现结合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下。

参考

免责声明:文章版权归原作者所有,其内容与观点不代表Unitimes立场,亦不构成任何投资意见或建议。

程序员

484

相关文章推荐

未登录头像

暂无评论