GitLab をリポジトリとして使う AWS Amplify Hosting でのアプリケーションのデプロイ方法

今日の変化の激しいデジタル環境においては、企業や開発者が Web アプリケーションを迅速かつ安全にデプロイする効率的な方法を常に求めています。AWS Amplify Gen2は、GitLab の堅牢なバージョン管理システムと組み合わせることで、このチャレンジに対する効果的なソリューションを提供します。AWS Amplify Hosting では様々なリポジトリの選択肢をサポートしていますが、このブログでは GitLab をリポジトリとして使う AWS Amplify Hosting でのアプリケーションのデプロイ方法をご紹介します。

AWS Amplify Gen2 は、フロントエンド開発者が AWS 上でフルスタックアプリケーションを構築する方法を提供しています。TypeScript、ファイル規約、Git ブランチベースの環境を使用して、フロントエンドとバックエンドを定義できます。GitLab の強力なバージョン管理および継続的インテグレーションと継続的デプロイ (CI/CD) 機能と組み合わせることで、このソリューションは Web アプリケーションのシームレスで自動化されたデプロイを可能にし、一貫性を確保し、手動操作によるエラーのリスクを低減します。

このブログでは、GitLab をリポジトリとして使用し、AWS Amplify Hosting をデプロイプラットフォームとして使用して Web アプリケーションをデプロイするプロセスを説明します。このワークフローの簡素さと効率を活用する方法を学び、AWS Amplify Gen 2 がデプロイの複雑さを処理しながら、優れたアプリケーションの構築に集中できるようになります。

前提条件

はじめに必要な作業は次のとおりです。

GitLab アカウントとプロジェクトを作成する: GitLab に登録し、新しいプロジェクトを作成します。
IDE を開く:お好みの開発環境を起動します。
React TypeScript + Vite アプリと Amplify Gen 2 バックエンドをセットアップする:
- ターミナルでコマンド npm create vite@latest react-amplify-gen2 -- --template react-ts を使用して、Vite で TypeScript を使用する新しい React アプリを作成します。
- コマンド cd react-amplify-gen2 で新しく作成したディレクトリに移動し、npm install でプロジェクトの依存関係をインストールします。
- npm create amplify@latest を実行して、GitLab リポジトリで Amplify Gen2 を設定します。このコマンドは、GitLab リポジトリで Amplify Gen2 の設定を検出するために不可欠です。
- AWS アカウントを設定し、Amplify で使用するために AWS プロファイルをローカルに設定します。
変更をコミットしてプッシュする
- セットアップが完了したら、変更をすべてコミットし、GitLab リポジトリにプッシュします。

前提条件を完了した後、以下の手順を実行します。

AWS Amplify Hosting にホストするアプリケーションの作成
GitLab アカウントへの AWS Amplify のアクセスを承認
リポジトリとして GitLab を使用したサンプルアプリのデプロイ

React アプリケーションを AWS Amplify Hosting にホスティングする方法

始めるには、Amplify コンソールにサインインしてください。AWS Amplify のホームページから始める場合は、図 1 に示されているように、ページの上部にある Create new app を選択します。

図 1: AWS Amplify で新規のアプリケーション作成

すでに存在する Amplify アプリがある場合は、単に All apps タブから Create new app を選択します (図 2)。まず初めに、ソースコードプロバイダを選びましょう。図 3 に示すように、Choose source code provider ウィンドウで GitLab を選択してください。

図 2: AWS Amplify で新規のアプリケーションを追加

GitLab をソースコードプロバイダとして選択したら、下にスクロールして次へを選択してください。

まずはリポジトリブランチを追加しましょう。AWS Amplify は GitLab にサインインしてアクセス許可を得るためのポップアップウィンドウを開きます (図 4)。
前提条件の手順 1 「GitLab アカウントとプロジェクトを作成」で作成した資格情報を使って GitLab にサインインしてください。

図 3: AWS Amplify でソースコードプロバイダの選択

GitLab アカウントにサインインすると、認証ページにリダイレクトされます。
GitLab 認証ページで、図 5 で示すように Authorize を選択してください。

図 5: GitLab アカウントに AWS Amplify がアクセスできるように承認

