[Unity] GitHub Actions × Game CI 搭建WebGL CI/CD环境（部署到Netlify）

介绍

我想那些体验过 Unity 的 WebGL 构建的人都知道，
这可能需要一些时间，具体取决于项目规模。

在构建过程中，负载被施加到手头的 PC 上，
它是一个有效率空间的部分，例如每次麻烦的部署工作。

所以我专注于 Unity 的 WebGL 构建，旨在构建 CI/CD。
另外，基本利用是免费服务，
我能够在不花钱的情况下安排最低限度的必要物品，所以我会记下它。

GitHub 操作

使用 GitHub Actions 推送、创建问题、创建 PR 等。
使用 GitHub 平台事件触发工作流这将是可能的。

这次我不会讲太多细节，但是你也可以使用自动测试执行。
它可以在将成为触发器的事件发生时调用。

在 GitHub Actions 上使用 ワークフローを起動する機能，
ビルド→デプロイまでのフローを自動化する 是这次的尝试。

GitHub Actions 也可用于免费帐户。
执行限制是固定的，您可以放心使用，因为未经许可不会向您收费。

【参考链接】：关于 GitHub Actions 的计费

游戏CI

之前我说过ビルド→デプロイまでのフローを自動化する，
这部分借用了 Game CI 的力量。

游戏 CI 已编译 Unityビルド用のワークフロー。
通过从 GitHub Actions 调用 Unityビルド用のワークフロー
ビルド→デプロイまでのフローを自動化する 将是可能的。

游戏 CI 是自由的可用于它是用圣人一样的思想开发/操作的。

【Unity】GitHub Actions × Game CIでWebGLのCI/CD環境構築(デプロイ先はNetlify)

【报价来源】：游戏CI

GitHub Actions x GameCI

现在，让我们实际移动 GitHub Actions 和 Game CI。

作为最低配置
PRがmasterにマージされたタイミングで自動ビルドするサンプル
我会尝试做

以下文章详细介绍了介绍的流程。
【参考链接】：使用 GameCI 使用 GitHub Actions 构建 Unity CI 环境

完成各种设置后，从 Add file for yml file 中选择 Create new file
将其添加到.github/workflows 下。
【Unity】GitHub Actions × Game CIでWebGLのCI/CD環境構築(デプロイ先はNetlify)

.github/workflows/webgl_build.yml

name: Build

on:
  # masterへのPRマージをトリガーとしてワークフローを開始する
  pull_request:
    branches:
      - master
    types: [closed]

  # 手動実行デバッグ用
  workflow_dispatch: {}

jobs:
  build:
    name: Build my project
    runs-on: ubuntu-latest
    steps:
      # Checkout
      - name: Checkout repository
        uses: actions/checkout@v3

      # Build
      - name: Build project
        uses: game-ci/unity-builder@v2
        env:
          UNITY_LICENSE: ${{ secrets.UNITY_LICENSE }}
        with:
          targetPlatform: WebGL
          unityVersion: 2022.1.13f1 # ここは各自プロジェクトに合わせて設定

这样就完成了自动构建。
您可以从存储库中的操作中检查成功或失败。

【Unity】GitHub Actions × Game CIでWebGLのCI/CD環境構築(デプロイ先はNetlify)

运行您自己的构建管道

在正常的 Unity 构建流程中，构建从 Build Settings 开始。
上面的最低配置示例与来自Build Settings 的构建流程相同。

另一方面，如果您构建自己的构建管道，情况会有所不同。
假设执行了具有以下最低配置的构建管道。

using UnityEditor;
using System.IO;
using System.Linq;

/// <summary>
/// 独自のビルドパイプラインを実行するEditor拡張
/// </summary>
public class CustomBuild : EditorWindow
{
    [MenuItem("MyTool/build/dev")]
    private static void DevBuild()
    {
        DoCustomBuildPipeLine();
    }

