虚拟机上部署的项目 访问路径怎么写_使用Github Actions 部署自己的前端项目

首先在git项目下创建一个workflow

GitHub Actions 术语。

1. workflow (工作流程)：持续集成一次运行的过程，就是一个 workflow。
2. job (任务)：一个 workflow 由一个或多个 jobs 构成，含义是一次持续集成的运行，可以完成多个任务。
3. step(步骤)：每个 job 由多个 step 构成，一步步完成。
4. action (动作)：每个 step 可以依次执行一个或多个命令(action)。

# .github/workflow/文件名.yml# 这是基础模板# 这个 workflow 的名字，可以随意命名name: Node.js CI# on触发条件on: [push]# 1.push事件触发workflow # 2.如果多个事件(on: [push,pull])# 3.指定触发事件，可以限定分支、tag、指定文件路径(on..)#  在master分支push时触发#   push：#     branches:#       - master#     tags:#       - v1.0.0 # 指定tags版本更新#       - v1.*.*  #指tags版本为1.n.n都会更新#    paths:#       - '**.js' # 所有的js文件更新时提交触发#       - 'doc/**'  # doc下文件发生改动触发# 4.忽略分支、tag、某一文件    branches-ignore、tags-ignore  、paths-ignore#    branches-ignore:#      - dev #当提交时分支为dev 不触发#    tags-ignore:#      - v2   #tag为v2时不触发# 5. 计划的工作流在默认或基本分支上的最新提交上运行。可以运行计划的工作流程的最短间隔是每5分钟一次#   schedule:#      - cron:  '*/5 * * * *' #   #  * * * * * (minute (0 - 59)、hour (0 - 23)、day of the month (1 - 31)、month (1 - 12 or JAN-DEC)、day of the week (0 - 6 or SUN-SAT))#  # *	 任何值	           * * * * * 每天每一分钟运行。#  # ， 值列表分隔符	   2,10 4,5 * * * 在每天的第4和5小时的第2分钟和第10分钟运行。#  # --	 取值范围	           0 4-6 * * * 在第4、5和6小时的第0分钟运行。#  # /	 步长值	           20/15 * * * * 从20分钟到59(每20、35和50分钟)开始，每15分钟运行一次。jobs:   # 所有的 job 都是并行的，但往往会有依赖关系  # test:  # link:   #   needs: test link依赖test  # 一个名为 build 的 job   build:    # runs-on指定运行所需要的虚拟机环境，必填    # ubuntu-latest指定Ubuntu GitHub托管的运行程序的最新版本。    # 也可以自己定义托管环境[self-hosted, linux, ARM32]    runs-on: ubuntu-latest    strategy:      matrix:        node-version: [8.x, 10.x, 12.x]    steps:    # 获取源码      - name: Checkout        uses: actions/checkout@master # 获取master代码        with:          persist-credentials: false      - name: Install and Build        run: | #执行多个命令          npm install          npm run build      - name: Deploy        uses: JamesIves/github-pages-deploy-action@releases/v3 # 写好的action        with:          ACCESS_TOKEN: ${{ secrets.DEPLOY_KEY }} #自定义生成key 生成步骤在下面          BRANCH: gh-pages #操作应部署到的分支。          FOLDER: dist #操作应部署的文件夹。

也可以在actions里快捷生成workflow

image.png

在提交后可以再github里查看Actions部署结果

image.png

image.png

部署成功后的访问地址：https://[用户名].github.io/[项目名]

注意部署时打包路径

1. vue3.0   vue.config.js里设置 publicPath: "/[项目名]/"
2. react packagen.json 里配置 homepage:'https://[用户名].github.io/[项目名]/'

生成 secrets.DEPLOY_KEY 步骤 请查看下一篇

参考文章：

阮一峰GitHub actions 入门教程
完整的事件列表，请查看官方文档。