使用GitHub Actions 自动化打包部署前端到腾讯云服务器

一、前端配置：

1. 在GitHub上进入选择的库，点击Actions下创建一个配置文件自动生成main.yml文件

2. main.yml 配置文件内容

# This is a basic workflow to help you get started with Actions

name: browser-home-page

# Controls when the workflow will run
on:
  # Triggers the workflow on push or pull request events but only for the master branch
  push:
    branches: [ master ]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the 

#关键配置
job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2
      - name: install node.js
        uses: actions/setup-node@v3.0.0 
        with: 
              node-version: "14.X"
      - name: install deps
        run: npm install
      - name: build app
        run: npm run build
      - name: copy file via ssh key
        uses: appleboy/scp-action@master
        with:
	#需要部署的文件地址
            source: 'dist/*'
    # SSH address  服务器地址
            host: ${{ secrets.REMOTE_HOST }}
    # Remote dir path  服务器下部署文件存放路径
            target: ${{ secrets.REMOTE_PATH }}
    # SSH Port  服务器端口
            port: 22
    # SSH User name   用户名
            username: ${{ secrets.USER_NAME }}
    # SSH User password  用户密码
          #  password: ${{ secrets.PASSWORD }}
    # key  密匙
            key: ${{ secrets.SSH_KEY }}

 3.由于在配置中直接写配置内容会泄露信息，别人在你的配置文件中可以之间看到信息，所以我们可以定义全局变量。

定义变量：ettings->Actions->New repository secret

图1

 图2

 图3

此处是已经定义好的变量；

其中SSH_KEY密匙获取方法：在宝塔面板选择：安全->SSH安全管理->密匙管理

4.完成配置后点击start commit   （注意：password 和 key:只能是二选一；key是服务器SSH的密钥） 

二 、服务器配置
1.使用宝塔面板在：安全->启用SSH（配置SSH端口）；在SSH安全管理中打开SSH密码登录或者SSH密钥登录

三、测试

本地提交代码到远程GitHub库；在Actions下查看wrokflow日志是否成功