需要环境:
node.js + github action
1.安装Node.js
安装连接
安装长期维护版即可
配置环境变量:
正常安装下,是会自动帮我们配置好环境变量的,验证是否配置成功:
若提示node不存在,则删除原有环境变量,重新添加即可。
重新添加步骤:
找到原有环境变量的路径:
我的电脑-属性-高级系统设置-环境变量-系统变量-PATH
在这个路径下找到Node.js,删除并且重新添加,再在cmd输入node -v即可
2.本地计算机使用create-react-app,生成一个标准的 React 应用
假设github的项目本地路径在:D:/Git/github-actions-demo中
则cd到D:/Git路径下:
npx create-react-app github-actions-demo
npx一般会包含在下载的node.js中
执行完的界面如下图:
3.修改package.json
修改下载到本地的package.json,添加homepage变量,这个链接将作为react项目的主页,小红框处需要修改成自己的github名称。
4.为github action创建密钥
官方介绍
按照官方介绍执行到第9步,然后粘贴生成的密钥
将密钥创建为你github项目的secret变量 ACESS_TOKEN
5.构建github action的workflows
workflows是github action的执行流程
在github-actions-demo中创建.github文件夹,并在其中创建workflows文件夹
github action是识别.github/workflows中的.yml文件来进行工作的,因此还要创建XXX.yml文件,文件名随意。
yml文件内容,可直接复制
name: GitHub Actions Build and Deploy Demo
on: # 指定触发workflow的条件,这里是指定了每push一次到main分支,则触发一次
push:
branches:
- main
jobs: # workflows文件主体,可以指定一个或者多个,这里指定了一个job - build-and-deploy
build-and-deploy:
runs-on: ubuntu-latest # 在最新的ubuntu上运行
steps: # 指定每个job的运行步骤
- name: Checkout # 步骤名称
uses: actions/checkout@v2 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
with:
persist-credentials: false
- name: Install and Build
run: | # 该步骤要运行的命令,这里就是部署react 的命令
npm install
npm run-script build
- name: Deploy
uses: JamesIves/github-pages-deploy-action@releases/v3 # 执行一些公开的action
with:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} # 这里是我们刚刚创建密钥的变量名称
BRANCH: gh-pages
FOLDER: build
6.将本地项目push到远程仓库
cd D:/Git/github-actions-demo
git add .
git commit -m "github action demo"
git push
推送到远程仓库后,github action会识别到workflows,自动运行yml文件中的jobs
可以在github 项目中的action中查看
7.打开react网页
打开上面第3步的homepage连接:
完毕!以上就是利用Github Action 部署一个React静态网页。参考链接如下:
参考连接:
github action 介绍