    /// <summary>
    /// 独自ビルドパイプライン実行
    /// </summary>
    private static void DoCustomBuildPipeLine()
    {
        //保存先のパス取得
        var path = EditorUtility.SaveFolderPanel("Choose Location", "", "");

        //パスが入っていれば選択されたとみなす（キャンセルされたら入ってこない）
        if (string.IsNullOrEmpty(path))
        {
            return;
        }

        //ビルドパイプライン設定
        var buildPlayerOptions = new BuildPlayerOptions
        {
            scenes = EditorBuildSettings.scenes.Where(s => s.enabled).Select(s => s.path).ToArray(),
            locationPathName = Path.Combine(path, "Custom Build"),
            target = BuildTarget.WebGL,
            options = BuildOptions.Development
        };

        //Build
        BuildPipeline.BuildPlayer(buildPlayerOptions);
    }
}

更改为调用上述 DevBuild 方法的机制的工作流程如下。
我刚刚添加了buildMethod: CustomBuild.DevBuild。

.github/workflows/webgl_build.yml

  # Build
  - name: Build project
    uses: game-ci/unity-builder@v2
    env:
      UNITY_LICENSE: ${{ secrets.UNITY_LICENSE }}
    with:
      targetPlatform: WebGL
      unityVersion: 2022.1.13f1 # ここは各自プロジェクトに合わせて設定
      # Dev Buildのメソッド呼び出し
      buildMethod: CustomBuild.DevBuild

然而，这有一个问题。
构建失败时，操作状态不会变为错误。
这使它看起来像是成功的，即使它失败了。

因此，将构建管道端的代码更改如下。

using UnityEditor;
using System.IO;
using System.Linq;
using UnityEditor.Build.Reporting;

/// <summary>
/// 独自のビルドパイプラインを実行するEditor拡張
/// </summary>
public class CustomBuild : EditorWindow
{
    [MenuItem("MyTool/build/dev")]
    private static void DevBuild()
    {
        DoCustomBuildPipeLine();
    }
    
    /// <summary>
    /// CICDのワークフローから実行する時はこちらを呼び出す
    /// </summary>
    private static void DevBuildForCICD()
    {
        DoCustomBuildPipeLine(true);
    }

    /// <summary>
    /// 独自ビルドパイプライン実行
    /// </summary>
    private static void DoCustomBuildPipeLine(bool isCICD = false)
    {
        //保存先のパス取得
        var path = EditorUtility.SaveFolderPanel("Choose Location", "", "");

        //パスが入っていれば選択されたとみなす（キャンセルされたら入ってこない）
        if (string.IsNullOrEmpty(path))
        {
            return;
        }

        //ビルドパイプライン設定
        var buildPlayerOptions = new BuildPlayerOptions
        {
            scenes = EditorBuildSettings.scenes.Where(s => s.enabled).Select(s => s.path).ToArray(),
            locationPathName = Path.Combine(path, "Custom Build"),
            target = BuildTarget.WebGL,
            options = BuildOptions.Development
        };

        //Build
        var report = BuildPipeline.BuildPlayer(buildPlayerOptions);
        var summary = report.summary;

        if (isCICD)
        {
            //成否に応じてUnityEditorの終了プロセスを決定する
            EditorApplication.Exit(summary.result == BuildResult.Succeeded ? 0 : 1);
        }
    }
}

将0传递给EditorApplication.Exit视为正常终止，传递1视为异常终止。

之后，如果以调用DevBuildForCICD的形式编写yml文件如下，
您也可以调用自己的构建管道并获取构建错误。

.github/workflows/webgl_build.yml

name: Build

on:
  # masterへのPRマージをトリガーとしてワークフローを開始する
  pull_request:
    branches:
      - master
    types: [closed]

  # 手動実行デバッグ用
  workflow_dispatch: {}

jobs:
  build:
    name: Build my project
    runs-on: ubuntu-latest
    steps:
      # Checkout
      - name: Checkout repository
        uses: actions/checkout@v3

      # Build
      - name: Build project
        uses: game-ci/unity-builder@v2
        env:
          UNITY_LICENSE: ${{ secrets.UNITY_LICENSE }}
        with:
          targetPlatform: WebGL
          unityVersion: 2022.1.13f1 # ここは各自プロジェクトに合わせて設定
          # Dev Buildのメソッド呼び出し
          buildMethod: CustomBuild.DevBuildForCICD

部署到 Netlify

现在已经实现了构建自动化，我们还将自动化部署。
我选择 Netlify 作为部署目标，这次我可以轻松尝试。

