on: push
jobs:
npm-build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: npm install
- run: npm run build
如果怕乱，最后还是会写name作为备注：
name: 打包React项目
on: push
jobs:
npm-build:
name: npm-build工作
runs-on: ubuntu-latest
steps:
- name: 读取仓库内容
uses: actions/checkout@v4
- name: 安装依赖
run: npm install
- name: 项目打包
run: npm run build
就是这样，先写name，再指定具体步骤执行的内容。
如果自动化生成docker镜像，并且推送到docker仓库里，这里在刚才的项目文件夹里面创建了一个Dockerfile，并且写一些创建镜像的基本操作，接着来到Docker hub新建一个仓库，毕竟等会要告诉actions要推到哪个仓库。
接着到我的账户里面：
找到安全security选项，新建一个token，
因为把镜像推送到这个仓库是需要权限的，回到yaml文件，
name: 打包React项目
on: push
permissions:
contents: write
jobs:
npm-build:
name: npm-build工作
runs-on: ubuntu-latest
steps:
- name: 读取仓库内容
uses: actions/checkout@v4
- name: 安装依赖和项目打包
run: |
npm install
npm run build
- name: 部署
uses: JamesIves/github-pages-deploy-action@v4
with:
branch: gh-pages
folder: build
首先修改一下name，因为和刚才的工作不太一样，
name: 构建镜像并推送到Docker Hub
on: push
jobs:
npm-build:
name: npm-build工作
runs-on: ubuntu-latest
steps:
- name: 读取仓库内容
uses: actions/checkout@v4
- name: 登录DockerHub
uses: docker/lgoin-action@v3
with:
username: ${{ secrets.DOCKER_HUB_USENAME }}
password: ${{ secrets.DOCKER_HUB_TOKEN }}
- name: 构建并推送到Docker Hub
uses: docker/build-push-action@v5
with:
push: true
tags: eggoopain/react-app:latest
登录dockerhub，利用一下现有的action，登录。
接着用另一个现成的action，构建并推送到Docker Hub，注意这里的tag要和仓库相对应，生下来的密码和账号，先回到设置页面，在secrets and vatirables下面有一个actions，有一个actions，这里就可以新增secret，name就是自定义名称，secret就是名称所保存的不能公开的秘密.
接下来就是
git add .
git commit -m "生成镜像并推送到Docker Hub"
git push origin main
成功了，看看有没有推送到docker上面去。
docker hub里面也显示了新增的镜像，
下面跑个容器看看：
docker run -d -p 3333:3000 eggtoopain/react-app:latest
// 然后去访问浏览器 localhost:3333
就可以看到页面了。
