Bootstrap

作業ディレクトリの作成

任意のディレクトリに移動していただいた後、次のコマンドを実行し、本ワークショップの作業を行うディレクトリを作成します。

mkdir amplify-sns-workshop
cd amplify-sns-workshop

後ほど見返した時に何のワークショップで作成したかわかりやすいようにしています

Creating a React app

Reactのcreate-react-appコマンドを利用して、Reactウェブアプリケーションの雛形を作成していきます。

create-react-appコマンドについての詳細は次のリンクご参照ください。https://github.com/facebook/create-react-app.

npx create-react-app boyaki
cd boyaki

Amplifyの初期化

先ほど$ cd boyakiで移動したReactのプロジェクトルートディレクトリ(boyaki)のトップで amplify init コマンドを実行します。

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 project boyaki
  • Enter a name for the environment production
  • Choose your default editor: Vim (via Terminal, Mac OS only)
  • 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? Yes
  • Please choose the profile you want to use amplify-handson

事前準備で amplify configure を正しく完了していない場合、途中で ? Setup new user と出て新しいユーザーをセットアップするか聞かれます。 その場合、Y と答えると、ブラウザで AWS マネジメントコンソールが立ち上がるので、マネジメントコンソールにログインし、その後のガイドに従ってください。

Amplify CLIではYes/Noで回答する質問の際にY/ny/Nと表示されます。 こうした質問ではyesnoに加え、ynで回答することができます。 また、Y/nであればYes、y/NであればNoがデフォルトの回答になりますので、デフォルトの回答でよければそのままEnterキーを押していただくこともできます。

Profile の選択が終わると、バックエンドの初期化を開始します。AWS CloudFormation によって、アプリケーションのバックエンドに必要な基礎的な AWS リソース(IAM Role、Amazon S3 バケットなど)が自動的に作成されます。

環境のテスト

コードの変更反映をリアルタイムで確認できるよう、development serverを立ち上げてブラウザで確認してみましょう。

npm start

development serverが立ち上がると、自動的にブラウザでhttp://localhost:3000が開かれます。 自動的に開かない場合はブラウザの検索窓にhttp://localhost:3000と入力してからEnterを押し、アクセスしましょう。

確認ができましたら、$ npm startを実行中のターミナルのタブはそのままに、新しくタブを開いて作業を進めていきます。

以下はCloud9を利用している方の手順になります。Cloud9を使用していない方は次へお進みください。 なお、繰り返しになりますが本ワークショップではローカル環境での実施を推奨しております。

Cloud9のPreviewメニューをクリックし、Preview Running Applicationを選択しましょう。

preview running application

お好みで、新しいタブでPreviewを表示していただくことができます。

pop app to new window

最後に、追加でターミナルのタブを開きましょう。元のターミナルはそのままにしておき、development serverを立ち上げたままにします。このとき、cd boyakiを実行しておきます。

new terminal