GitHub Actions

# 前言

至少一个细节：.github/workflows/xxx.yml

on: push

jobs:
  job1:
    runs-on: ubuntu-latest
    steps:
      - run: pwd
      - run: ls

  job2:
    runs-on: ubuntu-latest
    steps:
      - run: node --version

1
2
3
4
5
6
7
8
9
10
11
12
13

# 项目打包和部署

CRA项目：输出目录是build，Vite输出目录是dist

GitHub项目
Actions
New workflow

name: 打包 React 项目

on:
  push:
    branches:
      - main   # 或 master，看你仓库用哪个

permissions:
  contents: write

jobs:
  build:
    name: npm-build 工作
    runs-on: ubuntu-latest

    steps:
      - name: 读取仓库代码
        uses: actions/checkout@v4

      - name: 安装依赖 + 打包
        run: |
          npm install
          npm run build

      - name: 部署到 GitHub Pages
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages
          folder: build

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

跑完后会多一个gh-pages分支

进行仓库设置Settings

找到左侧的Pages-Github Pages-Build and deployment-Branch-选择分支-Save

回到Actions工作流的图即可打开部署后的项目

# 自动化Docker镜像

# 添加`Dockerfile`文件

在Docker Hub新建仓库（用于告知Actions推送的仓库
在我的账号
安全Security
New Access Token
Copy Access Token

# =========================
# 1️⃣ 构建阶段（编译前端）
# =========================
FROM node:18-alpine AS build

# 设置容器内的工作目录
WORKDIR /app

# 复制 package.json
COPY package.json ./

# 安装依赖
RUN npm install

# 复制剩余的所有源码文
COPY . .

# 构建 VuePress
RUN npm run build


# =========================
# 2️⃣ 运行阶段
# =========================
# 使用官方 Nginx 轻量镜像
FROM nginx:alpine

# 删除 Nginx 默认的静态页面
RUN rm -rf /usr/share/nginx/html/*

# 拷贝 VuePress 的构建产物
COPY --from=build /app/docs/.vuepress/dist /usr/share/nginx/html

# 在 Dockerfile 中，EXPOSE 80 声明容器对外提供端口 80（HTTP）。这是文档/元数据，不会自动把宿主机端口映射到容器。运行时需要显式映射端口。
EXPOSE 80
# 启动 Nginx，并保持前台运行
# daemon off; 是必须的，否则容器会立刻退出
CMD ["nginx", "-g", "daemon off;"]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# 回到仓库

左侧Secrets and variables
Actions
Repository secrets
New repository secret
新增名称和密钥（DOCKER_HUB_USERNAME和密钥）
新增账号Token（DOCKER_HUB_TOKEN和token）

name: 构建镜像并推送到 Docker Hub

# 触发器：在推送到分支 hiuzing_master 时触发（on: push 指定分支）。
on:
  push:
    branches:
      - xxxx # 分支

# 作业：一个名为 build 的 job，在 ubuntu-latest 虚拟机上运行。
jobs:
  build:
    name: npm-build 工作
    runs-on: ubuntu-latest

    steps:
      - name: 读取仓库代码
        uses: actions/checkout@v4

      - name: 登录 Docker Hub
        uses: docker/login-action@v3
        with:
          username: ${{ secrets.DOCKER_HUB_USERNAME }}
          password: ${{ secrets.DOCKER_HUB_TOKEN }}

      - name: 构建并推送 Docker 镜像
        uses: docker/build-push-action@v5
        with:
          push: true
          tags: hiuzing/blog:latest # docker用户名/docker仓库名