既存のコードを使用して開始する

このチュートリアルでは、最新のウェブアプリケーションを継続的にビルド、デプロイ、およびホストする方法について説明します。最新のウェブアプリには、シングルページアプリケーション (SPA) フレームワーク (React、Angular、Vue など) と静的サイトジェネレーター (SSG) (Hugo、Jekyll、Gatsby など) があります。Amplify Hosting は、サーバーサイドレンダリング (SSR) を使用し、Next.js を使用して作成されたウェブアプリもサポートしています。

開始するには、Amplify コンソールにサインインします。AWS Amplifyホームページから始める場合は、ページの上部にある [Get Started] を選択します。

次に、「配信」で「始める」を選択します。

「すべてのアプリ」ページから始める場合は、「新規アプリ」を選択し、右上の「ウェブアプリをホスト」を選択します。

ステップ 1: リポジトリに接続する

自分の GitHub、Bitbucket GitLab、AWS CodeCommitまたはリポジトリConnect します。また、Git リポジトリに接続せずにビルドアーティファクトを手動でアップロードすることもできます。詳細については、「手動デプロイ」を参照してください。

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

GitHub リポジトリの場合、 GitHub Amplifyはアプリ機能を使用してAmplifyアクセスを承認するようになりました。 GitHub Amplifyアプリでは、権限がより微調整され、指定したリポジトリにのみAmplifyアクセスを許可できます。 GitHub アプリのインストールとアプリのインストールと承認の詳細については、「を参照してくださいを参照してください GitHubリポジトリへの Amplify アクセスを設定する。

リポジトリサービスプロバイダーに接続したら、リポジトリを選択後、対応するブランチを選択して、ビルドおよびデプロイを行います。

ステップ 2a: フロントエンドのビルド設定を確認する

選択したブランチについて、Amplify はリポジトリを検査して、実行するビルドコマンドのシーケンスを自動的に検出します。

重要: ビルドコマンドとビルド出力ディレクトリ (つまり、artifacts > baseDirectory) が正確であることを確認してください。この情報を変更する必要がある場合は、[編集] を選択して YML エディタを開きます。ビルド設定は AWS のサーバーに保存することも、YML をダウンロードしてリポジトリのルートに追加することもできます (モノリポジトリの場合は、YML をアプリのルートディレクトリに保存します)。

詳細については、「ビルド仕様の YAML 構文」を参照してください。

ステップ 2b: バックエンドのビルド設定を確認する

Amplify CLI v1.0以降でプロビジョニングされたリポジトリに接続した場合（amplify-vを実行してCLIバージョンを確認する）、Amplify Hostingはフロントエンドビルドを含む単一のワークフローでバックエンドリソース（Amplify CLIでプロビジョニングされたリソース）をデプロイまたは自動的に更新します。既存のバックエンド環境を自分のブランチにポイントするか、まったく新しい環境を作成することができます。 step-by-step チュートリアルについては、「フルスタックデプロイメントの開始」を参照してください。

ビルド中に Amplify CLI を使用してバックエンド機能をデプロイするには、AWS Identity and Access Management (IAM) サービスロールを作成または再利用します。IAM ロールは、Amplify にアカウントのリソースにアクセス権限を付与するための安全な方法です。詳細な手順については、「サービスロールの追加」を参照してください。

注:Amplify CLIは、IAMサービスロールが有効になっていないと実行できません。

ステップ 2c: 環境変数を追加する (オプション)

ほとんどのアプリでは、実行時に設定情報を取得する必要があります。この設定には、データベース接続の詳細、API キー、パラメータなどがあります。環境変数は、ビルド時にこれらの構成を公開する手段を提供します。

ステップ 3: 保存してデプロイする

すべての設定を見直し、すべて正しく設定されていることを確認してください。[保存して展開] を選択し、AWSウェブアプリをグローバルコンテンツ配信ネットワーク (CDN) にデプロイします。フロントエンドのビルドには通常1～2分かかりますが、アプリのサイズによって異なる場合があります。

ブランチセクションの進行状況インジケーターを選択して、ビルドログ画面にアクセスします。ビルドには、次のステージが含まれます。

1. プロビジョン - ビルド環境は、4 vCPU、7 GB のメモリを搭載したホスト上で Docker イメージを使用してセットアップされています。各ビルドでは、独自のホストインスタンスを取得し、すべてのリソースが安全に隔離されるようにします。Docker ファイルの内容は、デフォルトのイメージがユーザーの要件をサポートするように表示されます。

2. ビルド - ビルドフェーズは、セットアップ (リポジトリのクローンをコンテナに作成する)、バックエンドのデプロイ (Amplify CLI を実行してバックエンドリソースをデプロイする)、フロントエンドのビルド (フロントエンドのアーティファクトをビルドする) の 3 つのステージから構成されます。

3. デプロイ-ビルドが完了すると、すべてのアーティファクトが Amplify Hosting が管理するホスティング環境にデプロイされます。すべてのデプロイはアトミック - アトミックデプロイでは、すべてのデプロイが完了したときにのみウェブアプリケーションが更新されるようにすることで、メンテナンスウィンドウが不要になります。

   

次のステップ

• カスタムドメインをアプリに追加する

• 複数の環境を管理する

• マージする前にプルリクエストをプレビューする