Github Actions

狐七 deployment

# 部署步骤

设置tokens，点击头像，Settings > Developer settings > Personal access tokens

点击Generate new token 按钮，填写note信息(不能为空)，将repo的选项勾选(允许访问git仓库权限)，提交就生成好了一个token

注意！！！

Token要记下来，只能拿到一次

在本地的项目中添加.github/workflows/depoy.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@master
    - name: Build and Deploy
      uses: JamesIves/github-pages-deploy-action@master
      env:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        BRANCH: gh-pages
        FOLDER: dist
        BUILD_SCRIPT: npm install && npm run build

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在package.json里面添加配置选项

"homepage": "https://[用户名].github.io/[仓库地址]/",

配置vue.config.js，这个目的是为了配置index.html中插入的js和css路径，默认插入的路径是/，即根路径.如果是生产环境的话，就使用我们配置的那个仓库地址之后，所以后面要加一个子路径

module.exports = {
  outputDir: 'dist',
  publicPath: process.env.NODE_ENV === 'production' ? '/github的仓库名称/' : '/'
}

1
2
3
4

配置的详细介绍

# 名字
name: GitHub Actions Build and Deploy Demo
# 触发的条件 往master分支push的时候就会触发下面的任务
on:
  push:
    branches:
      - master
# 工作的流程
jobs:
  build-and-deploy:
    # 运行在一个临时的操作系统，其实是一个docker，在docker里面开启了一个乌班图系统(linux系统)
    # 整个流程完成之后，系统就销毁了
    runs-on: ubuntu-latest
    steps:
    # 第一个任务，将当前的项目checkout，克隆下来
    # actions，markect里面有很多actions，这个是官方给的
    - name: Checkout
      uses: actions/checkout@master
    # 别人写好的actions，可以到这个网站上搜索别人写好的actions，以及用法 https://github.com/marketplace/actions/deploy-to-github-pages
    - name: Build and Deploy
      uses: JamesIves/github-pages-deploy-action@master
      # 环境变量
      env:
        # 访问仓库的tocken，刚才在开发者里面设置的
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        # 创建新分支
        BRANCH: gh-pages
        # 打包之后的目录
        FOLDER: dist
        # 打包命令
        BUILD_SCRIPT: npm install && npm run

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

ACCESS_TOKEN 中的 secrets.ACCESS_TOKEN 变量，要去项目的Settings > Secrets上创建

把当前项目中的内容commit提交，可以看到当前的仓库中只有master分支

将项目git push origin master到远程目录，可以看到Actions里面有任务在执行

执行完毕之后可以看到任务完成

这个时候出现了一个新的分支gh-pages，里面的内容就是运行打包之后打包好的项目

然后去Setting > GitHub Pages里面将分支设置为gh-pages，save按钮之后就设置好了.

可以进行使用了，在网页中修改一个东西，然后git提交并push到远程，等actions运行完之后，网页中可以看到内容.

不过这个过程非常的长，可能部署一次，要好几分钟.

# 设置自己的域名

如果想要修改域名为自己的，可以在这里设置

首先要去阿里云购买一个域名，然后进入主机编辑

输入域名之后点击save保存，保存之后可以看到项目中有一个CANME的文件，所以记得在打包文件里面也要添加CNAME文件，否则自定义域名会失效

访问网页可以看到保存之后的css和js的路径丢失，需要把vue.config.js里面的目录进行修改，改为根目录或者直接将文件删除即可

module.exports = {
  outputDir: 'dist',
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/'
}

1
2
3
4

5.可以看到访问是正常的，自定义域名设置成功

# 部署特点

Github上只是托管了我们打包后的静态内容，所以不能部署基于node.js开发的应用，只能部署静态页面。

想要部署node开发的应用，可以使用vercel。

Github pages Vercel

狐七的个人博客

Choose mode

Github Actions

Github Actions

# 部署步骤

# 设置自己的域名

# 部署特点