既存のコードの使用開始 - AWS Amplifyホストする

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

既存のコードの使用開始

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

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


         AWS Amplifyホームページのスクリーンショット。

次に、「配信」で「はじめに


         AWS Amplifyホームページの下部の [Deliver] (配信セクション) セクションのスクリーンショット。

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


         Amplify コンソールの「すべてのアプリ」ページのスクリーンショット。

ステップ 1: リポジトリへのConnect

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


            Amplify コンソールの「Amplify ホスティングを始めよう」ページのスクリーンショット。

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

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

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

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

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

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

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

ステップ 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 に付与する安全な方法です。詳細な手順については、「サービスロールの追加」を参照してください。

[Note:] (メモ:) Amplify CLIは、IAMサービスロールが有効になっていないと実行されません。

ステップ 2c. 環境変数の追加 (オプション)

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

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

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

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

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

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

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

次のステップ