あなたのチームは、コードの手動パッケージングに多くの労力を費やしていますか？もしそうなら、GitHub Actions Artifactsを使用する時期です。これにより、チームはこの手順を自動化することができます。同時に、リリースの変動性を減らし、他の重要なタスクに取り組むための時間を節約することができます。
GitHub Actions Artifactsを使用すると、アクティブなジョブから別のジョブへのデータの効果的な転送が可能となり、展開に関わる繰り返し作業や時間のかかるタスクを省略することができます。このチュートリアルでは、ReactアプリケーションをNetlifyにデプロイするためのアーティファクトの使用と管理方法について学びます。
続けて、一貫したデプロイを作成しましょう！
前提条件
このチュートリアルは実践的なデモンストレーションとなります。一緒に進める場合は、シンプルなReactアプリケーションとGitHubリポジトリが必要です。このチュートリアルでは、React Counter Appリポジトリを使用します。
CI/CDワークフローの構築
GitHub Actionsワークフローのジョブが終了すると、それらが処理および生成したデータも終了します。ジョブの完了後もリポジトリページに保持されるデータであるアーティファクトを、upload-artifactアクションを使用してアップロードすることができます。
ただし、デプロイリリースにGitHub Actionsアーティファクトを使用する前に、アプリケーションのためのCI/CDワークフローをまず構築する必要があります：
1. アプリケーションのルートディレクトリに.githubフォルダを作成し、workflowsというサブフォルダを作成します。
2. 次に、workflowsフォルダ内にワークフローファイル（.ymlファイル）を作成します。ファイル名は任意ですが、このチュートリアルではci.ymlという名前にします。
以下は、ファイルのワークフローリソース構造の一例です。
3. 次に、以下のコードをci.ymlファイルに追加し、変更を保存します。以下のコードは、アプリケーションのビルドジョブを持つCIという名前のワークフローを作成します。
4. これで変更を追加してコミットし、リモートのGitHubリポジトリにプッシュします。
プッシュが成功した場合、以下のようにアンバーカラーのサークル付きのコミットが表示され、ワークフローが実行されていることが示されます。
5. [Actions]タブをクリックしてワークフローを表示します。
6. 左側のビルドジョブをクリックし、[Build app job]を展開します。ビルドジョブのデータ（静的ファイル）が生成されます。これらはデプロイに必要なファイルです。
これらの生成されたファイルは、ジョブを実行しているサーバーが廃棄される（またはジョブが終了する）と失われます。デプロイにこれらのファイルが必要なので、次のセクションではこれらのファイルをアーティファクトとしてアップロードする手順を実装します。
7. 最後に、ビルドジョブのステップブロックの下でテストを実行する後に、以下のコードを追加してください。
以下のコードは、actions/upload-artifact@v3アクションを使用してビルドディレクトリからproductionという名前のアーティファクトをアップロードします。
生成されたファイルは、ジョブを実行しているサーバーが廃棄されるか、ジョブが終了すると失われます。デプロイメントにこれらのファイルが必要なので、以下のコードは、それらを取得してアーティファクトとしてアップロードする手順を実装します。
カスタムアーティファクト保持期間の設定
デフォルトでは、アーティファクトは消去される前に90日間保存されます。ただし、リポジトリの種類によっては、この保持期間を変更できます。
以下に、カスタムアーティファクト保持期間をカスタマイズするために設定できる値を示します：
- プライベートリポジトリ –
1から400日までの任意の値。 - パブリックリポジトリ –
1から90日までの任意の値のみ。
カスタムアーティファクト保持期間を設定するには、ワークフローのYAMLファイルを更新し、# アーティファクトのアップロードステップにretention-days: 2を含めます。
または、GitHubを介して以下の手順でアーティファクトの保持期間を設定します：
- リポジトリの設定タブに移動します。
- アクション（左パネル）をクリックしてドロップダウンを展開し、一般を選択します。
- 以下の「アーティファクトおよびログの保持期間」セクションに、アーティファクトを保持する日数を入力し、保存をクリックします。
GitリポジトリからNetlifyへのプロジェクトのインポート
アップロードステップを持つため、ワークフロー内の別のジョブからビルドアーティファクトにアクセスできるため、ワークフローの完了時間が短縮されます。ワークフローにデプロイタスクを追加し、そのジョブのステップの1つでアップロードされたアイテムをダウンロードします。
ただし、ワークフローを更新する前に、Netlifyをアプリのデプロイ用に設定します：
1. 好きなウェブブラウザを開き、Netlifyに移動し、GitHubでログインします。
2. ログインしたら、サイトセクションの「新しいサイトを追加」をクリックし、既存のプロジェクトをインポートするために「既存のプロジェクトをインポート」を選択します。
3. このチュートリアルでGitHub上で作成したリポジトリを使用するので、GitHubをクリックします。GitHubへのアクセスをNetlifyに許可するためのポップアップウィンドウが表示されます。
4. 許可したら、インポートしたいリポジトリを検索し、選択します。
5. 新しいページで、サイトの基本的なビルド設定（デプロイするブランチやビルドコマンドなど）を設定します。ただし、GitHubアクションを使用してデプロイするため、ビルドコマンドと公開ディレクトリのフィールドは空白のままにしておきます。
ビルド設定を構成した後、[サイトのデプロイ] をクリックし、サイトがデプロイされていることを確認します。デプロイが完了すると、サイトのためのライブリンクが生成されます。
ビルドコマンドのフィールドを空白にした場合、リンクにアクセスするとアプリがビルドされていないため、404ページが表示されます。
6. 次に、[サイトの設定] をクリックして、サイト情報（ステップ6）を確認します。
7. 最後に、[サイトの詳細] ページで、サイト情報セクションの下にあるサイトIDをメモして、後で使用します。
パーソナルアクセストークンの作成
サイトIDを取得したので、アクセストークンを取得する必要があります。パーソナルアクセストークンは、Netlifyアカウントへのアクセスを許可し、GitHub ActionsがNetlifyでのデプロイを実行できるようにします。
1. プロフィールアイコン（右上）をクリックし、[ユーザー設定] を選択してプロフィール設定にアクセスします。
2. 新しいページで、[アプリケーション]（左パネル） → [新しいアクセストークン]（パーソナルアクセストークンセクションの下）をクリックして、新しいアクセストークンの作成を開始します。
3. 新しいページで、トークンの説明的な名前を入力し、[トークンの生成] をクリックします。
4. 今、トークンを安全な場所にコピーします。
サイトIDとアクセストークンの保護：シークレットの作成
NetlifyからサイトIDとアクセストークンを取得したので、これらをリポジトリに追加してアクションのワークフローで使用することができます。ただし、まずサイトIDとアクセストークンを保護するために、シークレットを作成する必要があります。
1. ブラウザでGitHubリポジトリに移動します。
2. 次に、設定タブをクリックして、シークレット（左側のパネル）→ アクション（シークレットの下）をクリックして、リポジトリで利用可能なアクションのリストにアクセスします。
3. アクションのシークレットページで、新しいシークレットを追加するために「新しいリポジトリシークレット」をクリックします。
4. 新しいシークレットのために記述的な名前を提供します。ただし、このチュートリアルではシークレット名としてNETLIFY_AUTH_TOKENを使用します。
アクセストークンを値として追加し、「シークレットを追加」をクリックして新しいシークレットを作成します。
5. 最後に、ステップ4を繰り返し、今度はサイトのIDのためのシークレットを追加します。
追加されると、以下のようにリポジトリシークレットセクションにシークレットが表示されます。
Netlifyへのアーティファクトのダウンロードと展開
Netlifyサイトとシークレットが設定されたので、ワークフローにNetlifyへの展開ステップを含めます。
1. アップロードされたアーティファクトをダウンロードするためのデプロイジョブを含む下記のコードをワークフローに追加します。
以下のコードには、アップロードされたアーティファクトをダウンロードする手順と、それをNetlifyに展開する別の手順が含まれています。
ATAのGitHubリポジトリでci.ymlファイルの完全なコードを見つけることができます。
2. 次に、変更をリモートリポジトリに追加してプッシュします。
リポジトリのワークフローページで最新のコミットが実行されているのが表示されるはずです。
コミットが完了したら、詳細を表示するために最新の実行をクリックしてください。
ジョブが正常に実行された場合、ジョブの横に緑色のチェックマークが表示され、ページの下部には本番用のアーティファクトが表示されます。
3. 今度は、デプロイジョブ（左パネル）をクリックし、Netlifyへのデプロイタスクを展開します。ステップの出力が表示され、ウェブサイトのURLが含まれています。
ウェブサイトのURLをクリックして、サイトが動作しアクセスできることを確認してください。
URLは自動的に新しいタブでウェブブラウザで開きます。この出力は、サイトが正常に動作していることを示しています。
使用されていないアーティファクトを削除してスペースを節約する
各リリースごとに、新しいリリースをアップロードしてダウンロードするためにディスクスペースをより多く使用します。スペースを節約するにはどうすればよいですか？使用されないアーティファクトを削除することが最も有効な解決策です。各サーバ上に存在するリリースアーティファクトの数を制限し、数千のリリースやディスクのフル状態の蓄積を防止する必要があります。
一定期間設定を使用してアーティファクトを削除する以外にも、GitHubのワークフローページからアーティファクトを削除することもできます：
ワークフローページで、削除アイコンをクリックしてアーティファクトを削除します。
次に、削除の確認プロンプト（最上部）でOKをクリックします。
以下のように、アーティファクトがページに表示されなくなり、削除が成功したことが確認できます。
結論
アーティファクトを使用することで、ワークフロー間で情報を提供するより複雑な自動化を簡素化できることがわかりました。これにより、GitHub Actionsのアーティファクトの使用方法と、リリースのデプロイにどのように使用できるかについて、より理解を深めることができます。
この新たな知識を活用して、次のプロジェクトのワークフロー自動化にGitHub Actionsを活用してみませんか？
Source:
https://adamtheautomator.com/github-actions-artifacts-2/