CircleCI 前端自动部署

CircleCI 前端自动部署
强烈推介IDEA2021.1.3破解激活,IntelliJ IDEA 注册码,2021.1.3IDEA 激活码  

大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说CircleCI 前端自动部署,希望能够帮助大家进步!!!

概述

现在很多前端库都用到了 CircleCI 进行自动部署,比如VueReact,作为一个前端我觉得还是有必要实操一下 CircleCI 的,总体来说还是挺简单的,我把过程和体会记录下来,供以后开发时参考,相信对其他人也有用。

步骤

1.首先登陆 circleci,直接用 github 账号登录即可。登陆后点击右上角的 go to app。
2.进入网页版 app 之后,我们能看到一个 dashboard,然后点击左边导航栏的 add project。
3.然后选择需要自动部署的项目,比如我就是 play-jest 这个项目,点击 Set Up Project。
4.接着会让我们选 Operating System 和 Language,我们肯定选择 Linux 和 Node。
5.选好之后下面会告诉你接下来要怎么做,比如在项目里面创建一个.circleci文件夹,并在文件夹里面创建一个config.yml文件
6.然后可以复制官方给的config.yml文件模板,这里我稍微做一下改动,就是把 docker 的 circleci/node:7.10 改成 circleci/node:latest,使用最新的 node 版本。并上传到github。
7.最后点击 Start Building 就大功告成了。

为什么需要自动部署

除非满足下面二个条件之一,否则使用circleci自动部署完全没用:

  1. 需要在每次提交代码之后自动运行测试文件。
  2. 需要在每次提交代码之后自动生成部署。(比如自动生成生产环境代码,自动部署nginx等)

我记得之前使用 Hexo 博客的时候,每次提交 markdown 文件都需要重新构建一遍,非常麻烦,所以最后才转去用 React 写博客了。现在有了 CircleCI 自动部署,就没这么麻烦了。

或者在 github 上面搭建静态博客,每次提交代码之后就可以用 CircleCI 自动部署到 gh-page 分支,真的很方便。

codecov

使用 CI 工具的时候顺便使用 codecov 上传覆盖率报告是最好不过的了。方法也很简单,只需要安装 codecov 这个库,然后在运行的代码后面加上 codecov 即可。比如说我,就在 package.json 里面使用如下的命令:

"test:coverage": "vue-cli-service test:unit --coverage --verbose && codecov"

转载于:https://www.cnblogs.com/yangzhou33/p/11440979.html

本文来源weixin_30595035,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/29357

发表评论