公式チュートリアル(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完了後、自動でブラウザが立ち上がる
ホスティング後のステータスを確認
$ amplify status
Current Environment: dev
| Category | Resource name | Operation | Provider plugin |
| -------- | --------------- | --------- | ----------------- |
| Hosting | S3AndCloudFront | No Change | awscloudformation |
Hosting endpoint: <公開先URL>
今回はホスティングを試すためにHTTPを指定しましたが、認証機能を追加したりすることを考えるなら必ずHTTPSを指定しましょう！！！