AWS Amplifyのセットアップ

この記事はサーバーレスWebアプリ Mosaicを開発して得た知見を振り返り定着させるためのハンズオン記事の1つです。

以下を見てからこの記事をみるといい感じです。

Vue CLIで新規プロジェクト作成と、よくある雛形の実装

はじめに

開発環境にAWS Amplify CLIをインストールして、AWS Amplifyをセットアップします。

コンテンツ

Amplify CLI のインストール

$ npm install -g @aws-amplify/cli@3.14.0
$ amplify --version
Scanning for plugins...
Plugin scan successful
3.14.0

@3.14.0を指定しないと最新版が入ります。
2019年12月下旬現在、現在の最新版は4.10.0のようです。
例によって、今回はハンズオンということで、念の為バージョンを指定してインストールします。

Amplifyアカウントのセットアップ

Amplifyへ、AWSアカウントとIAMロールの紐付けを行います。

$ amplify configure
Follow these steps to set up access to your AWS account:

Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue

メッセージに促されるまま、 https://console.aws.amazon.com/ このリンクをクリックして紐付けたいAWSコンソールにログインした上で、Enterボタンを押下します。

Specify the AWS Region
? region:  ap-northeast-1
Specify the username of the new IAM user:
? user name:  amplify-user-for-sampleproject
Complete the user creation using the AWS console
https://console.aws.amazon.com/iam/home?region=undefined#/users$new?step=final&accessKey&userNames=amplify-user-for-sampleproject&permissionType=policies&policies=arn:aws:iam::aws:policy%2FAdministratorAccess
Press Enter to continue

引き続き、リージョンとAmplifyが利用するIAMユーザーの名前の名前を入力すると、またリンクが案内されるのでクリックすると、IAMユーザー作成画面が表示されます。次へ次へと進み、作成してください。

※アクセス許可の設定はデフォルト(AdministratorAccess)のまま進めることにします。
※IAMユーザー作成時にAccessKeyとSecretAccessKeyが入手できます。この後すぐに使いますので控えておいてください。またセキュリティ的に大切な情報なので安全な場所に保管してください。

引き続き、先ほど作成したIAMユーザーのAccessKeyとSecretAccessKeyを入力して完了です。

Enter the access key of the newly created user:
? accessKeyId:  **********
? secretAccessKey:  ********************
This would update/create the AWS Profile in your local machine
? Profile Name:  default

Successfully set up the new user.

Amplifyバックエンドのセットアップ

$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project sample_vue_project
? Enter a name for the environment work
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using vue
? Source Directory Path:  src
? Distribution Directory Path: dist
? Build Command:  npm run-script build
? Start Command: npm run-script serve
Using default provider  awscloudformation

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use default
⠇ Initializing project in the cloud...

プロジェクト名 : 何でもOK(sample_vue_project)
環境名 : 何でもOK(work)
デフォルトエディタ : 何でもOK(Visual Studio Code)
アプリのタイプ : JavaScript
フレームワークの種類 : Vue
ソースディレクトリのパス : src
ビルド結果出力先パス : dist
ビルドコマンド : npm run build
サーバー開始コマンド : npm run serve
AWS Profile : 上の方で作成した Defailt を選択
アンケートかな？ってくらい何に利用するのかわからない質問含め、沢山投げかけてきますよね。
最後のAWS Profile選択をすると、バックエンドのセットアップが始まります。
下のようなメッセージが表示されれば完了です。

✔ Successfully created initial AWS cloud resources for deployments.
✔ Initialized provider successfully.
Initialized your environment successfully.

Your project has been successfully initialized and connected to the cloud!

Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify <category> add" will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

Pro tip:
Try "amplify add api" to create a backend API and then "amplify publish" to deploy everything

AWS側ではCloudFormationが動いて色々とセットアップしてくれています。
ということで、CloudFormationを見てみましょう。samplevueproject-work-yyyymmddhhmmssという名前でスタックが1つ作成されています。それを見てみると、3つほどのリソースが作成されていますね。

AuthRole
認証したユーザー用のIAM Role
UnauthRole
認証してないユーザー用のIAM Role
DeploymentBucket
サービスがデプロイされるバケット

プロジェクトへは、amplifyフォルダが作成されて、中に色々なファイルが作成されていますね。

あとがき

いよいよAmplifyですね。
JAWS UG 浜松界隈では、Amplifyを積極的に使うデベロッパーの通称を『Amplifyおじさん』にしようという活動が一部のメンバによりまことしやかに遂行されていて、見ていておもしろいです。
Rubyist、Perler、Pythonist、等々と同列に並べようということで、だいぶ無謀な試みですが、ワタシも一役買うためここに記しておきます。
ところでAmplifyおじさん筆頭の彼は平成生まれなのですが、そんな彼におじさんを名乗られてしまうと、まだまだ若いと思っていたいワタシとしては、ちょっと複雑な気持ちなのであります...。