个人网站的部署
相信很多前端兄弟都买过服务器,并且把自己的个人项目部署到服务器上,就比如我最近在搞个人的博客网站,我用的是腾讯云的服务器,前端用的是vuepress去进行当做博客的框架
但是我每次部署到服务器都要分为几步:
- 提交代码
- 本地打包,并压缩成zip
- 登录服务器宝塔,上传zip
- 解压到指定目录
这样才能在网站上看到我部署后的成果
图片
能否实现自动化
我需要手动做这么多事情?那我能不能用某些方式,做到自动化呢?比如:
- 我只需要做:提交代码
- 自动化:打包、zip、上传、解压
也就是我只需要提交代码,剩下的事情自动化都帮我去自动完成了,如果了解过 CI/CD 的朋友就知道,其实现在市场上提供了很多很多的自动化部署工具,比如:
- github actions
- gitlab ci
- jenkins
由于后两个都是公司项目里用的多,至于我们自己个人项目,我们用github actions比较方便一些,也很简单~所以我今天就教教大家怎么使用github actions自动化部署自己的个人项目吧!
开搞
前置知识
我们刚刚说了:
- 我只需要做:提交代码
- 自动化:打包、zip、上传、解压
图片
那要怎么在github中去执行 打包、zip、上传、解压 呢?我们需要使用到 workflows
github token
貌似现在终端中github操作使用token去操作会更加方便?我们可以先去github申请一个token,以后做事也方便~
图片
接着进去到开发者设置,直至找到创建token的按钮~
图片
图片
这两个记得勾起来哦~不然后面搞不了github actions滴
图片
workflows & job & step
我们需要在项目中新建.github文件夹,然后创建workflows文件夹,这个workflows文件夹里放的就是你要执行的一些命令,这些命令就包含 打包、zip、上传、解压 ~
当我们把这些东西提交到 github后, github会去识别.github中的workflows中的这些yml,并去执行它们(可以多个yml文件)
图片
我们可以在ci.yml中先写一些测试的脚本,我们可以认识几个关键字:
- job:可以理解为任务
- step:可以理解为一个任务中的一些步骤
- run:跑命令,执行
name: CI
on:
# 代码push的时候触发
push:
# main分支的时候触发
branches: main
jobs:
# 定义一个job,名字为CI
CI:
# 使用github提供给我们的机器去跑
runs-on: ubuntu-latest
# 步骤
steps:
# 步骤名为test
- name: test
# 打印哈哈
run: echo 哈哈哈
接着我们提交代码到github上,我们可以看到,在Actions中多了一个任务,名字是你的commit msg
图片
我们可以点进去看看这个任务的详情,我们可以看到它执行了我们写的那些命令~
图片
准备一些服务器资料
其实你可以把github actions中跑任务的地方想成是一个终端,我们想想平时终端ssh登录你的服务器,需要用到什么东西:
- 服务器的IP
- 用户名
- 密码
密码又分成自己设置的密码,或者秘钥,而在github actions我们需要使用秘钥去登录~那我们要怎么获取这个秘钥呢?很简单,我是腾讯云,我们需要先进入腾讯云,进入秘钥,点击 创建秘钥
图片
一定要注意!!!!!秘钥的地域,一定要选择跟你服务器地域一样的才行!!!
图片
图片
创建完后,你会获取到一个秘钥,现在就可以拿这个秘钥去免密登录了~
图片
但是我们要怎么把这个秘钥复制出来呢?我这边是选择了去宝塔上复制的,怎么打开宝塔面板呢?我们可以先点击远程登录
图片
接着登录后,在终端输入/etc/init.d/bt default
图片
复制宝塔的外网链接,打开,并登录~进入之后点击 SSH安全管理
图片
把这个秘钥给复制下来~之后的github actions免密登录服务器需要用到这个
图片
接着回到github,我们需要把这三个变量设置进github的 action中,这样我们在跑github actions时才能获取到这三个变量
- D_HOST:写上服务器ip
- D_USER:写上登录用户名
- D_PASS:写上刚刚复制的秘钥
图片
ci.yml
接着我们就可以完善ci.yml了,我们可以使用一些github actions提供给我们的工具,去完成一些操作,比如:
- actions/checkout@v2:用来拉取最新代码
- actions/setup-node@v3:用来安装node
- actions/cache@v3:用来缓存node_moduls
- easingthemes/ssh-deploy@v2.0.7:用来把产物部署到服务器
name: CI
on:
# 代码push的时候触发
push:
# main分支的时候触发
branches: main
jobs:
# 定义一个job,名字为CI
CI:
# 使用github提供给我们的机器去跑
runs-on: ubuntu-latest
# 步骤
steps:
# 拉取最新的代码
- name: Checkout repository
uses: actions/checkout@v2
# 安装node环境
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: "16.x"
# 为node_modules设置缓存
- name: Cache
# 缓存命中结果会存储在steps.[id].outputs.cache-hit里,该变量在继后的step中可读
id: cache-dependencies
uses: actions/cache@v3
with:
# 缓存文件目录的路径
path: |
**/node_modules
key: ${{runner.OS}}
# 安装依赖
- name: Installing Dependencies
# 如果命中缓存,就不需要安装依赖,使用缓存即可
if: steps.cache-dependencies.outputs.cache-hit != 'true'
run: npm install
# 打包
- name: Build
run: |
npm run docs:build
zip -r vuepress ./vuepress/**
# 产物上传服务器
- name: Upload to Deploy Server
uses: easingthemes/ssh-deploy@v2.0.7
env:
# 免密登录的秘钥
SSH_PRIVATE_KEY: ${{ secrets.D_PASS }}
# 服务器登录用户名
REMOTE_USER: ${{ secrets.D_USER }}
# 服务器的公网IP
REMOTE_HOST: ${{ secrets.D_HOST }}
# 你打包后产物的文件夹
SOURCE: "vuepress/"
# 先清空目标目录
ARGS: "-avzr --delete"
# 上传到服务器目标目录
TARGET: "/www/vuepress"
接着我们修改一下代码,我给这个加了个 “啊”
图片
提交代码,查看Actions中的任务,发现已经部署完成了
图片
验证部署成功,我看看到线上的博客已经拥有了这个改动~