Github actions 部署vue项目_vue-cli 项目使用 github actions

如果你本着show me the code的原则，想把自己写的Vue项目拿出来让大家看看。如果你不想花大把的银子去给马爸爸买个1个核1G内存1M带宽的云服务器。那你还在等什么，现在就来薅巨硬爸爸的羊毛吧！！！

关于 actions

actions是个什么东西呢，其实他就是github的CI/CD工具，如果你用过gitlab的runner那你对CI/CD这个概念肯定不会陌生。

如果你对CI/CD没啥概念，那我推荐你百度一下有个大概的了解就行。

workflow相当于gitlab里的gitlabl-ci.yml都是定义了一个自动化的流程，在这个流程里我们可以在允许的范围内为所欲为。

workflow 语法介绍

语法介绍推荐看官方文档或者阮一峰老师的博客

如何部署

废话不多说，我们直接进入正题，如何使用actions部署vue项目。

创建一个vue项目

我们这使用vue-cli直接生成一个项目。打开控制台，输入以下命令：

vue create vue-actions-deploy
1

然后vue就会让我们选预设，这里我们就直接选DEFAULT，回车走起。

然后就进入了安装过程，让我们起身动动休息一下。

然后就好啦。

修改package.json文件

我们需要在文件中新加一行

"homepage":"https://[用户名].github.io/[项目名]"
1

新增vue.config.js文件

我们在项目的根目录下新建一个 vue.config.js文件，用于配置vue项目。

module.exports = {
  outputDir: 'dist',
  publicPath: process.env.NODE_ENV === 'production'
    ? '/[项目名]/'
    : '/'
}
1
2
3
4
5
6

这需要注意一下，由于github pages默认的地址是包含子目录的，所以我这这需要指定一下publicPath的路径为我们的项目名。

上传代码

完成以上步骤后，我们再通过以下步骤上传一下代码。

• 登入我们的Github账号
• 让我们新建一个Repo
  
• 接着一顿操作上传代码

git init
git add .
git commit -m "first commit"
git remote add origin [仓地址]
git push -u origin master
1
2
3
4
5

准备工作

在正式开始之前，我们要做几件准备工作。

1. 我们需要申请一个 private token。
   1. 首先点击我们的小头像，然后点击 Setting。
      
   2. 接着在左侧列表中选择 Developer setttings。
      
   3. 然后在左侧列表中选择 Personal access tokens
      
   4. 最后我们点击 Generate new token按钮，选择好权限，生成一个新的token，记下生成的token，一会我们还需要用到。
2. 我们直接将token明文写在yml中实在是一种缺心眼的行为，所以我们这选择将token保存在secret中。
   1. 回到我们刚新建的repo中。
   2. 点击Settings
      
   3. 点击左侧的Secrets按钮。
      
   4. 点击Add a new secret按钮，自己起个Secret名称（我这就叫ACCESS_TOKEN了）并填入刚申请的token值，点击Add secret按钮。
      

编写yml文件

现在开始进入正题，让我们开启action之旅吧~！

• 点击Actions按钮
  
• 进入Actions页面，可以看到github给我们预设了很多模板，我们这里先不管这些，点击 Set up a workflow yourself。
  
• 现在让我们开始编写yml文件吧，输入以下内容，并给yml文件换个名字，我们就叫 buildAndDeploy.yml

name: buildAndDeploy
on:
  push
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest # 我们选择使用最新的ubuntu系统
    steps:
    - name: checkout
      uses: actions/checkout@master # 将代码拷贝到虚机中

    - name: buildAndDeploy
      uses: JamesIves/github-pages-deploy-action@master 
      env:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} # 使用刚新建的secret
        BRANCH: gh-pages # 存放产物的分支名称
        FOLDER: dist # 存放build后产物的目录
        BUILD_SCRIPT: npm install && npm run build # 执行的命令
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• 点击 Start commit按钮，接着点击 Commit new file按钮。
• 回到repo主页，我们可以看到action已经跑起来啦。
  
• 点击Details可以查看详情。
  
• 接着就让我们等待完成。
  

开启github pages

最后让我们开启github pages就可以啦。

• 进入repo的Settings界面
• 找到GitHub Pages设置，Source选择我们在yml文件中指定的那个分支，设置完成后可以看到一行蓝色的提示：Your site is ready to be published at xxxxxx
  
• 最后我们访问 https://[用户名].github.io/[项目名] 就可以看到自己的网站啦。
  

进阶

在完成了基本的操作后，我们开始进入进阶阶段。

设置自定义域名

觉得默认的域名太丑？没关系巨硬爸爸给你自定义域名。

• 首先我们要有自己的域名。
• 登入我们的DNS解析控制台，新增一条规则。
  
  有几点我们需要注意：

记录类型：这要选择的是 CNAME
主机记录：我们自己起一个二级域名
记录值：这要填 [Github用户名].github.io
1
2
3

• 回到github pages的设置界面，在Custom domain中填入刚设置的域名，点击Save按钮。
  

以上操作完成后，我们打开自定义域名，然而我们啥都看不见，打开控制台发现有错误信息。

这是为什么呢？为什么呢！？为什么呢！！？

原来是因为我们打包时指定了子目录，而我们的自定义域名并没有包含子目录，所以我们修改一下 vue.config.js 文件

module.exports = {
  outputDir: 'dist',
  publicPath: '/'
}
1
2
3
4

等action重新跑完，再访问我们的自定义域名就可以正常访问啦。

使用https

现在自定义域名也有了，但怎么保存报文传输时的安全性呢？自然我们就要开启https啦。巨硬爸爸也很贴心的为我们准备了一键开启https的方法：

• 回到github pages的设置界面。
• 勾选 Enforce HTTPS，然后等一会就可以啦。
  

workflow中使用环境变量

不知道你们有没有遇到过这样的场景，代码中用到了第三方库，这个库还需要你进行身份认证才可以正常使用，在本地开发的时候，我们可以使用 .env.local，通过环境变量获取uuid和token，但现在我们想把build的流程通过github的action来实现，有几种实现方式：

• 代码中写死。
• 把token等信息写进 .env 并上传至github。
• 在workflow的命令中指定环境变量。

很明显，第一种有点缺心眼，第二种实现也不适合敏感信息，控制一下url什么的倒是可以。可能你会说第三种设置环境变量的方式也是要明文写验证信息也是不安全的啊，但别忘了我们还有secrets啊。

• 首先我们新建个secret，就叫 ENV_TEST 吧
  
• 修改workflow文件，在编译时设置环境变量。需要注意的是vue只会把 VUE_APP_ 打头的环境变量打包进去。

...
BUILD_SCRIPT: export VUE_APP_ENV_TEST="${{ secrets.ENV_TEST }}" && npm install && npm run build # 执行的命令
1
2

• 我们修改一下代码，在界面上展示一下这个值。
• 等会action运行完成，重新看一下界面，就可以发现我们传的值啦。
  

在线效果

本文中项目的地址