Github 自动化部署到腾讯云服务器

1.准备工作

新建仓库

Github 自动化部署到腾讯云服务器_第1张图片

新建项目

Github 自动化部署到腾讯云服务器_第2张图片

推送到远程仓库

Github 自动化部署到腾讯云服务器_第3张图片

2.配置仓库密钥

点击 Settings -> Sectets and variables -> Actions -> New repository sectet

Github 自动化部署到腾讯云服务器_第4张图片

依次添加以下变量
Name:SERVER_HOST / Secret:服务器公网IP
Name:SERVER_USERNAME / Secret:服务器用户名
Name:SERVER_PASSWORD / Secret:服务器密码
Name:SERVER_PORT / Secret:服务器端口

Github 自动化部署到腾讯云服务器_第5张图片

Github 自动化部署到腾讯云服务器_第6张图片

3.配置 Actions 工作流

点击 Actions -> set up a workflow yourself

Github 自动化部署到腾讯云服务器_第7张图片

新建的 main.yml 文件名可以自定义,例:ci.yml

Github 自动化部署到腾讯云服务器_第8张图片

将以下配置填充到 ci.yml,部署服务器 - 更多配置项请参考:scp-action

name: Build and Deploy
# 监听 master 分支上的 push 事件
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    # 构建环境使用 ubuntu
    runs-on: ubuntu-latest
    steps:
      # 官方action, 将代码拉取到虚拟机
      - name: Checkout
        uses: actions/checkout@v3
        with:
          persist-credentials: false

      # 安装node.js
      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "18.18.2"

      # 下载依赖、打包项目
      - name: Install and Build
        run: |
          yarn install
          yarn build

      # 部署到服务器
      - name: Upload to Deploy Server
        uses: appleboy/scp-action@master
        with:
          # 服务器域名
          host: ${{ secrets.SERVER_HOST }}
          # 服务器用户名
          username: ${{ secrets.SERVER_USERNAME }}
          # 服务器密码
          password: ${{ secrets.SERVER_PASSWORD }}
          # 服务器端口
          port: ${{ secrets.SERVER_PORT }}
          # 指定上传的文件目录(项目配置的打包目录名称)
          source: './dist/*'
          # 指定上传服务器目录
          target: '/var/www/movie'
          # 解压时覆盖现有文件
          overwrite: true
          # 删除指定数量的前导路径元素
          strip_components: 1

注意:
branches:根据自己仓库分支名进行修改,如 main
node-version:根据项目支持的 node 版本进行修改
source:根据项目打包目录名称进行修改

Github 自动化部署到腾讯云服务器_第9张图片

点击右上角 Commit Changes…,提交至仓库

Github 自动化部署到腾讯云服务器_第10张图片

仓库根目录下会生成一个 .github/workflows 文件夹

Github 自动化部署到腾讯云服务器_第11张图片

4.查看 Actions 工作流

点击 Actions 进入工作流页面

Github 自动化部署到腾讯云服务器_第12张图片

Github 自动化部署到腾讯云服务器_第13张图片

点击 Create ci.yml,可查看各个步骤的执行情况

Github 自动化部署到腾讯云服务器_第14张图片

5.查看服务器文件

成功推送到指定的服务器文件夹

Github 自动化部署到腾讯云服务器_第15张图片

访问页面

Github 自动化部署到腾讯云服务器_第16张图片

6.自动化部署

更新一些内容,并提交代码

Github 自动化部署到腾讯云服务器_第17张图片

等待工作流运行完成

Github 自动化部署到腾讯云服务器_第18张图片

服务器上文件更新成功

Github 自动化部署到腾讯云服务器_第19张图片

再次访问页面,页面自动更新了

Github 自动化部署到腾讯云服务器_第20张图片

如果本篇文章对你有帮助的话,很高兴能够帮助上你。

当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。

你可能感兴趣的:(vue,Git,github,自动化,腾讯云)