关于如何使用 github 操作为 netlify 上的 react 项目设置自动部署的教程

随着生产力和时间管理需求的增加，任何有意义的公司或初创公司都应该考虑减少部署应用程序所花费的时间。 这个时间可以通过自动部署大大减少，而且这些服务大多是免费的。

在这个项目中，您将学习如何在 netlify 和 github 操作中为 React 项目设置自动部署。 在这个项目中，我会确保解决我在自己的项目中遇到的所有问题。

基本都搞定了，开始工作吧！！

步骤1：

在您的根目录中创建一个名为 .github 的文件夹，并在该文件夹中创建另一个名为 workflows 的文件夹，在工作流文件夹中创建 main.yml 文件。

设置 2：

在 main.yml 文件中编写代码以使用以下命令创建当前操作的名称：

name: "build pipeline for web release"

使用以下方法为此操作添加触发器：

on: 
  push:
    branches:
    - main

上面的代码设置了在推送到主分支时触发的操作。

第 3 步：

接下来要做的是设置作业。 此作业是由操作执行的任务

jobs:
  build:
    runs-on: ubuntu-latest

上面的这个脚本将 github 操作的操作系统设置为 ubuntu

设置 4：

为 github 操作添加步骤。 每个 React 应用程序所需的步骤如下：

• 设置 github 操作
• 在ubuntu环境下安装node
• 为项目安装依赖项
• 为公用文件夹构建网站

steps:
    - uses: actions/checkout@v2
    - name: Use Node.js 16.x
      uses: actions/setup-node@v2
      with:
        node-version: 16.x
        cache: 'npm'
        cache-dependency-path: package-lock.json    - name: Install dependencies
      run: npm install     - name: Build file
      run: npm run build

第 5 步：

下一步是我有一些问题。 这是因为 react 会生成单页应用程序 (SPA)，您需要配置 netlify 以接受来自应用程序的任何请求的子页面。

为此，请在名为 netlify.toml 的根目录中创建一个文件。 并粘贴下面的代码：

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

现在回到 main.yml 文件，添加一个将该文件复制到构建文件夹的步骤

    - name: Copy build settings to build folder
      run: cp netlify.toml build/

第 6 步：

这些后续步骤允许您将应用程序构建部署到 netlify

    - name: Deploy production to Netlify
      uses: South-Paw/action-netlify-deploy@v1.2.0
      with:
        github-token: ${{ secrets.GITHUB_TOKEN }}
        netlify-auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
        netlify-site-id: ${{ secrets.NETLIFY_SITE_ID }}
        build-dir: './build'
        comment-on-commit: true

在上面的步骤中，有一些构建应用程序所必需的令牌，这些令牌是：

• Github 的秘密 secrets.GITHUB_TOKEN
• Netlify 用户授权令牌 secrets.NETLIFY_AUTH_TOKEN
• Netlify 站点 id secrets.NETLIFY_SITE_ID

第 7 步：

遵循以下流程

• 使用 npm build 手动构建应用程序
• 创建您的 netlify 应用程序
• 手动设置您的网站并上传手动构建
• 将您的 netlify 帐户令牌和 netlify 站点 ID 保存为 github 机密

概括

github发布总结

name: "build pipeline for web release"

on: 
  push:
    branches:
    - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js 16.x
      uses: actions/setup-node@v2
      with:
        node-version: 16.x
        cache: 'npm'
        cache-dependency-path: package-lock.json
    - name: Install dependencies
      run: npm install 
    # - name: Run tests
    # - run: npm test
    - name: Build file
      run: npm run build
      
    # copy file for netlify.toml
    - name: Copy build settings to build folder
      run: cp netlify.toml build/

    # deploy application to netlify
    - name: Deploy production to Netlify
      uses: South-Paw/action-netlify-deploy@v1.2.0
      with:
        github-token: ${{ secrets.GITHUB_TOKEN }}
        netlify-auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
        netlify-site-id: ${{ secrets.NETLIFY_SITE_ID }}
        build-dir: './build'
        comment-on-commit: true

关注七爪网，获取更多APP/小程序/网站源码资源！