GitHub Actions自动化部署流程

前端项目设置

1. 确保您的项目在GitHub上托管。

   • 您的项目应该有一个有效的git仓库，并且已经推送到GitHub。

2. 在项目中包含构建脚本。

   • 在package.json文件中，确保包含构建和测试脚本。
   • 例如：

     "scripts": {
       "test": "react-scripts test", // 用于运行测试
       "build": "react-scripts build", // 用于构建生产版本
       "deploy": "gh-pages -d build" // 用于部署到GitHub Pages
     }
     

3. 本地测试项目。

   • 在提交之前，请在本地运行npm run build确保没有构建错误。

创建GitHub Actions工作流

1. 在您的项目中创建工作流目录。

   • 在项目的根目录中创建.github/workflows目录（如果尚不存在）。

2. 创建工作流文件。

   • 在.github/workflows目录中创建一个新的YAML文件，例如deploy.yml。

3. 配置工作流。

   • 打开deploy.yml文件并添加以下内容：

     name: Build and Deploy to GitHub Pages
     
     on:
       push:
         branches:
           - main  # 指定触发部署的分支，通常是main或master
     
     jobs:
       build-and-deploy:
         runs-on: ubuntu-latest  # 使用最新的Ubuntu虚拟环境
     
         steps:
         - name: Checkout Code
           uses: actions/checkout@v2
     
         - name: Setup Node.js
           uses: actions/setup-node@v1
           with:
             node-version: '14'  # 指定Node.js的版本，根据您的项目需求调整
     
         - name: Install Dependencies
           run: npm install
     
         - name: Run Tests
           run: npm test
     
         - name: Build
           run: npm run build
     
         - name: Deploy to GitHub Pages
           uses: JamesIves/github-pages-deploy-action@4.1.4
           with:
             GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
             BRANCH: gh-pages  # 部署到gh-pages分支
             FOLDER: build  # 指定构建目录，根据您的构建工具可能不同，如'build'或'dist'
             CLEAN: true  # 清理旧文件
     

4. 提交工作流文件。

   • 将deploy.yml文件添加到您的仓库，提交并推送到GitHub。

自动化部署过程

• 每当您向main分支推送更改时，GitHub Actions将自动运行定义的工作流。
• 工作流将安装依赖项、运行测试、构建项目，然后将构建的内容部署到GitHub Pages。
• 您可以在GitHub仓库的"Actions"选项卡中看到工作流运行的状态和日志。

验证部署

• 完成工作流运行后，检查GitHub Pages上的项目是否已更新。
• 您可以通过访问https://<username>.github.io/<repository>/（替换<username>和<repository>）来查看部署的页面。

注意事项

• 如果您的项目有特定的构建和部署需求，请根据实际情况调整脚本。
• 对于不同的托管平台，您可能需要更改部署步骤和相应的配置。
• 请确保您的项目中没有敏感信息（如API密钥），或者使用GitHub Secrets来安全