AWS Amplifyを使用してReact製のアプリを手軽にホスティング

公式チュートリアル(React)を参考に構築する。


React Settings

Reactのテンプレートを使用して構築を行う。

# テンプレートを使用するためにインストール

yarn global add create-react-app
# Reactアプリのテンプレートを使用
create-react-app myapp && cd myapp
# 実行してみる
yarn start


Amplify Settings

先にCLIのインストールを行う。

yarn global add @aws-amplify/cli

次に、必要なパッケージをインストール

yarn add aws-amplify

# 以下はUIコンポーネント
yarn add aws-amplify-react

Amplify CLIを使用してプロジェクトのセットアップを行う

設定値やコマンドについては以下のリンクが参考になりそう。


https://aws-amplify.github.io/docs/cli-toolchain/quickstart#environments--teams

amplify init

※初めて構築する場合、途中でAWSへのログインを求められます。

事前にAWSアカウントの作成を行ってください。

■今回設定した内容

メッセージ
設定値

Enter a name for the project
プロジェクト名

Enter a name for the environment
dev

Choose your default editor
Visual Studio Code

Choose the type of app that you're building
javascript

What javascript framework are you using
react

Source Directory Path
src

Distribution Directory Path
build

Build Command
npm run-script build

Start Command
npm run-script start

Do you want to use an AWS profile?
Y, default

成功すると以下のメッセージが表示される

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

上記の作業だけで以下の内容がセットアップされる。


  • IAM(ロールが作成される)

  • S3(バケットが作成される)

  • CloudFormation(テンプレートteam-provider-info.jsonが作成される)


init後の作業

amplify statusで現在の状態を確認

何も行っていないため、ヘッダのみ表示される。

$ amplify status

Current Environment: dev

| Category | Resource name | Operation | Provider plugin |
| -------- | ------------- | --------- | --------------- |

amplify add <category-name>で追加したいバックエンドリソースを指定する。

■バックエンドリソース一覧


  • analytics

  • api

  • auth

  • function

  • hosting

  • interactions

  • notifications

  • storage

hostingを実行する。

$ amplify add hosting

# 選択内容は以下。今回は参考用のため、DEV(HTTP)を指定
? Select the environment setup: DEV (S3 only with HTTP)
? hosting bucket name <デフォルト値を使用>
? index doc for the website index.html
? error doc for the website index.html
# 完了後、publish実行
$ amplify publish

publish完了後、自動でブラウザが立ち上がる

image.png

ホスティング後のステータスを確認

$ amplify status

Current Environment: dev

| Category | Resource name | Operation | Provider plugin |
| -------- | --------------- | --------- | ----------------- |
| Hosting | S3AndCloudFront | No Change | awscloudformation |

Hosting endpoint: <公開先URL>

今回はホスティングを試すためにHTTPを指定しましたが、認証機能を追加したりすることを考えるなら必ずHTTPSを指定しましょう!!!