翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
AWS CodeCommit リポジトリから最新の AWS Amplify ウェブアプリケーションを継続的にデプロイする
ディークシトゥル・ペンタコタ(AWS)とサイ・カタカム(AWS)によって作成されました
環境:PoC またはパイロット | テクノロジー: ウェブおよびモバイルアプリ DevOps、モダナイゼーション | AWS サービス: AWS Amplify、AWS CodeCommit |
[概要]
最新のウェブアプリケーションは、すべてのアプリケーションコンポーネントを静的ファイルにパッケージ化する単一ページのウェブアプリケーションとして構築されます。AWS Amplify ホスティング を使用すると、Git ベースのリポジトリで管理される最新のウェブアプリケーションをビルド、デプロイ、ホストする継続的インテグレーションおよび継続的デプロイ (CI/CD) パイプラインを構築できます。Amplify Hosting をコードリポジトリに接続すると、コミットごとにアプリケーションのフロントエンドとバックエンドをデプロイする単一のワークフローが開始されます。これにより、アプリケーションのフロントエンドとバックエンドの間の矛盾は解消され、デプロイが正常に完了した場合にのみ、ウェブアプリケーションが更新されます。
このパターンでは、AWS CodeCommit リポジトリを使用して最新のウェブアプリケーションを管理します。このインストラクションのサンプルウェブアプリケーションは React SPA フレームワークを使用しています。ただし、Amplify Hostingは、Angular、Vue、Next.js など他の多くのSPAフレームワークをサポートしており、Gatsby、Hugo、Jekyllなどのシングルサイトジェネレーターもサポートしています。
このパターンは、以下のサービスとコンセプトの経験がある AWS ビルダーを対象としています。
AWS CodeCommit
AWS Amplify ホスティング
React
JavaScript
Node.js
npm
Git
前提条件と制限
前提条件
アクティブなAWS アカウント
Amplify と でリソースを作成するアクセス許可 CodeCommit。詳細については、「Identity and Access Management for Amplify」および「Identity and Access Management for AWS CodeCommit」を参照してください。
テキストエディタまたはコードエディタ。
CodeCommit、Git 認証情報 を使用して HTTPS ユーザー用にセットアップします。
AAmplify の「IAMサービスロール」です。
npm と Node.js が「インストールされました
」 (npm ドキュメント)。
制約事項
このパターンでは、API、認証、データベースなど、Amplify アプリケーションのバックエンドの開発と統合については説明していません。バックエンドの詳細については、Amplify ドキュメントの「バックエンドの作成」を参照してください。
製品バージョン
AWS CLI バージョン 2
Node.js バージョン 16.x 以降
アーキテクチャ
ターゲットテクノロジースタック
React SPA を含む AWS CodeCommitリポジトリ
AWS Amplify ホスティングワークフロー
ターゲット アーキテクチャ
![CodeCommit リポジトリからウェブアプリケーションをデプロイし、AWS Amplify でホスティングするアーキテクチャ図](images/pattern-img/370c0a43-fc09-46dc-a018-853cbd4cff11/images/746a9450-6a0b-4798-bf22-e8f89c7933f6.png)
ツール
AWS サービス
AWS Amplify ホスティングは、継続的なデプロイでフルスタックのサーバーレスウェブアプリケーションをホストするための Git ベースのワークフローを提供します。
AWS CodeCommit は、独自のソース管理システムを管理することなく、Git リポジトリをプライベートに保存および管理するためのバージョン管理サービスです。
「AWS Identity and Access Management (IAM)」は、AWS リソースへのアクセスを安全に管理し、誰が認証され、使用する権限があるかを制御するのに役立ちます。
その他のツール
エピック
タスク | 説明 | 必要なスキル |
---|---|---|
リポジトリを作成します。 | 手順については、 CodeCommit ドキュメントの「AWS CodeCommit リポジトリの作成」を参照してください。 | AWS DevOps |
リポジトリをクローン作成します。 | 手順については、 CodeCommit ドキュメントの CodeCommit 「リポジトリのクローンを作成してリポジトリに接続する」を参照してください。サインインするように求められたら、GitHub の認証情報を入力します。 | アプリ開発者 |
タスク | 説明 | 必要なスキル |
---|---|---|
新しいアプリケーションを作成するには |
カスタム React アプリケーションの作成について詳しくは、「リアクトアプリの作成 | アプリ開発者 |
ブランチを作成してコードをプッシュします。 |
| アプリ開発者 |
タスク | 説明 | 必要なスキル |
---|---|---|
Amplify をリポジトリConnect。 | 手順については、Amplify Hosting ドキュメントの「リポジトリのConnect」を参照してください。AWS CodeCommit と、以前に作成したリポジトリとブランチを選択します。 | アプリ開発者 |
フロントエンドのビルド設定を定義します。 | 手順については、Amplify Hosting ドキュメントの「フロントエンドのビルド設定の確認」を参照してください。デフォルトをそのまま使用するか、以下を入力します。
| アプリ開発者 |
確認とデプロイ | 手順については、Amplify Hosting ドキュメントの「保存とデプロイ」を参照してください。デプロイプロセスが完了するまでお待ちください。 | アプリ開発者 |
タスク | 説明 | 必要なスキル |
---|---|---|
初期デプロイを検証してください。 | デプロイプロセスが完了したら、「ドメイン」でリンクを選択します。アプリケーションが想定どおりに動作していることを確認します。 | アプリ開発者 |
変更をコードリポジトリにプッシュします。 | ローカルワークステーションでコードを編集し、変更を CodeCommit リポジトリにプッシュします。Amplify Hostingはリポジトリ内の変更を検出し、ビルドとデプロイのプロセスを自動的に開始します。アプリケーションの更新がドメインに表示されていることを確認します。 | アプリ開発者 |
関連リソース
AWS CodeCommit ドキュメント
AWS Amplify ホスティングドキュメント
React リソース