最近学习了一下通过如何 github actions
一键集成和部署。刚开始的时候实现了将自己的单个项目一键集成部署到自己的阿里云 ECS
服务器。觉得挺好玩的。后来想到自己一直在写博客,为什么不将自己的博客也通过 github actions
集成并部署到自己的服务器呢?然后下面是自己在部署过程遇到的一些坑和解决方案的总结。
1、在本地生成ssh秘钥
打开 git bash
输入 ssh-keygen -t rsa -C "your_email@youremail.com"
生成公钥和私钥。
id_rsa
是私钥,id_rsa.pub
是公钥。
2、设置私钥
登录自己的 github
并新建一个项目,也可以打开已有项目。然后进入项目,并点击 settings
选项,然后点击Secret
,最后点击New secret
。将你刚刚生成的 id_rsa
文件里面额内容拷贝到secret
的value中。到此你在github
的私钥就部署好了。
3、设置公钥
- 登录服务器
ssh root@47.107.142.234
。 cd .ssh
进入到放置公钥的文件夹。vi authorized_keys
打开authorized_keys
文件。将你在本地生成的id_rsa.pub
里面的公钥的内容复制到该文件中。
4、生成yml文件
进入项目,点击 Actions
选项,然后 点击set up a workflow yourself
,然后会生成一个.github/workflows/main.yml
文件。然后按照要求开始编辑main.yml
文件(该文件是可以自定义名称的)。
5、配置yml文件。
下面是我的一个项目的配置文件。
name: Build app and deploy to aliyun
on:
#监听push操作
push:
branches:
# master分支,你也可以改成其他分支
- master
jobs:
build:
# runs-on 指定job任务运行所需要的虚拟机环境(必填字段)
runs-on: ubuntu-latest
steps:
# 获取源码
- name: Checkout
# 使用action库 actions/checkout获取源码
uses: actions/checkout@master
# 安装Node13
- name: use Node.js 13.2.0
# 使用action库 actions/setup-node安装node
uses: actions/setup-node@v1
with:
node-version: 13.2.0
# 安装依赖
- name: npm install
run: npm install
# 打包
- name: npm build
run: npm run build:prod
# 部署到阿里云
- name: Deploy to Aliyun
uses: easingthemes/ssh-deploy@v2.1.1
env:
# 私钥
SSH_PRIVATE_KEY: ${{ secrets.PRIVATE_KEY }}
# scp参数
ARGS: "-avzr --delete"
# 源目录,编译后生成的文件目录
SOURCE: "./dist"
# 服务器ip:换成你的服务器IP
REMOTE_HOST: "47.106.141.235"
# 用户
REMOTE_USER: "root"
# 目标地址 你在服务器上部署代码的地方
TARGET: "/root/web/vue-drag-demo"
复制代码
当你的部署文件写好之后。当你在master
分支上,push
代码时,会自动自行yml
文件,将将代码自动部署到你的服务器上。这样你就马上可以看到你修改之后的界面了。
这是我部署好的项目的效果。这是我的项目的github
的地址vue-drag-project。大家如果兴趣可以fork
我的项目(该项目是一个积拖拽和条件渲染功能于一身的项目),自己去尝试一下。
在部署该项目时遇到的问题
在部署时的源目录 SOURCE
一开始为 dist
,一直报错,后来改成./dist
后才部署成功。
6、配置nginx
在配置nginx
时遇到如下问题:默认的nginx.conf
文件会帮你将.*\.(js|css)?$
文件和 .*\.(gif|jpg|jpeg|png|bmp|swf|ico)$
这些文件进行缓存的。因为我vuepress
配置时的base
为/blog/
,所以当时我重写路由时rewrite
,一直没生效,鼓捣了几个小时,最后解决,所以在此记录一下。
上面的server
配置的是自己的一个开源项目vue-drag-project。下面的部署的是我的博客项目。如果有兴趣的话可以去看一下,觉得好的话可以去我的github
关注或者star
支持一下。
http{
# 开启gzip压缩
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml;
gzip_vary on;
#下面是server虚拟主机的配置
server
{
listen 8002;#监听端口
server_name 47.107.141.236;#服务器ip也可以是域名
index index.html index.htm index.php;
root /root/web/vue-drag-demo/dist;#站点目录
access_log off;
}
server
{
listen 8004;#监听端口
server_name 47.107.141.236;#服务器ip也可以是域名
index index.html index.htm index.php;
root /root/web/blog/dist;
location ~ /(blog)/ {
rewrite ^/blog/(.*) /$1 permanent;
}
#location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|ico)$
#{
#expires 30d;
# access_log off;
#}
#location ~ .*\.(js|css)?$
#{
# expires 15d;
# access_log off;
#}
access_log off;
}
}
复制代码