GitHub Pages 也是候选人，但为了在 GitHub Pages 上发布私有存储库
我跳过了它，因为我需要订阅 Pro 帐户。

GitHub Pages 可用于 GitHub Free 和 Organization GitHub Free 公共仓库、GitHub Pro、GitHub Team、GitHub Enterprise Cloud 以及 GitHub Enterprise Server 公共和私有仓库。

【报价来源】：关于 GitHub 页面

首先，部署到 Netlify 的站点 ID 和访问令牌
它必须在相关存储库的 Secrets 中设置。

【Unity】GitHub Actions × Game CIでWebGLのCI/CD環境構築(デプロイ先はNetlify)

下面的链接中有详细信息，包括如何使用工作流程。
【参考链接】：Netlify 部署

添加了部署流程的 yml 文件如下所示。

.github/workflows/webgl_build.yml

name: Build and deploy

on:
  # masterへのPRマージをトリガーとしてワークフローを開始する
  pull_request:
    branches:
      - master
    types: [closed]

  # 手動実行デバッグ用
  workflow_dispatch: {}
  
env:
  target : Dev_Build

jobs:
  build:
    name: Build my project
    runs-on: ubuntu-latest
    steps:
      # Checkout
      - name: Checkout repository
        uses: actions/checkout@v3

      # Build
      - name: Build project
        uses: game-ci/unity-builder@v2
        env:
          UNITY_LICENSE: ${{ secrets.UNITY_LICENSE }}
        with:
          targetPlatform: WebGL
          unityVersion: 2022.1.13f1 # ここは各自プロジェクトに合わせて設定
          
      # Builder で出力した WebGL ビルドをアーティファクトでダウンロード可能にする
      - name: Upload the WebGL Build
        uses: actions/upload-artifact@v3
        with:
          name: ${{ env.target }}
          path: ${{ env.target }}
          
  # NetlifyへのDeploy処理
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest

    steps:
     # Builder で出力した WebGL ビルドをダウンロード
     - name: Download artifact
       uses: actions/download-artifact@v3
       with:
         name: ${{ env.target }}
         path: ${{ env.target }}

     # ダウンロードしたビルドファイルをNetlifyへDeploy
     - name: Deploy to Netlify
       uses: netlify/actions/cli@master
       env:
         NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
         NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_FOR_DEV }}
       with:
         args: deploy --dir=${{ env.target }} --prod

特别值得注意的是工件的处理。
什么是神器工作流工件指
日志和测试结果也可作为工件使用。

【参考链接】：将工作流数据存储为工件

这次我们将使用ビルド結果のフォルダ一式 作为工件。
直至部署的工作流流程如下。

1. 构建
2. 将构建结果文件夹集上传到任意位置
3.下载构建结果文件夹集
4.将下载的构建结果文件夹集部署到Netlify

上传一次感觉有点奇怪，
由于 Game CI 构建完成后，构建结果文件夹集将被清理，
如果没有这种方法，我认为你不会成功。
（我不确定，所以如果我错了请评论）

工件默认存储 90 天。
您可以在存储库设置中更改它。也可以通过写入 yml 文件来单独更改。

储存期为 5 天的示例

  - name: Upload Artifact
    uses: actions/upload-artifact@v3
    with:
      name: my-artifact
      path: my_file.txt
      retention-days: 5

【参考链接】：为组织中的 GitHub Actions 工件和日志配置保留期
【参考链接】：保留期

通知 Slack

到目前为止的工作流程已经足够高效，
如果需要，您需要结果的通知功能。

所以这次回复デプロイまでのワークフローの結果の成否
我添加了一个向 Slack 发送通知的流程。

使用以下存储库工作流程：
它还提到了设置传入的 WebHooks这非常方便，因为您只需要设置
【参考链接】：Slack 通知 - GitHub 操作

.github/workflows/webgl_build.yml

name: CICD workflow

on:
  # masterへのPRマージをトリガーとしてワークフローを開始する
  pull_request:
    branches:
      - master
    types: [closed]

  # 手動実行デバッグ用
  workflow_dispatch: {}
  
env:
  target : Dev_Build

