github action 持续集成部署

github 上的操作

1.在 github 打开你要操作的项目地址,点击右上角的Settings,在左侧选择Secrets->Actions

2.在右侧选择New repository secret

3.输入 name:"ACCESS_TOKEN",value:上面复制的私钥,点击Add secret

4.接着重复上两步,建立HOST:你服务器的ip、你的目标TARGET:你服务器上放资源的地方以及其他的你需要隐藏起来的信息,例如USER:root,PASSWORD:123456,看个人需求准备工作基本完成,

便携自动化部署文档

在本地项目根目录创建.github文件夹,并在其中创建workflows文件夹,并在其中创建main.yml文件,内容如下

1name: NodeJS with vuepro #随便起的名字
2
3on:
4    push: #在每次push时执行任务
5        branches: [main] #只有在main分支上才会执行
6
7jobs:
8    build:
9        runs-on: ubuntu-latest #指定构建的虚拟机版本
10        steps:
11            - name: Checkout #检出
12              uses: actions/checkout@main #检出的依赖2
13              with:
14                  persist-credentials: false #不保存证书
15            - name: Cache Node Dependencies #设置依赖缓存.
16              id: cache
17              uses: actions/cache@v1
18              with:
19                  path: node_modules
20                  key: ${{runner.os}}-npm-caches-${{ hashFiles('package-lock.json')}}
21            - name: Install Dependencies #安装依赖
22              if: steps.cache.outputs.cache-hit != 'true'
23              run: |
24                  npm install --force
25            - name: build project
26              run: |
27                  npm  run build
28            - name: deploy file to server
29              uses: easingthemes/ssh-deploy@v2.0.7 #dd
30              env:
31                  REMOTE_USER: 'root' #ssh user name
32                  REMOTE_HOST: ${{secrets.HOST}} #目标地址,在github secrets中设置
33                  ARGS: '-avz --delete' #参数
34                  SSH_PRIVATE_KEY: ${{secrets.ACCESS_TOKEN}} #github access token
35                  SOURCE: 'dist/' #源文件目录
36                  TARGET: '/data/webStatic/dist' #目标文件目录
37                  # 上面几个参数可以在github secrets中设置,然后用secrets.的模式引用

发布github pages

发布本地项目到github pages

1name: NodeJS with Webpack
2
3on:
4  push:
5    branches: [ "main" ] #在每次push时执行任务
6  pull_request:
7    branches: [ "main" ]
8
9jobs:
10  build:
11    runs-on: ubuntu-latest #指定构建的虚拟机版本
12
13    strategy:
14      matrix:
15        node-version: [18] #指定构建的虚拟机版本
16
17    steps:
18    - uses: actions/checkout@v4 #检出
19
20    - name: Cache dependencies #设置依赖缓存.
21      uses: actions/cache@v2
22      with:
23        path: ~/.npm
24        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
25        restore-keys: |
26          ${{ runner.os }}-node-
27
28    - name: Use Node.js ${{ matrix.node-version }}
29      uses: actions/setup-node@v4
30      with:
31        node-version: ${{ matrix.node-version }}
32
33    - name: Install dependencies && Build    #安装依赖并打包
34      run: |
35        npm install --force
36        npm run build
37
38    - name: Deploy to GitHub Pages #部署
39      uses: JamesIves/github-pages-deploy-action@3.7.1
40      with:
41          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
42          BRANCH: gh-pages
43          FOLDER: dist

发布测试

1.把 main.yml 文件上传到 github,然后打开项目的 actions 页面,查看运行状态,如果没触发,看是不是分支不对

2.如果报错的话,看一下是否有缺少依赖,还是 token 啥的配置错了,

3.然后就可以看你的网页了

---../../../src/components/Tag

ON THIS PAGE

#github action 持续集成部署

#github 上的操作

#便携自动化部署文档

#发布github pages