前言
之前趁着腾讯云双十一搞活动,买了3年的云主机,买完之后一直没有时间去折腾,趁着元旦假期,正好抽空学习了下Github Action的相关操作,做下记录,有相同想法的同学可以尝试看下。
本次操作的场景是纯静态前端部署,将打包生产的dist文件夹部署在nginx的/usr/share/nginx/html下。利用Github Action实现,步骤为前端项目的build -> 生成docker镜像 -> 上传至腾讯云个人镜像服务(私有镜像) -> 执行服务器脚本拉去镜像 -> 通过镜像运行容器
准备工作
- 一个github仓库
- 一个腾讯云服务器(记得安装好docker)cloud.tencent.com/developer/a…
部署前端博客
新建Github Action
在github自己的仓库下面创建Github Action
设置workflow
选择自己设置workflow
配置workflow的yml文件
在新生成的yml文件中直接粘贴如下代码
name: Docker Image CI # Actions名称
on:
# 触发workflow的动作形式,这里是手动触发
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@master
# 安装依赖
- name: install
run: yarn
# 打包
- name: build project
run: yarn run build
# 打包镜像推送到腾讯云容器镜像服务
- name: Build the Docker image
run: |
docker login --username=${{ secrets.DOCKER_USERNAME }} ccr.ccs.tencentyun.com --password=${{ secrets.DOCKER_PASSWORD }}
docker build -t lizonghao:latest .
docker tag lizonghao ccr.ccs.tencentyun.com/lizonghao/lizonghao:latest
docker push ccr.ccs.tencentyun.com/lizonghao/lizonghao:latest
# 使用appleboy/ssh-action@master登录服务器执行拉取镜像脚本,服务器ip、用户名、密码配置方式同容器镜像服务配置方式一样
- name: ssh docker login
uses: appleboy/ssh-action@master
with:
host: ${{ secrets.SSH_HOST }}
username: ${{ secrets.SSH_USERNAME }}
password: ${{ secrets.SSH_PASSWORD }}
script: cd ~ && sh lizonghao.sh ${{ secrets.DOCKER_USERNAME }} ${{ secrets.DOCKER_PASSWORD }}
复制代码
分几个部分来解释下上述的yml文件
Build the Docker image
关键部分在Build the Docker image,前面都是普通的前端安装依赖,构建静态资源的部分。
在仓库项目根目录下新建Dockerfile文件,这是最简单的前端项目配置,其中还有一个nginx的配置拷贝,记得仓库项目根目录下也新建同样的default.conf配置文件。
Dockerfile
FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
复制代码
/nginx/default.conf
server {
listen 80;
server_name localhost;
#charset koi8-r;
access_log /var/log/nginx/host.access.log main;
error_log /var/log/nginx/error.log error;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
复制代码
其中docker login是要登陆到腾讯云的个人私有容器服务,这个服务个人版本是免费的。
服务地址是:console.cloud.tencent.com/tcr/reposit…
文档发地址:cloud.tencent.com/document/pr…
run: |
docker login --username=${{ secrets.DOCKER_USERNAME }} ccr.ccs.tencentyun.com --password=${{ secrets.DOCKER_PASSWORD }}
docker build -t lizonghao:latest .
docker tag lizonghao ccr.ccs.tencentyun.com/lizonghao/lizonghao:latest
docker push ccr.ccs.tencentyun.com/lizonghao/lizonghao:latest
复制代码
这部分有个secrets.DOCKER_USERNAME和secrets.DOCKER_PASSWORD
这个的设置是github提供的secrets设置,方便我们将不能泄漏的数据存储起来,设置的位置在
name value形式的,填入你想存储文件的name和value就可以了
其中在腾讯云个人容器服务中DOCKER_USERNAME是你的腾讯云账号。
然后我们关注下
ccr.ccs.tencentyun.com/lizonghao/lizonghao:latest
复制代码
在文件中这个路径前面的域名是腾讯个人容器服务的域名,第二个地址是你的容器服务的命名空间,第三个是你docker的镜像名字。
执行部署脚本
- name: ssh docker login
uses: appleboy/ssh-action@master
with:
host: ${{ secrets.SSH_HOST }}
username: ${{ secrets.SSH_USERNAME }}
password: ${{ secrets.SSH_PASSWORD }}
script: cd ~ && sh lizonghao.sh ${{ secrets.DOCKER_USERNAME }} ${{ secrets.DOCKER_PASSWORD }}
复制代码
这其中secrets.SSH_HOST、secrets.SSH_USERNAME和secrets.SSH_PASSWORD是你云服务器的host地址,登陆用户名,一般是root和你设置的登陆密码。
script是登陆成功之后要执行的服务器的脚本名称,所以需要提前在服务器上去新建一个sh的脚本,脚本内容如下
echo -e "---------docker Login--------"
docker login --username=$1 ccr.ccs.tencentyun.com --password=$2
echo -e "---------docker Stop--------"
docker stop lizonghao
echo -e "---------docker Rm--------"
docker rm lizonghao
docker rmi ccr.ccs.tencentyun.com/lizonghao/lizonghao:latest
echo -e "---------docker Pull--------"
docker pull ccr.ccs.tencentyun.com/lizonghao/lizonghao:latest
echo -e "---------docker Create and Start--------"
docker run --rm -d -p 80:80 --name lizonghao ccr.ccs.tencentyun.com/lizonghao/lizonghao:latest
echo -e "---------deploy Success--------"
复制代码
这是一个基础的sh脚本,其中步骤分别是 1.登陆docker私人镜像服务 2.关闭当前运行前端容器 3.移除当前运行前端容器镜像 4.移除当前运行前端容器远端镜像 5.拉取远端最新前端容器镜像 6.运行拉去最新的前端镜像端映射为80端口
执行Github Action
至此,所有的操作都已完成,只需要在Github Action的菜单下,执行对应的action动作,等待部署动作的完成。
最后,通过域名或者公网ip的地址,就能正确的访问你的前端项目啦,后续改动只需要推送到github上即可一键发布。