一、 新建一个项目
首先,你需要有一个项目,接下来的操作都是基于这个项目仓库进行升华的。这里以创建Vue3应用为例, 参考vue官网新建一个vue应用
npm init vue@latest
按照提示,一步一步往下选择就可以,如图:
项目被创建之后,通过以下命令安装依赖并启动开发服务器
cd github-ci-demo
yarn install
yarn dev
就可以访问开发环境
二、 推到GitHub仓库
方式多种多样,只要推到仓库就行。先去github
新建一个仓库,然后本地运行以下命令
git init
git add .
git commit -m 'feat: first commit '
git remote add origin git@github.com:wx901120/github-ci-demo.git
git push origin master
至此,项目就推上去了
三、GitHub Actions实现自动化部署
针对它是什么、怎样运作的问题,可以参考阮一峰老师的文章GitHub Actions 入门教程,
3.1、生成workflow文件
在当前仓库的.github/workflows
目录下,生成一个 workflow 文件,名字可以随便取,如ci.yml
参考别人已经写好的action:JamesIves/github-pages-deploy-action@v4
name: GitHub Actions Build and Deploy Demo # 大标题
on:
push:
branches:
- master # 监听哪个分支的哪个动作
permissions:
contents: write # 设置权限,可写,也可以不用配置,v4版本新增的
jobs:
build-and-deploy: # 其中一个任务的名称,ID
runs-on: ubuntu-latest # 这个任务运行所需的环境
steps:
- name: Checkout 🛎️ # 第一步:获取源码
uses: actions/checkout@v3 # 使用的工具
- name: Install and Build 🔧 # 第二步:下载依赖和构建
run: |
yarn install
yarn build
- name: Deploy 🚀 # 第三步:部署
uses: JamesIves/github-pages-deploy-action@v4
with:
folder: dist # 部署的目录
branch: gh-pages # 部署到哪个分支
3.2、检验部署
将刚才写好的代码,提交到仓库,看是否会触发自动化部署,打开你的仓库的Actions
就可以看到构建过程,如图所示:
自动部署成功
3.3、检验登录网址
部署成功后,访问网址,发现页面空白,打开控制台发现报错了。。。
于是,查看Vite官网-部署,发现通过vite
构建的项目需要注意vite.config.ts
中的base
参数配置
于是,修改vite配置中的base
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
+ base: "/github-ci-demo/",
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
之后,再次部署,登录,发现还是报错,index.html
文件也不是dist
目录下生成的文件,炸裂。。。。有知道的大佬麻烦解释下。
没办法,最后通过vite
官网提供的.yml
文件成功了。
# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages
on:
# 仅在推送到默认分支时运行。
push:
branches: ['master']
# 这个选项可以使你手动在 Action tab 页面触发工作流
workflow_dispatch:
# 设置 GITHUB_TOKEN 的权限,以允许部署到 GitHub Pages。
permissions:
contents: read
pages: write
id-token: write
# 允许一个并发的部署
concurrency:
group: 'pages'
cancel-in-progress: true
jobs:
# 单次部署的工作描述
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Set up Node
uses: actions/setup-node@v3
with:
node-version: 18
cache: 'npm'
- name: Install dependencies
run: npm install
- name: Build
run: npm run build
- name: Setup Pages
uses: actions/configure-pages@v3
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:
# Upload dist repository
path: './dist'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v1