Amplify Consoleのワンクリックデプロイを試してみる

Amplify Consoleの新機能でGithubからAmplify Consoleにワンクリックでデプロイができるようになりました！ 他の人のGithubリポジトリから自分のAmplify Consoleに簡単にデプロイができます。 早速試してみたいと思います。

試してみる

AWSのサンプルプロジェクトを自分のAmplify Consoleにデプロイしてみる

Amplify Console実行用ロールを作成する

ドキュメント通りに作成するとCloudformationが立ち上がり、 AmplifyConsoleServiceRole-AmplifyRole-XXXXXXX という名前でAdministratorAccessの権限を持ったロールが作成されます。

AWSのサンプルプロジェクトをデプロイ

Amplify ConsoleのGetting Startedを見ると複数のサンプルアプリが公開されていて Deploy to Amplify Console のボタンが付いています。

• ここではReactのリアルタイムチャットアプリをデプロイしてみたいと思います。
• デプロイ先のAWSアカウントにログインしてからデプロイボタンを押してみます。

Connect to GitHub をクリック

• GitHubへのアクセスをOAuthでリクエストされるので、許可するとgithubリポジトリにforkされます。

アプリ名とサービスロールを設定

• 先程作成したIAMロールを設定してください。

確認画面

デプロイ経過

• 無事検証まで終わりました。

作成されるリソース

デプロイによって作成されるリソースは以下になります。

• Cognito User Pool
• S3バケット
• IAMロール
• Appsync GraphQLApi,GraphQLスキーマ,APIキー,Resolver,DataSource
• DanamoDBテーブル
• 各CloudFormationスタック

実際のwebアプリ

実際にデプロイしたアプリはこちらから確認してください。

自分のプロジェクトにAmplify Consoleへのデプロイボタンを追加する

上ではサンプルアプリを自分のAWSリソースにデプロイしました。 次は実際に自分のプロジェクトにAmplify Consoleへのデプロイボタンを追加する方法です。

マークダウンもしくはHTMLに追加するだけです。

README.mdにボタンを追加

README.mdにAmplify Consoleへのリンクボタンを追加します。

[![amplifybutton](https://oneclick.amplifyapp.com/button.svg)](https://console.aws.amazon.com/amplify/home#/deploy?repo=https://github.com/username/repository)

• https://github.com/username/repository を共有したいリポジトリに置き換えてください。

HTMLに追加

<a href="https://console.aws.amazon.com/amplify/home#/deploy?repo=https://github.com/username/repository">
<img src="https://oneclick.amplifyapp.com/button.svg" alt="Deploy to Amplify Console" />
</a>

ボタンを追加することで簡単にプロジェクトが共有できるようになります。

参考

リリースニュース - AWS公式 Deploy to Amplify Console Button - 公式ドキュメント