注意 — Amplify コンソールを Bitbucket、GitLab、または AWS CodeCommit で認証すると、Amplify はリポジトリプロバイダからアクセストークンを取得しますが、そのトークンは AWS サーバーに保存されません。Amplify は特定のリポジトリにインストールされているデプロイキーを使用してリポジトリにアクセスします。

次に、Add repository branch (図 6) でリポジトリとブランチを選択します。Amplify Gen 2 は、Nx や Yarn Workspaces などのモノレポツールを使用したフルスタックビルドのための monorepo ワークフローをサポートしていることに注目する価値があります。

図 6: AWS Amplify でリポジトリとブランチを選択

リポジトリブランチを追加するための必須項目を入力したら、Next を選択してください。

アプリケーション設定を見直しましょう。AWS Amplify は自動的にアプリ名、フロントエンドのビルドコマンド、ビルド出力ディレクトリを設定し、必要なサービスロールを作成します。
また、必要に応じてアプリ名、フロントエンドのビルドコマンド、ビルド出力ディレクトリなど、Amplify が設定した項目を変更することもできます (図 7)。

図 7: AWS Amplify でアプリケーションの設定をレビュー

AWS Amplify コンソールの Service role と Advanced settings を確認してください。サービスロールは、ユーザーに代わってアクションを実行するために必要です。
また、高度な設定では、デフォルトのビルドコンテナを使用するか、自身で作成したコンテナーイメージを使用することもでき、環境変数を追加したり、アプリケーションのためのパッケージやツールのインストール済みバージョンを上書きすることができます。

終わったら、Next を選択してください。

アプリケーションの詳細を確認しましょう。アプリケーションをデプロイする前に設定ミスがある場合は、修正することができます。修正が必要なフィールドでは Edit を選択してください (図 8)。

図8: AWS Amplify 経由でデプロイする前のアプリの詳細と設定の確認

Save and deploy を選択してください。
AWS Amplify が Web アプリケーションをデプロイするのに数分かかります。

図 9: ホスティングされたアプリへのアクセス

アプリケーションをデプロイしたら、Visit deployed URL を選択するか、Domainの下に提供された URL にアクセスすることで、図 9 のように Web アプリケーションを表示できます！

Vite + React app

アプリケーションコードの更新 (オプション)

Amplify Hosting をコードリポジトリに接続すると、各コミットで、アプリケーションフロントエンドとバックエンドの両方をデプロイするワークフローが 1 つトリガーされます。この方法により、フロントエンドとバックエンドの不整合を防ぐために、Web アプリケーションは正常にデプロイされた後にのみ更新されます。

IDE で App.tsx ファイルに移動し、コンテンツを自分のコードで置き換えてください。アプリケーションコードを更新したら、変更をコミットしてプッシュしてください。
数分後、変更がデプロイされます。

クリーンアップ

このブログで作成したリソース (含む GitLab プロジェクト) を削除しないと、追加料金が発生する可能性があるので注意してください。

AWS Amplify コンソールに移動し、このブログで作成したアプリケーションについて View App を選択します。
次に App settings に移動し、その後 General settings を選択します。
最後に Delete app を選択して、アプリケーションと関連リソースを削除します (図 10)。

図 10: AWS Amplify アプリの削除

終わりに

このブログ記事では、開発者が GitLab と AWS Amplify Hosting を使用して Web アプリをデプロイする方法を説明しました。GitLab のような Git プラットフォームと統合することで、AWS Amplify はデプロイメントを効率化し、効率的な CI/CD パイプラインの簡素化に重点を置きます。AWS Amplify Gen 2 は monorepo、ブランチデプロイ、カスタムパイプラインなど、さまざまなフルスタックワークフローをサポートしており、ウェブアプリを素早くデプロイできます。AWS Amplify Gen 2 の機能を活用し、デプロイプロセスを合理化するには、AWS Amplify Gen 2 ドキュメントを参照し、実践的な AWS Amplify Gen 2 ワークショップを試し、AWS Amplify Hosting コンソールにアクセスして開始してください。

本記事は「Deploying a web application using AWS Amplify Gen 2 with GitLab as the Repository on AWS」を翻訳したものです。