Amplifyでデプロイしてみた。Amplifyでデプロイしてみた。Amplify#GitHub#React#AWSSUMANGALAS2022.03.30125この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。フルスタックアプリケーションをすばやく簡単に構築できるようにします。ウェブまたはモバイルアプリケーションのバックエンドを設定することができます。Amplifyは、フロントエンドのWebおよびモバイル開発者にとって非常に便利なツールです。Amplifyを使用してWebフロントエンドUIを視覚的に構築することもできます。Amplifyでデプロイしてみました。ここでは、AmplifyのソースリポジトリとしてGitHubを使用しました。アプリの作成フロントエンドコードとバックエンドコードの両方を一緒に保持するディレクトリを作成しておきます。react-amplify-cdk次のコードでReactアプリを作成しておきます。react-amplifyBuildスクリプトを作成しておきます。Amplifyは、Buildスクリプトを使用してアプリケーションをビルドします。node_modules/**/*フロントエンドディレクトリにノードモジュールをインストールしておきます。リポジトリの作成GitHubアカウントにログインし、[New]をクリックしてリポジトリを作成しておきます。リポジトリ名を入力してリポジトリを作成しておきます。次のコマンドを使用して、フロントエンドコードをGitHubリポジトリにプッシュしておきます。mainこれで、GitHubリポジトリにコードが表示されます。Amplifyの作成CDKをインストールする次のコマンドを使用してCDKをインストールしておきます。aws-cdk-libCDKアプリを作成する新しいディレクトリを作成しておきます。CDKは、プロジェクトディレクトリの名前に基づいてソースファイルとクラスに名前を付けます。initコマンドを使用してアプリを初期化しておきます。作成して、作成する必要のあるAWSサービスを定義しておきます。Amplifyを定義し、GitHubをソースリポジトリとして指定しておきます。ファイルに次のコードを追加しておきます。する前に、環境をブートストラップする必要があります。次のコマンドを実行して、AWS環境をブートストラップしておきます。bootstrapCDKを展開しておきます。deployアプリケーションをテストするコンソールでは、サービスが作成されたことを見ることができます。Amplifyアプリが作成されたことをみることができます。展開のさまざまなフェーズを見ることができます。AmplifyURLを使用してアプリケーションにアクセスできます。Amplifyでデプロイしてみました。