2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@ry-harada(Ryotaro Harada)inKDDI株式会社

GitHub Enterprise ServerでもAmplifyにCI/CDパイプラインを使ってデプロイしたい！

2
Last updated at Posted at 2026-02-24

あらすじ

「うぇーん助けてドラ◯もん〜！GitHub Enterprise ServerでもCI/CDパイプラインでAmplifyにデプロイできる道具出してよ〜！」
「しょうがないなぁ〜、はい、GitHub Actions〜！(ﾃｯﾃﾚｰ)」

背景

最近Amplifyに入門しているのですが、GitHubとAmplifyを接続することで簡単にCI/CDパイプラインが構築できます。
ところがGitHub Enterprise Server(オンプレミスまたは自社管理環境にデプロイできるGitHub製品)はソースコードプロバイダーとして対応していないので、コード管理にGitHub Enterprise Serverを使っている場合は別の方法でCI/CDパイプラインを構築する必要があります。

スクリーンショット 2026-02-19 14.27.09.png

要望は出ていますが、2026/2/20現在機能実装されていません。

前提

あらかじめ、GitHub上にリポジトリが作成されているものとします。また、Amplify Gen2環境となります。

今回、ビルド環境としてAWS CodeBuildを利用しています。他の方法でビルド環境を用意している場合はワークフローの内容で一部差分があると思いますのでご注意ください（yaml中のruns-onで差分が出ると思います）。
また、デプロイ先のリージョンはCodeBuild環境があるリージョンと同一になります。

手順

デプロイ用のフロントエンド作成

Amplifyにデプロイする用のフロントエンドのコードを用意します。

テンプレートからVite + React作成

npm create vite@latest amplify_gha_deploy -- --template react-ts

すべてデフォルトの選択肢を使用しています。作成完了後、ローカルの画面でVite+Reactの画面が表示されます。

Amplifyにデプロイするための準備

その後、Amplifyを使えるようにします。上記で作成されたディレクトリ内でnpm create amplify@latestを実行するとamplifyディレクトリが作成されます。バックエンドの定義も含めて作成されます。

cd amplify_gha_deploy
npm create amplify@latest

GitHub Actionsワークフローの作成

先にGitHub Actionsのワークフローを作成します。まず全体像がこちら。

.github/workflows/deploy.yaml
name: deploy

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  deploy:
    runs-on: codebuild-<$CodeBuild環境の名前>-${{ github.run_id }}-${{ github.run_attempt }}
    permissions:
      contents: read
    env:
      AMPLIFY_APP_ID: ${{ vars.AMPLIFY_APP_ID }}
      AMPLIFY_ENV_NAME: "main"

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install npm packages
        run: npm ci

      - name: Backend deploy
        run: |
          npx ampx pipeline-deploy \
            --branch ${{ env.AMPLIFY_ENV_NAME }} \
            --app-id ${{ env.AMPLIFY_APP_ID }}

      - name: Frontend build and zip
        run: |
          npm run build
          cd dist && zip -r ../dist.zip . && cd -

      - name: Frontend deploy
        run: |
          RESPONSE=$(aws amplify create-deployment \
            --app-id ${{ env.AMPLIFY_APP_ID }} \
            --branch-name ${{ env.AMPLIFY_ENV_NAME }})
          JOB_ID=$(echo $RESPONSE | jq -r '.jobId')
          ZIP_URL=$(echo $RESPONSE | jq -r '.zipUploadUrl')

          curl -X PUT -T "./dist.zip" -H "Content-Type: application/zip" "$ZIP_URL"

          aws amplify start-deployment \
            --app-id ${{ env.AMPLIFY_APP_ID }} \
            --branch-name ${{ env.AMPLIFY_ENV_NAME }} \
            --job-id $JOB_ID

以下コードの内容解説です。

name: deploy

on:
  push:
    branches:
      - main
  workflow_dispatch:

nameはワークフローの名前です。省略も可能ですが、基本記載した方が良いです。
onはワークフロー実行のトリガーとなるイベントを示すもので、今回はmainブランチにpushされた時と手動実行時(workflow_dispatch)に実行できるようしています。

jobs:
  deploy:
    runs-on: codebuild-<$CodeBuild環境の名前>-${{ github.run_id }}-${{ github.run_attempt }}
    permissions:
      contents: read
    env:
      AMPLIFY_APP_ID: ${{ vars.AMPLIFY_APP_ID }}
      AMPLIFY_ENV_NAME: "main"

jobsでは各ジョブがruns-onで指定された環境で実行されます。permissionsはcontents: readだけで十分でした。envは環境変数で、この後利用する変数を記載しています。

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install npm packages
        run: npm ci

以降は実際にGitHub Actionsで実行される処理です。まず、フロントエンドで利用している依存パッケージをインストールします。

      - name: Backend deploy
        run: |
          npx ampx pipeline-deploy \
            --branch ${{ env.AMPLIFY_ENV_NAME }} \
            --app-id ${{ env.AMPLIFY_APP_ID }}

