试用Github Action CI/CD流程（创建一个React项目，并打包部署）

后端云

发布于 2022-03-22 12:08:44

6820

发布于 2022-03-22 12:08:44

文章被收录于专栏：后端云后端云

创建一个React项目github-action-demo

将（将backendcloud替换成你到github账户名）

"homepage": "https://backendcloud.github.io/github-actions-demo",复制代码

添加到package.json

push到github仓库。

增加github aciton CI配置文件：内容大体是在虚拟环境checkout项目,build React项目，部署静态文件到代码仓库的gh-pages分支。

hanwei@hanweideMacBook-Air github-actions-demo]$ cat .github/workflows/ci.yml 
name: GitHub Actions Build and Deploy Demo
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    concurrency: ci-${{ github.ref }} # Recommended if you intend to make multiple deployments in quick succession.
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v2

      - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
        run: |
          npm ci
          npm run build

      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@v4.2.5
        with:
          branch: gh-pages # The branch the action should deploy to.
          folder: build # The folder the action should deploy.
hanwei@hanweideMacBook-Air github-actions-demo]$language-bash复制代码

再次push代码到github代码仓库，触发github action流程，查看github action的日志（github网站保存30天）：

deploy
succeeded 17 minutes ago in 4s
Search logs
1s
Current runner version: '2.287.1'
Operating System
Virtual Environment
Virtual Environment Provisioner
GITHUB_TOKEN Permissions
Secret source: Actions
Prepare workflow directory
Prepare all required actions
Getting action download info
Download action repository 'actions/deploy-pages@v1' (SHA:479e82243a95585ebee8ab037c4bfd8e6356a47b)
0s
Run actions/deploy-pages@v1
Sending telemetry for run id 1896726019
3s
Run actions/deploy-pages@v1
Actor: github-pages[bot]
Action ID: 1896726019
Artifact URL: https://pipelines.actions.githubusercontent.com/7IW4xoAefje3iJJjmBQg228AYglZEwNoROQmK16mg2iViZ9muv/_apis/pipelines/workflows/1896726019/artifacts?api-version=6.0-preview
{"count":1,"value":[{"containerId":3420907,"size":614400,"signedContent":null,"fileContainerResourceUrl":"https://pipelines.actions.githubusercontent.com/7IW4xoAefje3iJJjmBQg228AYglZEwNoROQmK16mg2iViZ9muv/_apis/resources/Containers/3420907","type":"actions_storage","name":"github-pages","url":"https://pipelines.actions.githubusercontent.com/7IW4xoAefje3iJJjmBQg228AYglZEwNoROQmK16mg2iViZ9muv/_apis/pipelines/1/runs/2/artifacts?artifactName=github-pages","expiresOn":"2022-05-26T03:47:37.6013822Z","items":null}]}
Creating deployment with payload:
{
	"artifact_url": "https://pipelines.actions.githubusercontent.com/7IW4xoAefje3iJJjmBQg228AYglZEwNoROQmK16mg2iViZ9muv/_apis/pipelines/1/runs/2/artifacts?artifactName=github-pages&%24expand=SignedContent",
	"pages_build_version": "f018db912dfb491e86183fbc140fe14e3a256905",
	"oidc_token": "***"
}
Created deployment for f018db912dfb491e86183fbc140fe14e3a256905
{"page_url":"https://backendcloud.github.io/github-actions-demo/","status_url":"https://api.github.com/repos/backendcloud/github-actions-demo/pages/deployment/status/f018db912dfb491e86183fbc140fe14e3a256905"}

Current status: updating_pages
Reported success!

Sending telemetry for run id 1896726019
0s
Evaluate and set environment url
Evaluated environment url: https://backendcloud.github.io/github-actions-demo/
Cleaning up orphan processeslanguage-bash复制代码

CI/CD流程完成后用浏览器打开https://backendcloud.github.io/github-actions-demo/，发现React项目部署成功，显示如下：