5章や7章から始める方へ

本セクションでは、Stage 2やStage 3から始めたい方へ向けて、それまでの作業内容をショートカットする手順をお伝えします。

  • Stage 2 - アーリーステージ(第5章 ~ 第6章)
  • Stage 3 - ミドルステージ(第7章 - 第8章)

1. ダウンロード

  • Stage 2から始める方はamplify-sns-workshop-from-stage2.tar.gz
  • Stage 3から始める方はamplify-sns-workshop-from-stage3.tar.gz

をダウンロードします。 以下のリンクを右クリックして、保存し、適当なディレクトリに配置してください。

2. 解凍

ターミナルを開き、先ほど保存したtar.gzファイルが存在するディレクトリに移動したら、次のコマンドを実行します。

tar xvzf amplify-sns-workshop-from-stage2.tar.gz # ダウンロードしたファイルに応じて'2'を'3'にしてください

3. Amplifyの設定

解凍したReactアプリケーションのAWS Amplifyが、AWSのクラウドに接続できるよう設定を行います。

cd amplify-sns-workshop-from-stage2/boyaki # ダウンロードしたファイルに応じて'2'を'3'にしてください
npm install # 必要ライブラリのインストール
amplify init

途中いくつか質問をされます。以下の選択肢に注意して他はデフォルトでOKです。

  • environment name : production
  • Choose your default editor: Vim (via Terminal, Mac OS only) (お好きなエディタを選択してください)
  • Please choose the profile you want to use amplify-handson (1.3.でAmplify用に作成されたProfileを選択してください)

以下は全質問への解答例です。

  • Enter a name for the environment production
  • Choose your default editor: Vim (via Terminal, Mac OS only)
  • Do you want to use an AWS profile? Yes
  • Please choose the profile you want to use amplify-handson

4. クラウドリソースの作成

最後に、Amplifyで定義されているAWS AppSyncやAmazon DynamoDB、Amazon Cognitoなどのクラウドリソースを作成しましょう。

クラウドリソースへの変更反映と、アプリケーションのビルド・デプロイを行う$ amplify publishコマンドを実行し、確認にはYesと答えます。

amplify publish
✔ Successfully pulled backend environment production from the cloud.

Current Environment: production

# 中略

? Are you sure you want to continue? Yes

# 中略
✔ Zipping artifacts completed.
✔ Deployment complete!
https://production.XXXXXXX.amplifyapp.com

最後のURLにアクセスするとウェブアプリにアクセスできます。