AWS上にReact+Node.js+Terraformでデプロイするログイン/登録機能を持ったサンプルアプリケーション

• フロントエンド：Reactを用いて作成。ログイン画面や登録画面、プレミアムコンテンツページなど機能上必要最低限のページを実装。S3上に静的ホスティングする。
• バックエンド：Node.jsを使ったRestAPI。Lambdaにデプロイ。
• インフラ構築：Terraformを用いる。

1. tfstateを格納するためのS3バケットをコンソールから作成する

2. 1で作成したバケット名をここに記入

3. ローカル環境にAWSのシークレットを用意

export AWS_ACCESS_KEY_ID="an access key"
export AWS_SECRET_ACCESS_KEY="a secret key"

4. Terraformコマンドの実行

cd terraform
terraform apply

5. バックエンドのコードをLambdaにアップロード

6. フロントエンドのビルド&S3バケットにアップロード

cd frontend
npm run build

frontend/配下に作成されたbuild/フォルダをS3にアップロード

1. tfstateを格納するためのS3バケットをコンソールから作成する

2. 1で作成したバケット名をここに記入

3. Github環境にAWSのシークレットを用意

AWS_ACCESS_KEY_ID="an access key"
AWS_SECRET_ACCESS_KEY="a secret key"

4. ActionsのページからGithub Actionsを手動でトリガーする

cd terraform
terraform apply

5. フロントエンドのビルド&S3バケットにアップロード

cd frontend
npm run build

frontend/配下に作成されたbuild/フォルダをS3にアップロード

(1) ヘルスチェック

• リクエスト
  • メソッド: GET
  • URI: /health
• レスポンス

(2) ログイン

• リクエスト
  • メソッド: POST
  • URI: /login
  • ボディ

    {
      user: {
          username: "sample",
          name: "sample"
        },
      token: "xxxxxx"
    }

• レスポンス
  • ボディ

    {
      "username": "sample",
      "password": "sample"
    }

(3) 登録

• リクエスト
  • メソッド: POST
  • URI: /register
  • ボディ

    {
      "name": "sample",
      "email": "[email protected]",
      "username": "sample",
      "password": "sample"
    }

• レスポンス
  • ボディ

    {
      username: "sample"
    }

(4) ユーザー確認

• リクエスト
  • メソッド: POST
  • URI: /verify
  • ボデイ

    {
        "user": {
            "username": "sample"
        },
        "token": "xxxxx"
    }

• レスポンス
  • ボディ

    {
      verified: True or False,
      message: 'success',
      user: "sample",
      token: "xxxxxx"
    }