jobs:
  build:
    name: Build my project
    runs-on: ubuntu-latest
    steps:
      # Checkout
      - name: Checkout repository
        uses: actions/checkout@v3

      # Build
      - name: Build project
        uses: game-ci/unity-builder@v2
        env:
          UNITY_LICENSE: ${{ secrets.UNITY_LICENSE }}
        with:
          targetPlatform: WebGL
          unityVersion: 2022.1.13f1 # ここは各自プロジェクトに合わせて設定
          
      # Builder で出力した WebGL ビルドをアーティファクトでダウンロード可能にする
      - name: Upload the WebGL Build
        uses: actions/upload-artifact@v3
        with:
          name: ${{ env.target }}
          path: ${{ env.target }}
          
  # NetlifyへのDeploy処理
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest

    steps:
     # Builder で出力した WebGL ビルドをダウンロード
     - name: Download artifact
       uses: actions/download-artifact@v3
       with:
         name: ${{ env.target }}
         path: ${{ env.target }}

     # ダウンロードしたビルドファイルをNetlifyへDeploy
     - name: Deploy to Netlify
       uses: netlify/actions/cli@master
       env:
         NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
         NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_FOR_DEV }}
       with:
         args: deploy --dir=${{ env.target }} --prod
         
  # Slackへの成功通知処理 
  NotifySucceed:
    if: ${{ success() }}
    name: Notify succeed
    # ほかのjobの結果を待つ
    needs: [build, deploy]
    runs-on: ubuntu-latest
    
    steps:
      - name: Nofity build and deploy succeed
        uses: rtCamp/action-slack-notify@v2
        env:
          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK_URL }}
          SLACK_USERNAME: GitHub Actions
          SLACK_TITLE: Workflow succeeded
          SLACK_MESSAGE: 'https://hogehoge-kento.netlify.app/'
           
  # Slackへの失敗通知処理 
  NotifyFailure:
    if: ${{ failure() }}
    name: Notify failure
    # ほかのjobの結果を待つ
    needs: [build, deploy]
    runs-on: ubuntu-latest
    
    steps:
      - name: Nofity build or deploy failure
        uses: rtCamp/action-slack-notify@v2
        env:
          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK_URL }}
          SLACK_USERNAME: GitHub Actions
          SLACK_TITLE: Workflow failed
          SLACK_COLOR: danger
          SLACK_MESSAGE: 'Run number : #${{ github.run_number }}'

needs: [ジョブ名] 可以等待其他工作完成。
这一次，等待构建和部署作业完成，
根据成功或失败，我们有单独的工作流向 Slack 发送通知。

如果将部署目标的链接粘贴到消息中
这很方便，因为您可以按原样从 Slack 检查已部署的构建。

缓存

我在构建点缓存库文件夹。

但是，如果缓存键相同，即使缓存有变化，
假定该键的缓存已经存在，
这是一个没有创建新缓存的规范。

使用此规范，如果有一个级别更改会大大改变 Library 文件夹的内容，
缓存不会更新，导致额外的构建时间。

所以，这一次，通过将日期与键相关联，
引入了一种定期更新缓存的机制。

以下只是相关的摘录。
这是一个在整个月的时间更新缓存的示例。

跨月时更新缓存的示例

  # 年月日を取得　キャッシュのkeyに利用
  - name: Set current datetime as env variable
    env:
      TZ: 'Asia/Tokyo' # タイムゾーン指定
    run: echo "CURRENT_DATETIME=$(date +'%Y-%m')" >> $GITHUB_ENV
    
  # キャッシュ keyを月跨ぎで更新することで定期的にキャッシュ自体の更新を行う
  - uses: actions/cache@v3
    with:
      path: Library
      key: "Library_${{ env.CURRENT_DATETIME }}"

根据您的项目更新频率，
缓存更新频率可以调整为日/月/年。

我敢肯定有更好的方法来做到这一点，
根据项目的需要改变它似乎是可取的。

调试

修改构建管道等时
有一个针对任意分支运行工作流的请求。

因此，指定一个分支名称并签出到该分支，
我们提供了一个调试工具来运行工作流。（见下图）
【Unity】GitHub Actions × Game CIでWebGLのCI/CD環境構築(デプロイ先はNetlify)

以下只是相关的摘录。

