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

12 篇文章 0 订阅

1.准备工作

新建仓库

在这里插入图片描述

新建项目

在这里插入图片描述

推送到远程仓库

在这里插入图片描述

2.配置仓库密钥

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

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

3.配置 Actions 工作流

点击 Actions -> set up a workflow yourself

在这里插入图片描述

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

在这里插入图片描述

将以下配置填充到 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:根据项目打包目录名称进行修改

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

4.查看 Actions 工作流

点击 Actions 进入工作流页面

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

5.查看服务器文件

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

在这里插入图片描述

访问页面

在这里插入图片描述

6.自动化部署

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

在这里插入图片描述

等待工作流运行完成

在这里插入图片描述

服务器上文件更新成功

在这里插入图片描述

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

在这里插入图片描述

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

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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值