フロントエンド環境構築手順 - nnnaoki1998/spocon GitHub Wiki

事前準備

AWSのIAMユーザを作成する

事前にIAMユーザを作成してログインしておく必要がある。 以下の手順を実施する。

  • 管理者にIAMユーザを作成の依頼を行い、ログインユーザの情報が含まれているCSVファイルを受け取る
  • CSVファイルに記載のコンソールサインインURLにアクセスする
  • CSVファイルに記載のユーザ名、パスワードでログインする
  • ユーザ名とパスワードは仮のものなので、自分で設定したいユーザ名、パスワードを入力してログインする
  • AWSのコンソール画面が開けたらOK
  • 右上に表示されるリージョンが東京になっていなかったら東京を選択する

以上で事前準備は完了です。

1. nodeのバージョン確認

ホームディレクトリ内で下記のコマンド実行する。

$ node -v
$ npm -v

それぞれ以下のバージョンを満たしていればOKです。 最低限必要バージョン

  • node: 12.x以上
  • npm: 6.x以上

nodeのバージョンは20.0.0が実績あり。 14.8.0はnpm ciでうまくいかない。

インストールしていない場合、下記にアクセスしてインストールする。 https://nodejs.org/ja/download

2.　amplify cliをインストール

ローカルPCにamplify cliをインストールする。 そのため実行するディレクトリはホームディレクトリ内であればどこでも構わない。

npm install -g @aws-amplify/cli

3. Amplifyに接続するための認証情報作成

  1. ホームディレクトリ内で以下のコマンドを実行する。
amplify configure
  1. 上記のコマンドを実行すると、ターミナルに以下が表示され、AWSのログイン画面が表示される。 事前準備で作成したユーザでログインする。
Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue
  1. 2の完了後、ターミナルに戻ってリージョンを選択する
Specify the AWS Region
? region:
❯ ap-northeast-1
  1. 3の完了後、AWSコンソールのユーザ作成画面が表示されるので以下の設定を行う

ユーザ名を入力する。（AWSマネジメントコンソールへのログインはチェックする必要はない） image

「ポリシー置換をアタッチする」を選択して、AdministratorAccess-Amplifyにチェックを入れる。 image

何も入力せずにユーザを作成ボタンを押下する。 image

上記の操作後コンソールが以下の状態であればOK。

Follow the instructions at
https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli

to complete the user creation in the AWS console
https://console.aws.amazon.com/iamv2/home#/users/create
Press Enter to continue

Enter the access key of the newly created user:
? accessKeyId:  [hidden]
  1. アクセスキーIDとシークレットアクセスキーを生成する

AWSコンソール上で先程作成したユーザ詳細画面を表示する。 image

「セキュリティ認証情報」タブを開き、アクセスキーを作成を押下する。 image

コマンドラインインターフェース(CLI)にチェックを入れ、さらに「上記のレコメンデーションを理解し、アクセスキーを作成します。」にチェックを入れて、次へを押下する。 image

説明タグの設定は何も入力せず、アクセスキーを作成を押下する。 するとCSVファイルをダウンロードすることができるので、そちらでアクセスキーとシークレットアクセスキーを管理する。 ※シークレットアクセスキーはこの画面もしくはCSVファイルでしか見れないので、紛失しないように注意する。

  1. アクセスキーとシークレットアクセスキーを確認したら、ターミナルでそれらを入力する。
Enter the access key of the newly created user:
? accessKeyId:  *****************
? secretAccessKey:  **********************************
  1. プロファイル名を指定する。プロファイル名は特に指定はない。デフォルトではdefaultが入力される。 例としてamplify-cli-userで保存する。
? Profile Name:  amplify-cli-user
  1. 下記の表示がされたらamplifyに接続するIAMユーザの作成は完了
Successfully set up the new user.
  1. 下記のコマンドを実行して登録したユーザ情報が以下に格納されていればOK
$ cat ~/.aws/config
$ cat ~/.aws/credentials

5. amplify pullの実行

spocon/ui配下で以下のコマンドを実行する

$ amplify pull

上記実行後に以下のファイルが作成されている場合は削除する

  • spocon/ui/aws-exports.js
  • spocon/ui/.gitignore

6. 環境変数の設定

spocon/ui配下に.envファイルを作成して、以下を追加

REACT_APP_BACKEND_URL='http://localhost:3000'

7. コンテナを起動する

docker-compose build --no-cache react
docker compose up react

コンテナのログに以下の表示がされていれば、フロントエンドは起動している。

react_1  | webpack 5.71.0 compiled successfully in 1008 ms

localhost:8080にアクセスして画面が表示されたら、フロントエンドの環境構築完了です！