既存のコードの使用開始 - AWS Amplifyホスティング

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

既存のコードの使用開始

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

開始するには、コンソールAmplify。から始めている場合AWS Amplifyホームページ、[] を選択します。開始方法ページの上部にあります。


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

次に [] を選択します。使用開始Deliver


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

から始めている場合すべてのアプリケーション[] ページで、新しいアプリとなる。その後ウェブアプリをホストする右上隅にある。


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

ステップ 1: リポジトリConnect する

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


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

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

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

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

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

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

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

詳細については、「YML 構造」を参照してください。

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

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

ビルド中に Amplify CLI を使用してバックエンド機能をデプロイするには、AWS Identity and Access Management(IAM) サービスロール。IAM ロールは、アカウントのリソースを操作するアクセス許可を Amplify に付与する安全な方法です。

[Note:] (メモ:) IAM サービスロールが有効でない場合は、Amplify CLI を実行することはできません。

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

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

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

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

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

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

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

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

  4. 検証 - アプリが正しく動作することを検証するために、Amplify では、ヘッドレス Chrome を使用して、index.html のスクリーンショットを複数のデバイス解像度でレンダリングします。

次の手順