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

news2024/11/24 12:28:20

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.自动化部署

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

在这里插入图片描述

等待工作流运行完成

在这里插入图片描述

服务器上文件更新成功

在这里插入图片描述

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

在这里插入图片描述

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1164677.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

软件测试/测试开发丨Python:易学、强大、多用途的编程语言

点此获取更多相关资料 Python 发展历史 Python 是一门高级编程语言,由 Guido van Rossum(龟叔) 在 1989 年发明,设计 Python 语言的初衷是为了创造一种介于 C 和 shell 之间,简洁方便,易学易用&#xff0…

第十三章,枚举与泛型例题

例题1 package 例题;interface SeasonInterface{//四季接口int SPRING 1, SUMMER 2, AUTUMN 3, WINTER 4; }enum SeasonEnum{//四季枚举SPRING,SUMMER,AUTUMN,WINTER }public class 例题1 {//定义方法public static void printSeason1(int season){switch (season) {case …

MAA连不上MUMU模拟器

之前一直能正常用,最近突然连接不上,最终发现是adb版本不同造成的,我系统变量的adb版本如下: MUMU自带adb版本如下: 解决办法: 把mumu的adb复制到系统变量路径下,或者把adb的系统变量删除

基于OpenHarmony的启航开发板的基础操作

文章目录 前言一、前提准备二、基础操作1.hb set命令的使用2.hb build -f 命令的使用3.Hello World 案例 前言 在物联网(IoT)领域,开发板扮演着至关重要的角色,为开发人员提供了实验和原型设计的平台。而OpenHarmony作为一个开源…

NOR Flash基本原理

目录 1. Flash Memory中存储的信息 2. Flash操作 2.1 Read操作 2.2 Program操作 2.3 Erase操作 3 电压阈值分布 4 Block Erase 4.1 Pre-Program Phase 4.2 Erase Phase 4.3 Recovery Phase 5 Erase 中断 6 注意要点 这是之前搞Flash IP时的一个学习笔记&#xff0c…

力扣 搜索旋转排序数组 二分

&#x1f468;‍&#x1f3eb; 33. 搜索旋转排序数组 class Solution {public int search(int[] nums, int target){int l 0;int r nums.length - 1;while (l < r){int m l r >> 1;//else大法&#xff0c;把无序段抛给else&#xff0c;if只处理有序段 // 需要特…

Flutter屏幕适配

文章目录 一、Flutter单位二、设备信息三、常见适配方案四、flutter_screenutil 一、Flutter单位 Flutter使用的是类似IOS中的点pt&#xff08;point&#xff09;。 iPhone6的尺寸是375x667&#xff0c;分辨率为750x1334。 iPhone6的dpr( devicePixelRatio ) 是2.0。 DPR 物…

论文 辅助笔记:t2vec train.py

1 train 1.1 加载training和validation数据 def train(args):logging.basicConfig(filenameos.path.join(args.data, "training.log"), levellogging.INFO)设置了日志的基本配置。将日志信息保存到名为 "training.log" 的文件中日志的级别被设置为 INFO&…

Vue动态树、配置请求路径、表格数据显示、实现分页、创建书本管理组件、点击菜单实现路由跳转以及系统首页配置。

目录 1. 准备工作 2. 动态树 2.1 在配置请求路径 2.2 使用动态数据构建导航菜单 2.2.1 通过接口获取数据 2.2.3 通过后台获取的数据构建菜单导航 2.2.3.1 先构建一级导航菜单 2.3 点击菜单实现路由跳转 2.3.1 创建书本管理组件 3. 系统首页配置 4. 表格数据显示 4.…

探密工业互联网网络体系:构建端到端的稳定传输

什么是工业互联网网络&#xff1f; 工业互联网网络是一种将工业设备、传感器和计算机系统连接到一起&#xff0c;以便它们可以共同工作、共享数据和实现更高效的生产和控制。这个网络体系的目标是提高工业过程的效率、可靠性和安全性。 在数字时代的今天&#xff0c;工业互联网…

无广告弹出的便签工具选择哪一款?

广告弹窗&#xff0c;是许多人在日常办公中比较反感的问题&#xff0c;打开一个软件正准备使用时&#xff0c;突然冒出一个广告弹窗&#xff0c;这会给人一种特别反感的情绪&#xff0c;尤其是在专注记录工作任务备忘的时候&#xff0c;意外冒出的广告窗口可真让人心烦。那么&a…

Apple 苹果发布 M3、M3 Pro 和 M3 Max 芯片

本心、输入输出、结果 文章目录 Apple 苹果发布 M3、M3 Pro 和 M3 Max 芯片前言M3、M3 Pro 和 M3 Max 芯片的性能相关资料图M3 Pro规格M3 Max规格弘扬爱国精神 Apple 苹果发布 M3、M3 Pro 和 M3 Max 芯片 编辑&#xff1a;简简单单 Online zuozuo 地址&#xff1a;https://blog…

若依框架中SpringSecurity的实现流程

文章目录 Spring Security概述核心原理 若依Sprint Security分析配置类分析流程分析图过滤器分析 若依登录/退出流程流程图登录退出 写在开头: 本篇博客与核桃共同完成 Spring Security 概述 Spring Security 是一个功能强大且高度可定制的身份验证和访问控制框架&#xff0c…

go微信开发sdk-简单使用_已设置图床

go微信开发sdk-简单使用 GitHub - silenceper/wechat: WeChat SDK for Go &#xff08;微信SDK&#xff1a;简单、易用&#xff09; 使用的sdk为上述的&#xff0c;这边给出快速的项目实例 git clone https://github.com/gowechat/example.git简单的项目结构 这边简单用dock…

多线程锁的升级原理是什么

在 Java 中&#xff0c;锁共有 4 种状态&#xff0c;级别从低到高依次为&#xff1a;无状态锁&#xff0c;偏向锁&#xff0c;轻量级锁和重量级锁状态&#xff0c;这几个状态会随着竞争情况逐渐升级。锁可以升级但不能降级。 多线程锁锁升级过程 如下图所示 多线程锁的升级过程…

数字孪生技术:城市交通的智能引领

城市交通问题一直是我们日常生活中的头等大事。交通拥堵、公共交通不便、环境污染等问题常常困扰着城市居民。然而&#xff0c;数字孪生技术正以令人兴奋的方式改变着城市交通的面貌&#xff0c;为城市交通带来了新的变化。 实时交通监测&#xff1a;数字孪生技术通过网络连接的…

动态规划:“以宇换宙”的优雅工艺

Those who do not remember the past are condemned to repeat it. 那些不能铭记历史的人注定要重蹈覆辙。 在动态规划——经典案例分析中我们提到了斐波那契数列的求解思路。知道动态规划的主要优点是能够在解决问题时避免重复计算&#xff0c;通过利用已经计算过的结果来加速…

Java实现Web的ashx对接ORM

之前的介绍已经实现了ORM的主体和Web的调用结构主题&#xff0c;那么这次把Web和LIS.Core的容器和ORM做对接&#xff0c;通过ashx实现的业务类测试调用ORM查询数据。 首先改造容器让传入根地址 package LIS.Core.Context;import org.w3c.dom.Document; import org.w3c.dom.El…

单例模式-懒汉式双重锁机制

正是因为担心并发问题&#xff0c;才在双重检查锁模式中的synchronized内部进行了再次判断 tnull。 在第一次判断 tnull 之后&#xff0c;当多个线程同时通过这个检查&#xff0c;其中一个线程会获得锁并创建实例。然而&#xff0c;其他线程在此期间可能会继续等待锁释放&…

ViT Vision Transformer超详细解析,网络构建,可视化,数据预处理,全流程实例教程

关于ViT的分析和教程&#xff0c;网上又虚又空的东西比较多&#xff0c;本文通过一个实例&#xff0c;将ViT全解析。 包括三部分内容&#xff0c;网络构建&#xff1b;orchview.draw_graph 将网络每一层的结构与输入输出可视化&#xff1b;数据预处理。附完整代码 网络构建 …