[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)