[TOC] # 前言 当前大部分持续集成（CI）和持续部署的方案大多是针对后台或者app的，随着前端工程化的不断推进与演变，感觉有必要对前端工程的持续集成（CI）和持续部署做一下梳理。 # 持续集成 ## 持续集成是什么？ http://www.ruanyifeng.com/blog/2015/09/continuous-integration.html 【开源项目利器】利用 Travis 持续集成与 Codecov 测试覆盖率构建自动化测试环境，提升 Github 项目逼格。 ## [Travis 与 Codecov 入门](https://hjptriplebee.github.io/Travis%E4%B8%8ECodecov%E5%85%A5%E9%97%A8.html/) 代码合并进主干以后，就可以进行自动构建和发布了。 网上有很多 PaaS 平台，提供持续集成服务。 Travis CI 就是其中最著名的一个，它可以根据你提供的脚本，自动完成构建和发布。 ## 持续集成服务平台 https://buddy.works/ Appveyor [https://codeship.com/pricing](https://codeship.com/pricing) [circleci](https://circleci.com/) [travis](https://www.travis-ci.org/) [fow.ci](https://flow.ci/)国内首套开源持续集成 (CI) 解决方案 ## 练习 按照《[操作说明](https://github.com/ruanyf/jstraining/blob/master/demos/README.md#travis-ci)》，完成练习。 > http://www.liaoxuefeng.com/article/0014631488240837e3633d3d180476cb684ba7c10fda6f6000 ## 配置 Github Action 如果不熟悉 Github Action 的话，可以先看看[Github Action 文档](https://link.juejin.cn/?target=https%3A%2F%2Fdocs.github.com%2Fen%2Factions "https://docs.github.com/en/actions")。 总之 Github Action 可以帮助你自动化的做一些事情, 比如每次 push 代码时自动进行代码检查，或者每次打 tag 时，自动将代码发布到 npm 仓库去，并且部署文档。 在根目录下新建 `.github/workflows/dry.yml` 文件，内容如下: ```yaml name: dry on: push: tags: - '*' # Push events to every tag not containing / pull_request: branches: - main # 或者手动触发 workflow_dispatch: # 设置手动触发，参考文档 https://github.blog/changelog/2020-07-06-github-actions-manual-triggers-with-workflow_dispatch/ jobs: build: runs-on: ubuntu-18.04 steps: - uses: actions/checkout@v2 # 将我们提交的代码 checkout (拷贝) 一份出来 with: persist-credentials: false # otherwise, the token used is the GITHUB_TOKEN, instead of your personal token fetch-depth: 0 # otherwise, you will failed to push refs to dest repo - uses: actions/setup-node@v1 # 会建立 node 环境，便于我们执行 node 脚本 - uses: actions/cache@v2 with: path: ~/.npm key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} restore-keys: | ${{ runner.os }}-node- - name: check code # 检查代码 run: | npm install npm run lint npm run test - run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc - name: publish # 发布 npm 包 if: ${{contains(github.ref, 'refs/tags/')}} # 如果有新 tag run: | npm run build npm run build:types npm run docs:build npm publish --access public - name: deploy # 发布文档 if: ${{contains(github.ref, 'refs/tags/')}} uses: JamesIves/github-pages-deploy-action@4.1.1 with: branch: gh-pages # The branch the action should deploy to. folder: docs/.vuepress/dist # The folder the action should deploy. ``` 以上的配置主要是让 Github Action 帮我们跑 lint 和 test，并且当我们**推了 tag 时**( 比如`git push origin --tags` ，意味着我们想要发布新版本)，那么就再帮我们发包到 npm 上，并且部署下最新的文档。 **注意**：配置文件中使用到了`secrets.NPM_TOKEN`这样一个变量，这是一个 npm 网站的 token 值，有了这个 token 就可以进行发布了。你可以在本地执行`npm login`，登录成功后通过`cat ~/.npmrc` 查看，然后将 token 值设置到 Github 仓库中。 ## 使用AppVeyor做持续集成 [利用 AppVeyor 实现 GitHub 托管项目的自动化集成](http://www.gulu-dev.com/post/2015-05-01-appveyor-ci) ## jenkins + Git 搭建持续集成环境 # 持续部署 # GitOps [GitOps | GitOps is Continuous Deployment for cloud native applications](https://www.gitops.tech/) ## Netlify 目前传统的软件项目, 可以通过[Travis CI](https://travis-ci.org/)等等工具来进行编译, 测试等等持续集成任务, 但是对于一个静态网站来说, 其最主要的产物是 HTML 文件. 而主流的持续集成工具都不支持对静态的页面进行构建的预览. 这篇文章主要介绍了 [Netlify](https://www.netlify.com/), 一个可以用来做静态网站的持续集成与持续部署的工具. 通过[Netlify](https://www.netlify.com/), 用户可以非常简单地为其静态网站项目引入持续集成, 并且允许其他成员对静态网站进行 UI 层面的 review. [持续集成是什么？](http://www.ruanyifeng.com/blog/2015/09/continuous-integration.html) ## WebHooks [使用Github的WebHooks实现生产环境代码自动更新](https://qq52o.me/2482.html) ## 部署服务 [Rollbar](https://rollbar.com/pricing/) [Azure](https://azure.microsoft.com/en-us/) [amazon web services](https://aws.amazon.com) [Netlify](https://www.netlify.com/) [ngrok](https://ngrok.com/) [Vercel](https://vercel.com/pricing) [Heroku](https://www.heroku.com/) [如何使用 Now.sh来免费部署你的项目？](http://object.ws/2017/09/10/nowsh-note/) [How to Deploy Node Applications: Heroku vs Now.sh](https://www.sitepoint.com/how-to-deploy-node-applications-heroku-vs-now-sh/) [Surge](https://surge.sh/pricing) [Snyk](https://snyk.io/) # 持续交付 # 其他服务 ## 代码分析 https://deepscan.io/pricing/ 检查 JavaScript 代码的最好方法。高级的静态分析，没有干扰。 ## 应用错误报告 [Sentry](https://sentry.io/welcome/) ## 用户数据分析 ## 应用埋点 # Refs [前端持续集成解决方案](https://blog.csdn.net/zhangzq86/article/details/55657368) [如何实现前端工程的持续集成与持续部署？](https://www.wengbi.com/thread_50177_1.html)