AWS AmplifyとElastic Beanstalk、2通りの簡単レシピを比較（AWS Amplify編）

2021年3月18日 16:02

みなさんこんにちは！Airitechシステム開発グループの岡崎です。

本記事では、以前公開した「AWS AmplifyとElastic Beanstalk、2通りの簡単レシピを比較（Elastic Beanstalk編）」の続きとしてAWS Amplifyを深掘りしていきたいと思います。

1. AWS Amplifyって何？

AWS Amplify は、それぞれを連携させたり個別で使用したりできる、ツールとサービスのセットです。
これらの機能により、フロントエンドウェブおよびモバイルのデベロッパーが、AWS によるスケーラブルなフルスタックアプリケーションをビルドできるようにします。
Amplify を使用するお客様は、数分の内にバックエンドを構成しアプリケーションと接続でき、また、静的なウェブアプリケーションのデプロイは数クリックだけで実行できます。
さらに、AWS コンソールの外部でも、簡単にアプリケーションコンテンツの管理が行えます。

つまり、AWS Amplifyはスケールするアプリケーションを簡単に、とにかく早く開発できる優れものなのです。

2. 特徴

・APIが導入されており、効率的に開発ができる

・複雑な認証の仕組みを簡単に構築できる

・スケーラビリティが高く、拡張が容易に行える（バックエンドを再構築する必要がない）

・いくつかのコマンドを実行するだけで、本番環境と全く同じバックエンドを構築できる

・Amazon Pinpointと統合すれば、ユーザのエンゲージメントを簡単に可視化できる

3. 構成要素

(出典：AWS Startup Day 2020 これからはじめる AWS Amplify)

AWS AmplifyはFramework、CLI、Developer Toolsの３つのサービス群で構成されています。

Frameworkは、クライアントがAWSのバックエンドと連携するための処理を数行で実装できるようにするフレームワークで、AWSサービスとの通信レイヤだけではなく、モダンなUIを構築するライブラリとしても機能します。

Developer Toolsは、AWS Amplify ConsoleとAWS Device Farmの２サービスで構成されていて、Webアプリ向けCI/CD環境構築とホスティングを行うことができます。

CLIは、上記のサービスをコントロールするインターフェースとして機能します。

4. 構築してみる

Amplify CLIのインストール

//Amplify CLIインストール
$ npm install -g @aws-amplify/cli
//バージョン確認
$ amplify -v
4.45.0

※Node.jsのバージョン8.11.0以上がインストールされている必要があります。

IAMユーザの作成

$ amplify configure

ブラウザでAWSコンソールへのログイン画面が表示されるので、任意のアカウントでログインします。
ログイン完了後、コマンドプロンプトに戻ってEnterを押下します。

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

リージョンを指定します。

Specify the AWS Region
? region:  us-east-1

IAMユーザを作成します。

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

Enter the access key of the newly created user:
? accessKeyId:  ********************
? secretAccessKey:  ****************************************

.aws/configに保存するプロファイル名を指定します。

This would update/create the AWS Profile in your local machine
? Profile Name:  amplify-user
Successfully set up the new user.

これでIAMユーザの作成は完了です。

バックエンド構築

下記コマンドを入力して、プロジェクトを作成します。

//プロジェクトの作成
$ mkdir amplify-project && cd amplify-project
//プロジェクトの初期化
$ amplify init

デフォルトのエディタやフレームワークについていくつか質問されるので、答えていきます。

Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project amplifyproject
? Enter a name for the environment dev

? 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.cmd run-script build
? Start Command: npm.cmd run-script serve
Using default provider  awscloudformation

? Select the authentication method you want to use: AWS profile
For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html
? Please choose the profile you want to use amplify-user

| Initializing project in the cloud...

√ 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!

バックエンド処理が終了し、「Your project has been successfully initialized and connected to the cloud!」が確認できればセットアップ完了です。

※コマンド一覧

認証機能をつけてみる

今回はVueを使ってフロントエンドを構築します。(こちらを参考に作成)

続いて、バックエンドに認証機能を追加するため下記コマンドを実行します。

//認証機能設定
$ amplify add auth

Using service: Cognito, provided by: awscloudformation
The current configured provider is Amazon Cognito.
Do you want to use the default authentication and security configuration? Default configuration
Warning: you will not be able to edit these selections.
How do you want users to be able to sign in? Email
Do you want to configure advanced settings? No, I am done.
Successfully added auth resource amplifyprojectd65c7a87 locally

//ローカルの変更をサーバ側に反映
$ amplify push
√ Successfully pulled backend environment dev from the cloud.
Current Environment: dev
| Category | Resource name          | Operation | Provider plugin   |
| -------- | ---------------------- | --------- | ----------------- |
| Auth     | amplifyprojectd65c7a87 | Create    | awscloudformation |
? Are you sure you want to continue? (Y/n) y

http://localhost:8080/に接続します。

作成されたユーザプールは、Cognitoからも参照できます。

5. 料金

Developer Tools(AWS Amplify Console、AWS Device Farm)のみ従量課金制で、その他のサービスに追加料金はかかりません。

6. Elastic BeanstalkとAWS Amplifyを使ってみて

対話形式のCLIを使ってバックエンドを容易に構築できる「AWS Amplify」いかがでしたでしょうか。

とにかくスピード重視で、シンプルなものを手軽に構築したい方にはもってこいのサービスですね。
また、Amazon Cognito等で認可を扱いたいときにソースコードの記述がシンプルになるのは、AWS Amplifyの大きなメリットだと感じました。

前回紹介したElastic Beanstalkは、AWS Amplifyに比べてVPC等インフラの設定や独自AMIも容易に作成できるため、よりカスタマイズした環境を構築したい場合に真価を発揮してくれそうですね。

そういった点も含め、AWS Amplifyはよりフロントエンド開発者フレンドリーなサービスなのかもしれません。
手軽に素早く開発したい方、ぜひ使ってみてください。

ここまで読んでいただきありがとうございました！

7. Airitechのスキルアップサポート

Airitechでは、社員が最高の学習をできるようスキルアップサポートを行っています。

また、新しいことにチャレンジしたい、新しい技術を習得したい仲間を募集しています。一緒に働いてみたいと思う方は、こちらものぞいてみてください。

Airitechの採用情報はこちら

ホームページ

この記事が気に入ったらサポートをしてみませんか？