その後、後述するAmplifyアプリとブランチの組み合わせに対してバックエンドをデプロイします。npm create amplify@latestでデフォルトテンプレートとしてauthリソースが定義されているため、Amazon Cognitoユーザープールが作成されます。

      - name: Frontend build and zip
        run: |
          npm run build
          cd dist && zip -r ../dist.zip . && cd -

フロントエンドのビルドとzip化をしています。この手順はローカルでビルドして、マネコン上でアップロードするときのものと同等です。

      - name: Frontend deploy
        run: |
          RESPONSE=$(aws amplify create-deployment \
            --app-id ${{ env.AMPLIFY_APP_ID }} \
            --branch-name ${{ env.AMPLIFY_ENV_NAME }})
          JOB_ID=$(echo $RESPONSE | jq -r '.jobId')
          ZIP_URL=$(echo $RESPONSE | jq -r '.zipUploadUrl')

          curl -X PUT -T "./dist.zip" -H "Content-Type: application/zip" "$ZIP_URL"

          aws amplify start-deployment \
            --app-id ${{ env.AMPLIFY_APP_ID }} \
            --branch-name ${{ env.AMPLIFY_ENV_NAME }} \
            --job-id $JOB_ID

最後に、zip化されたビルド成果物をデプロイします。

アプリ作成

既存のAmplifyアプリ/ブランチがある場合、本手順は不要です。コンソールからデプロイする場合、ビルドされた生成物のアップロードが必須のため、今回はAWS CLIで実施します。

Amplifyアプリの作成

aws amplify create-app --name amplify_gha_deploy --platform WEB --region ap-northeast-1

ブランチの作成

任意のブランチ名でブランチを作成します。

aws amplify create-branch --app-id <appId> --branch-name main --region ap-northeast-1

CodeBuildのサービスロールに権限追加

CodeBuildでデプロイする際、今回は下記権限が必要になるため、CodeBuildで使われているロールに追加します。

  • amplify:CreateDeployment
  • amplify:StartDeployment
  • AmplifyBackendDeployFullAccess(バックエンドリソースをデプロイする場合)

GitHubのパラメータを設定

ワークフローの中のenvでAMPLIFY_APP_ID: ${{ vars.AMPLIFY_APP_ID }}という記載があったと思いますが、これはGitHub上で設定した変数を参照しています。AMPLIFY_APP_IDはaws amplify create-appコマンドのレスポンスの値、もしくはAmplifyコンソールから確認できるアプリIDのことです。
スクリーンショット 2026-02-21 22.35.34.png

この値をGitHubの画面で設定します。
GitHub上のリポジトリにある、「Settings」から「Secrets and variables > Actions」を選択します。SecretsとVariablesの項目がありますが、Variablesを選択し、「Manage environment variables」から新しくNameを「AMPLIFY_APP_ID」、Valueを先ほど確認したアプリIDで設定します。
スクリーンショット 2026-02-19 13.47.35.png

動作確認

ここまでで設定は完了したので、mainブランチにpushして動作を確認します。
スクリーンショット 2026-02-19 14.00.12.png

無事にワークフローが完了し、Amplifyコンソールからもデプロイされていることが確認できました。

https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_2448259_d01987d9-f96c-4c7c-8cca-ea87c84401f8.avif

実際にURLアクセスすると、Vite+Reactの初期画面が表示され、うまく行っていることが確認できます。
スクリーンショット 2026-02-19 13.59.48.png

Cognitoのユーザープールも作成されていることを確認しました。

補足

さて、今回はAMPLIFY_ENV_NAMEをmainに固定したワークフローを実行しました。実際の開発では、商用環境以外にもステージング環境や開発環境を用意することがあると思います。Amplifyでは追加のブランチ（環境）を用意することで商用にデプロイする前に動作確認等を行うことができます。もちろん、GitHub Actionsでも実現できるのでやってみました。

Amplifyのブランチを用意

作成したAmplifyアプリのIDを含めて新規ブランチを作成します。今回はdevという名前で作りました。

aws amplify create-branch --app-id <作成済みのアプリID> --branch-name dev --region ap-northeast-1

ワークフローの書き換え

ワークフローのyamlファイルを一部修正します。
ワークフローの実行トリガーに、GitHubのdevブランチにpushを追加します。また、AMPLIFY_ENV_NAMEで対応する環境を取得できるようにしています。(${{ github.ref_name }}でブランチ名が取得できるんですね)

deploy.yaml
name: deploy

on:
  push:
    branches:
      - main
+      - dev
  workflow_dispatch:

jobs:
  deploy:
    runs-on: codebuild-snoopy-runner-${{ github.run_id }}-${{ github.run_attempt }}
    permissions:
      contents: read
    env:
      AMPLIFY_APP_ID: ${{ vars.AMPLIFY_APP_ID }}
-     AMPLIFY_ENV_NAME: "main"
+     AMPLIFY_ENV_NAME: ${{ github.ref_name }}

このワークフローでdevブランチに同じコードをpushしました。

バッチリです！
https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_2448259_396ff063-7ace-40e2-8ee5-bfad7ee58f4b.avif

まとめ

今回はGitHub Enterprise環境下でAmplifyを活用するGitHub Actionsを紹介しました。様々な制約があっても何とかなるのでAmplifyを活用したいですね！

参考

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?