BUNSEN

個人的な学習ログ

AWS Amplifyを使用した爆速バックエンド構築[ホスティング/Hosting編]

背景

AWS Amplifyというサービスに業務で触れる機会があったのですが、こんな便利なサービスが存在したのかと衝撃を受けてしまいました。。。 これまでサーバを立ててサービスをインストールして最新を保つように運用をしてきたのですが、それらをマネージドで提供してくれる。しかも環境面の考慮まで、、、今後何らかのサービス開発をする際は積極的に使っていこうと思いましたのでここにメモを残したいと思います。

前提

  • webアプリケーションを構築する前提で話を進めますがバックエンドはそのままネイティブアプリにも流用/併用可能です。
  • webアプリケーションはnodejs + reactで開発します。
  • amplify cli のインストールは公式手順をご参照ください。
  • AWSアカウントにおいてamplify関連のIAMポリシーを所持しているものとします。
  • webフロントについては詳しくない為、実装の解説は最低限とします。

環境

$ cat /etc/os-release 
NAME="Ubuntu"
VERSION="20.04.2 LTS (Focal Fossa)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 20.04.2 LTS"
VERSION_ID="20.04"
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
VERSION_CODENAME=focal
UBUNTU_CODENAME=focal
$ npm --version
6.14.15
$ node --version
v14.17.6
$ amplify --version
5.4.0

概要

react tutorialで作成したwebアプリケーションをクラウド上にamplifyを使用してホスティングする。

web application作成

Amplify CLIの準備

$ amplify configure
  • 上記コマンドでは~/.aws/configと~/.aws/credentialsの設定を行っている。つまり、すでにAWS CLIなどで認証情報を設定している場合は実行する必要はない。
  • ただし、~/.aws/configのProfile Nameに紐づくリージョンで作成されるため、実行権限を持つアカウントかつAmplifyのリージョンがデフォルトリージョンと同一であるプロフィールを作成しておく必要がある。

Amplify Applicationの作成

$ pwd
/home/ec2-user/react-tutorial
$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project reacttutorial
The following configuration will be applied:

Project information
| Name: reacttutorial
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? Yes
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 default

~~ 略 ~~

✔ 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 add <category>" 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 console" to open the Amplify Console and view your project status
"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アクセス情報について聞かれるので対話式で入力する。

上記のログが出力されるとAmplifyアプリケーションの作成が完了する。

Amplifyにより提供されるHosting機能について

現状Amplifyでは主に以下の2種類のHosting機能の作成が可能

  1. Hosting with Amplify Console
  2. Amazon CloudFront and S3

それぞれにメリット/デメリットある。

  • Amplify Console
    • メリット
      • AmplifyConsole経由の容易なカスタムドメインの設定
      • コミットベースのCI/CD機能
    • デメリット
      • ホスティングしている実リソース(CloudFront, S3と思われる)がコンソールから見えず細かな設定が不可能
  • CloudFront + S3
    • メリット
      • CloudFrontやS3に対し細かな設定をすることができる
    • デメリット
      • CI/CDが必要な場合自身でその機能を用意する必要がある

柔軟なカスタマイズが必要な場合やAmplifyデフォルトの性能で満足できない場合はCloudFront + S3を選択する価値があると思われる。主にAWS WAFをアタッチする必要性がある場合などが考えられる。

今回はHosting with Amplify Consoleを選択する。

Hosting機能の実装

以降はAmplifyコンソールでの操作となる。 以下の前提で手順を説明する。 - アプリケーションコードはGitHubで管理されている。

  1. Amplifyコンソールから作成したアプリケーションを選択。
  2. Frontend environmentsタブを開き、GitHubを選択し、Connect branchをクリック。
  3. GitHub認証を行い、アプリケーションを管理しているリポジトリをとブランチをドロップダウンリストから選択し次へ をクリック。
  4. 以下のパラメータを入力し、次へをクリック
  5. App name: デフォルト値
  6. Environment: 前の手順で作成したバックエンド環境名
  7. Select an existing service role ~~: amplifyconsole-backend-role
  8. 保存してデプロイをクリック

Amplifyコンソール画面に戻るとmasterフロントがプロビジョン > ビルド > デプロイ > 検証 の順にステータスが進んでいくのが見えるのですべて終了後に以下の画像の箇所をクリックすることでデプロイされたアプリケーションを閲覧できる。

f:id:ahyt910:20210907113433p:plain
AmplifyコンソールのWebフロントアクセス

実際にWebフロントへアクセスしてみるとReactアプリが動いていることが分かる。 f:id:ahyt910:20210907122253p:plain

最後に

最終的なローカルのディレクトリ構造はここを参照。

amplifyの資材(バックエンド資材)とフロントエンド資材は分けて管理することもできますが今回は同じリポジトリで管理していく方針で進めました。

Reactアプリケーションさえ準備できていれば、Amplifyアプリケーションの作成からデプロイまで30分もかからずに実現できました。

次回はここに認証機能を追加していきたいと思います。