on:
  # Debug用にActionsメニューからGUIでActionを走らせることを許容する
  workflow_dispatch: 
    # 入力欄の定義
    inputs: 
      ref:
        description: "ref"
        required: false
        default: ""
        
jobs:
  # ビルド処理
  build:
    name: Run the WebGL build
    runs-on: ubuntu-latest
    steps:
      # 作業ディレクトリにUnity プロジェクトの中身をダウンロードしてくる
      - name: Check out my unity project.
        uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - run: git checkout ${{ github.event.inputs.ref }}
        if: ${{ github.event.inputs.ref != '' }} # ref が指定されていたら git checkout

【参考链接】：通过使用 GitHub Actions 签出特定提交来运行工作流

完整的工作流程

最后，我将发布完成的工作流程。

name: CICD workflow

on:
  # masterへのPRマージをトリガーとしてワークフローを開始する
  pull_request:
    branches:
      - master
    types: [closed]

  # Debug用にActionsメニューからGUIでActionを走らせることを許容する
  workflow_dispatch: 
    # 入力欄の定義
    inputs: 
      ref:
        description: "ref"
        required: false
        default: ""
  
env:
  target : Dev_Build

jobs:
  build:
    name: Build my project
    runs-on: ubuntu-latest
    steps:
      # 作業ディレクトリにUnity プロジェクトの中身をダウンロードしてくる
      - name: Check out my unity project.
        uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - run: git checkout ${{ github.event.inputs.ref }}
        if: ${{ github.event.inputs.ref != '' }} # ref が指定されていたら git checkout

      # Build
      - name: Build project
        uses: game-ci/unity-builder@v2
        env:
          UNITY_LICENSE: ${{ secrets.UNITY_LICENSE }}
        with:
          targetPlatform: WebGL
          unityVersion: 2022.1.13f1 # ここは各自プロジェクトに合わせて設定
          
      # Builder で出力した WebGL ビルドをアーティファクトでダウンロード可能にする
      - name: Upload the WebGL Build
        uses: actions/upload-artifact@v3
        with:
          name: ${{ env.target }}
          path: ${{ env.target }}
          
  # NetlifyへのDeploy処理
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest

    steps:
     # Builder で出力した WebGL ビルドをダウンロード
     - name: Download artifact
       uses: actions/download-artifact@v3
       with:
         name: ${{ env.target }}
         path: ${{ env.target }}

     # ダウンロードしたビルドファイルをNetlifyへDeploy
     - name: Deploy to Netlify
       uses: netlify/actions/cli@master
       env:
         NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
         NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_FOR_DEV }}
       with:
         args: deploy --dir=${{ env.target }} --prod
         
  # Slackへの成功通知処理 
  NotifySucceed:
    if: ${{ success() }}
    name: Notify succeed
    # ほかのjobの結果を待つ
    needs: [build, deploy]
    runs-on: ubuntu-latest
    
    steps:
      - name: Nofity build and deploy succeed
        uses: rtCamp/action-slack-notify@v2
        env:
          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK_URL }}
          SLACK_USERNAME: GitHub Actions
          SLACK_TITLE: Workflow succeeded
          SLACK_MESSAGE: 'https://hogehoge-kento.netlify.app/'
           
  # Slackへの失敗通知処理 
  NotifyFailure:
    if: ${{ failure() }}
    name: Notify failure
    # ほかのjobの結果を待つ
    needs: [build, deploy]
    runs-on: ubuntu-latest
    
    steps:
      - name: Nofity build or deploy failure
        uses: rtCamp/action-slack-notify@v2
        env:
          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK_URL }}
          SLACK_USERNAME: GitHub Actions
          SLACK_TITLE: Workflow failed
          SLACK_COLOR: danger
          SLACK_MESSAGE: 'Run number : #${{ github.run_number }}'

参考链接

使用 GithubActions 了解环境变量。
有效管理 GitHub Actions 工件以部署版本
使用 Slack 提供的 GitHub 操作“slack-send”从 GitHub 通知 Slack
获得一个在您推送时自动运行 Unity 构建的环境
[GitHubActions] 自动上传和发布 UnityPackage
GitHub Actions 工作流程中的作业控制
出口和出口1的区别
GitHub 操作说明
在 GitHub Actions 中获取当前日期和时间

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308628186.html