2020年02月19日阅读 41

使用Github Action 部署ReactJs项目

本文以部署一个ReactJS项目云服务器为例,记录一下如何使用Github Action 对项目持续集成&部署

1. 期望达到的结果

在使用github action 之前, 部署一个项目需要做的

开发完成之后本地进行 build&test
连接服务器
把生成的静态文件上传到服务端(若你使用了nginx,文件上传后刷新网页就能看到的页面了)

我们可以利用github action帮我们完成这些流程,不再手动进行项目部署。还可以对不同分支进行区分,分别部署到生产环境和测试环境 。

2. 对于非React项目

对于其他项目(比如我的项目是使用umi构建的),流程是一致的,有区别的只是action中的build流程。稍微复杂一些的是上传文件的部分,这里我已经写好了利用sftp上传文件的action,你甚至可以利用此action部署srpingboot项目.

3. 实现

1. 在github上新建一个repo ，命名为React-Deploy

2. 使用create-react-app在本地新建一个react项目

 npx create-react-app react-deploy
复制代码

3. 编写一个action ,使用action帮我们完成build

在项目路径下新建.github文件夹,然后在.github下新建workflows文件夹,在此文件夹下新建main.yml。 main.yml就是一个action,我们利用它实现在代码推送触发项目构建

4. 以下为main.yml内容 ,在仓库推送的时候执行build

name: Continuous Integration #action名称
on: [push] #在推送的时候运行此action

jobs:
  build_job:
    runs-on: ubuntu-latest  #运行环境
    name: build
    steps:
      # check out the repository
      - name: Checkout    
        uses: actions/checkout@v2    #这里使用了github官方提供的action,checkout项目到虚拟机上

      - name: Install Dependencies
        run: yarn
      - name: Build
        run: yarn build复制代码

5. 现在已经完成action的编写,我们为项目添加remote，提交并推送到github上。在github上打开仓库,我们可以看到github已经执行了第一个action

6. build之后我们需要把build好的文件上传到服务端，这里使用sftp,我们需要一些访问服务器的基本信息比如 ssh_private_key ,为了安全,不能直接把key写到action中,我们在settings/secrets添加信息。添加完成后,你可以在action中引用。

7. 第5步我们已经通过build得到了静态文件 ,我们需要做的就是把这些文件上传到我们的云服务器上的部署目录下,例/var/www/react-app ,这里我已经写好了上传文件的action。然后对main.yml 进行修改，在build完成后使用另一个action 进行文件上传wlixcc/SFTP-Deploy-Action

name: Continuous Deploy #action名称
on: [push] #在推送的时候运行此action

jobs:
  deploy_job:
    runs-on: ubuntu-latest  #运行环境
    name: build
    steps:
      # check out the repository
      - name: Checkout    
        uses: actions/checkout@v2    #这里使用了github官方提供的action,checkout项目到虚拟机上

      - name: Install Dependencies
        run: yarn
      - name: Build
        run: yarn build

      # 利用action把build好的文件上传到服务器/var/www/react-app路径下,需要确认此目录已在服务端创建
      - name: deploy file to server
        uses: wlixcc/SFTP-Deploy-Action@v1.0 
        with:  
          username: 'root'   #ssh user name
          server: '${{ secrets.SERVER_IP }}' #引用之前创建好的secret
          ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }} #引用之前创建好的secret
          local_path: './build/*'  # 对应我们项目build的文件夹路径
          remote_path: '/var/www/react-app'复制代码

至此,我们已经完成了一个项目的完整部署流程

整个流程非常简单，你可以组合使用各种不同的action完成自己的部署流程,也可以编写自己的action

4. 不同分支部署到不同环境(可忽略)

name: continuous deployment
on: 
  push:
    branches:
      - master #当master分支推送的时候,我们部署到生产服务器
      - test #当test分支推送的时候,我们部署到测试服务器

jobs:
  deploy_job:
    runs-on: ubuntu-latest
    
    name: build&deploy
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Install Dependencies #install
        run: yarn
     
      - name: build  #build
        run:  yarn build

      - name: deploy file to test server
        if: github.ref == 'refs/heads/test' #对分支进行检测
        uses: wlixcc/SFTP-Deploy-Action@v1.0
        with:
          username: 'username'
          server: '${{ secrets.TEST_SERVER_IP }}' #测试服务器地址
          ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }}
          local_path: './build/*'
          remote_path: '/var/www/app' #测试服务器部署路径
      
      - name: deploy file to prod server
        if: github.ref == 'refs/heads/master' #对分支进行检测
        uses: wlixcc/SFTP-Deploy-Action@v1.0
        with:
          username: 'username'
          server: '${{ secrets.SERVER_IP }}' #正式服务器地址
          ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }}
          local_path: './build/*'
          remote_path: '/var/www/app' #服务器部署路径复制代码

这里可以看到只执行了test流程

5. 项目链接

1. React-Deploy

2. SFTP-Deploy-Action