最近半年没怎么写博客，今年七月毕业，八月入职秋招签的一家公司，八九月参加了一次项目迭代，第一次接触到了自动化部署，觉得这玩意真**好用，直接将项目代码merge到对应的分支上就能自动编译，打包，部署。但是它是怎么实现的呢？
在之后的一次机缘巧合下接触了docker，研究了一下docker的基本使用，在网上看了几篇博客才知道可以用docker实现自动化部署，于是决定自己尝试一下。由于公司使用的是gitlab管理项目代码的，当时觉得github也能实现类似的功能，于是就在GitHub上新建了一个仓库，然后到处乱点一通，发现了github actions这个东西，加上最近没啥事，就开始自己倒腾了，然后果真还实现了，虽然有些地方需要改进，但是这也是个不错的开始。接下来我将按照我自己探索的路程给大家介绍一下这个自动化部署，我是如何实现的。内容包括：
1.使用GitHub Actions实现Github pages的自动化部署 ,
2.使用docker 打包自己的镜像来实现本地的部署，
3.在云服务器上拉取镜像来实现云服务器的部署，
4.实现github action + docker + 腾讯云 实现自动化部署
个个部分代码相互独立，但是所用到的知识是循循渐进的（也是我自己的实现步骤） 尽量可以按照顺序观看，当然如果自己已经知道相关的知识，可以直接跳到第四步，看看我实现的方法跟大家的是否相同，如有错误请指正。
使用GitHub Actions实现Github pages的自动化部署
GitHub Actions 是什么？
针对这种是什么？为什么？什么原理的问题，网上一搜答案都是一大堆，我这里就不做太多的解释了，这里分享一篇阮一峰老师的文章：Github Action 入门，看完就能知道github action的工作原理和大致实现了，接下来说说我的理解。
首先，你需要在你的项目目录下面建一个.github目录，然后在里面再建一个workflows目录，然后再在里面建一些yml文件，github会自动去找这些yml文件然后去执行里面的代码。
代码内容解释：
例子：
name: GitHub Actions Build and Deploy Demo # 这个构建的名字，会出现在github action的actions选项中
on: # 监听"哪个分支" 的 "那个动作" 这里的意思是监听master分支的push动作
push:
branches:
- master
jobs: # 表示执行的一项或者多项任务
build-and-deploy: # job的id
runs-on: ubuntu-latest # 指所需的运行环境
steps: # job的运行步骤
- name: Checkout # 步骤名称
uses: actions/checkout@v2 # 使用那个action
with: # 定义环境变量
persist-credentials: false # 设置这个是听取GitHub上一个例子的建议，删掉也没事
- name: Install and Build
run: | # 步骤运行的命令
yarn install
yarn build
- name: Deploy
uses: JamesIves/github-pages-deploy-action@releases/v3
with:
GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # Github的token 阮一峰老师的博客里面有介绍过
BRANCH: gh-pages # 部署到那个分支
FOLDER: dist # 要进行部署的目录
关于上面介绍的每个命令的意思，阮一峰老师的博客里也有介绍过,这里再给一个官方的文档.
接下来说一说我的理解：
on：这个on是设置监听那个分支的那个动作的，这个可以设置很多种，可以是监听issues，可以是fork，可以是label，也可以筛选一些 分支
job.<job_id>.steps[*].uses：表示这个动作使用那个action，跟写代码的时候依赖那个包差不多，可以在Github Action marketplace中 查找
with：最后的Deploy的with中有指定几个参数，第一个GITHUB_TOKEN是你当前那个仓库的token，在这里找：生成个人Token，第二个 是部署分支的名字，GitHub pages默认是gh-page分支，第二个是要在那个目录进行部署，这里设置的是dist，也就是打包后的目 录
使用Github Action自动化部署GitHub Pages
首先我们随便搞一个项目代码，我用的vite，随便搞了一个vue的项目
yarn create vite
这里提前说一下，什么项目都行，只要能正常yarn install安装依赖，yarn build打包代码就行（上面的yml文件中的install and Build步骤就是用这两句代码操作的，当然你自己写相关的命令也行，要注意统一），我这里用的是vite，构建的一个vue3的项目，因为这个build构建出来需要指定构建的目录所以在vite.config.json中需要指定构建的路径。
如果你是用别的脚手架构建的项目，并且build不用指定根目录就不用这一步了，如果想我一样使用vite构建的，可能会需要指定构建的路径
vite.config.json
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
base: '/github-action-demo/', // 这个路径是我仓库的名字
})
我的参考代码：github.com/herzorf/git…
可以看到我的.github/workflows文件夹下面创建的yml文件是ci.yml这个名字起什么都可以。
然后将这个仓库的代码提交到你的仓库，push到master上去（因为yml的文件中监听的就是master分支）友情提示：别忘了给你的仓库设置Token
然后打开你的仓库的Actions就可以看到构建过程
这个yml文件的书写一定要注意格式，注意代码缩进，要不然会失败。
然后进入你仓库的这个地方
你就能看到你构建的github pages的地址了（可能地址后面需要加一个/index.html这个根据你build的dist来看需不需要加），如果打开看到是个空白页就多刷新几次，刷新个十来次，如果还没有就打开network看看请求的文件路径对不对，如果不多可能是
yarn build构建的时候没有指定路径，这个自行更改。
这样我们的github action自动化部署github pages就完成了，可以在编辑器中修改代码，然后再次push到监听的分支上去试一试。
使用docker 打包自己的镜像来实现本地的部署
好的，我们来到了新的一步。现在！在你的脑底里打一个log！忘记之前看到的东西！我们开始一个新的好玩的东西：docker
首先，我现在默认你已经安装了docker，这里建议直接安装他的桌面应用，这个比较简单，下载安装包，下一步，下一步。。。
检测自己是否安装好了：
docker --version
然后我们开始使用docer打包刚才的代码，将它打包成一个镜像，然后本地运行起来。
关于docker我的理解：
docker简单来说是一个打包工具，它可以将代码所以依赖的环境一起打包，可以通过Dockerfile文件进行配置，在打包的同时可以执行一些命令（安装依赖，拷贝文件。。。），官方还给提供了一个镜像管理平台,你可以将你的镜像上传上去，也可以下载别人提供的镜像（感觉是不是跟GitHub有点像），前提是你要注册一个账号。
本地文件，镜像，容器的关系：你的本地文件进行打包--->docker镜像----->运行起来就是dock儿容器
使用docker你需要懂得一些命令，这个不多做解释，用的多了就自然记得了。
添加docker文件
在你的项目中添加Dockerfiles文件，内容以及解释如下
FROM nginx # 基于nginx来打包
COPY ./dist /usr/share/nginx/html # 拷贝当前目录的dist文件夹到 /usr/share/nginx/html中去
EXPOSE 80 # 运行在80端口
这里需要把之前vite.config.json中添加的base注释掉，因为不用指定路径了（如果你之前添加了的话）
build 项目
yarn build #构建项目
docker打包成镜像
docker build -t my-project . # -t是起一个别名的意思，这里的意思是在当前目录进行build（注意后面还有个“.”）打包后的镜像名字是my-project
然后查看打包后的镜像
docker image ls #查看本地所有镜像
本地启动自己打包的镜像
docker run -dp 3000:80 my-project
这里有一个缩写，-pd是-d -p的缩写，-d意思是在后台执行，-p意思是指定端口：将本地的300端口映射到容器的80端口上
然后你就可以在浏览器中打开localhost:3000访问你的网页了。
在云服务器上拉取镜像来实现云服务器的部署
接下来就准备花钱把，买一个云服务器。我用的是腾讯云的轻量级云服务器，最近打折50块一年。直接付钱就能获取（腾讯云！！！打钱！！！），没有广告（🥺）。购买的时候有选择操作系统，我当时选择的是centos8.2-docer20，里面是直接就有docker的
然后在下图所示位置设置登陆密码
之后你就通过本地的命令行去连接云服务器了
ssh <你的用户名>@<你的云服务器的ip>
然后输入你的密码就可以连接上了，如果你当时购买服务器时候没有选择有docker的操作系统的话就需要你自己安装docker
上传你的docker 镜像
首先你得在Docker Hub上有一个账号，后面需要用这个账号在命令行中登陆Docker Hub，然后在docker hub中创建一个仓库，名字跟你的镜像名字一致。
1.登陆docker
docker login -u <你的docker用户名>. #你登录docker的用户名
然后在命令行中输入密码
2.给你的镜像起一个别名字
docker tag <你的项目名> <你的docker用户名>/<你的项目的名字>
3.push镜像
docker push <你的docker用户名>/<你的项目的名字>
如果没有指定tag就会默认是latest，现在你可以打开Docker Hub找到默认的仓库就能看到刚才上传的镜像了
在云服务器中下载并运行镜像
连接你的云服务器
ssh <你的用户名>@<你的云服务器的ip>
然后输入密码，并且确保你的操作系统中有docker。
然后下载你当时上传的镜像
docker pull <你的docker用户名>/<你的项目的名字>
如果需要登陆的话就用上面所用到的docker login -u <你的用户名>来登陆
然后把你的镜像跑起来
docker run -dp 80:80 <你镜像的名字>
然后打开浏览器，输入你服务器的ip地址就可以看到你的项目展示了
实现github action + docker + 腾讯云 实现自动化部署
好了，兄弟姐妹们，这是最后了。
上面三个部分我们实现了使用GitHub Actions实现Github pages的自动化部署 , 使用docker 打包自己的镜像来实现本地的部署，在云服务器上拉取镜像来实现云服务器的部署，现在我们把他们结合起来，大致流程是：
1.监听master的push操作
2.在yml文件中对项目进行打包
3.通过docker/action来生成docker镜像
4.通过docker/build-push-action来将生成的docker镜像发不到docker hub上去
5.登陆云服务器，执行脚本（后面会给出脚本内容，功能是获取镜像，运行镜像）
准备所用到的用户名密码等
在上面所说的步骤中我们需要将github action ，docker，云服务器结合起来，所以就需要提前准备好所有的用户名，密码，将他们保存到仓库的actions secrets中
添加自动化部署所需要的文件
在项目中添加docker文件
Dockerfile:
FROM nginx
COPY ./dist /usr/share/nginx/html
EXPOSE 80
添加yml文件
name: GitHub Actions Build and Deploy Demo
on:
push:
branches:
- master
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
with:
persist-credentials: false
- name: Install and Build
run: |
yarn install
yarn build
- name: Log in to Docker Hub #登陆docker
uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
with:
username: ${{ secrets.DOCKER_USERNAME }} #docker的用户名
password: ${{ secrets.DOCKER_PASSWORD }} #docker的密码
- name: Extract metadata (tags, labels) for Docker # 获取元数据包括tag和labels
id: meta
uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
with:
images: herzorf/vite-project
- name: Build and push Docker image #构建和发布 docker镜像
uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
with:
context: .
push: true
tags: ${{ steps.meta.outputs.tags }} #上一步所拿到的tags，默认是分支名字
labels: ${{ steps.meta.outputs.labels }} # 上一步所拿到的labels
- name: ssh docker login # 登陆云服务器
uses: appleboy/ssh-action@master
with:
host: ${{ secrets.TENCENT_CLOUD_IP }} #云服务器的ip
username: ${{ secrets.TENCENT_CLOUD_NAME }} #云服务器的用户名
password: ${{ secrets.TENCENT_CLOUD_PASSWORD }} #云服务器的密码
script: cd ~ && sh deploy.sh ${{ secrets.DOCKER_USERNAME }} ${{ secrets.DOCKER_PASSWORD }} #运行脚本
相关操作的解释都在注释里，其中不同的操作用到不同的action，在最后一行我们用到了一个脚本，这个需要添加到云服务器中。
先登陆你的云服务器，然后使用vim deploy.sh创建一个文件,添加下面的内容（注意替换其中的内容）
echo -e "---------docker Login--------"
docker login --username=$1 --password=$2 # 这个是yml文件最后一行所传递的参数，你docker的用户名和密码
echo -e "---------docker Stop--------"
docker stop <你镜像的别名(在下面👇会生成)> # 注意修改
echo -e "---------docker Rm--------"
docker rm <你容器名字> # 注意修改
docker rmi <你镜像的名字> # 注意修改
echo -e "---------docker Pull--------"
docker pull <docker服务器上镜像的名字>:<镜像的tag默认是github分支的名字> # 注意修改
echo -e "---------docker Create and Start--------"
docker run --rm -d -p 80:80 --name <容器的名字> <docker服务器上镜像的名字>:<镜像的tag默认是github分支的名字> # 注意修改
echo -e "---------deploy Success--------"
给大家参考一下我的deploy文件
echo -e "---------docker Login--------"
docker login --username=$1 --password=$2
echo -e "---------docker Stop--------"
docker stop herzorf
echo -e "---------docker Rm--------"
docker rm herzorf
docker rmi herzorf/herzorf:main
echo -e "---------docker Pull--------"
docker pull herzorf/herzorf:main
echo -e "---------docker Create and Start--------"
docker run --rm -d -p 80:80 --name herzorf herzorf/herzorf:main
echo -e "---------deploy Success--------"
然后就大功告成了，每次在push到master分支上之后都会自动部署到云服务器上了！！！！
大功告成
虽然这篇内容只讲了github action的使用，docker的简单使用，以及在云服务器上操作docker，将这三者结合起来的使用，但是在我自己摸索的时候所学到的东西比这些多得多，建议大家自己动手操作一下，遇到问题，遇到报错就去解决他们，相信也会学到很多东西的。
