Skip to content

webdino/lyceum-pokemon

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

200 Commits

components

components

 
 

composables

composables

 
 

docs

docs

 
 

pages

pages

 
 

public

public

 
 

server

server

 
 

utils

utils

 
 

.eslintignore

.eslintignore

 
 

.eslintrc.yaml

.eslintrc.yaml

 
 

.gitignore

.gitignore

 
 

.prettierignore

.prettierignore

 
 

README.md

README.md

 
 

express.js

express.js

 
 

nuxt.config.js

nuxt.config.js

 
 

package-lock.json

package-lock.json

 
 

package.json

package.json

 
 

tsconfig.json

tsconfig.json

 
 

tsup-shim.js

tsup-shim.js

 
 

tsup.config.js

tsup.config.js

 
 

Repository files navigation

lyceum-pokemon

ポケモン API を使った Nuxt+Express アプリ/サーバの開発演習

つまったら

ヒント集を参照してください。それでも解消しなければ助けを求めましょう。

準備

  • AWS のセキュリティ認証情報 にてアクセスキー ID とシークレットアクセスキーを生成してください
  • AWS S3 にて空のバケットを作成してください (設定は全てデフォルトで大丈夫です)

実行環境

  • Node Active LTS
  • 本リポジトリをクローンし、次の使い方に従って実行してください
  • 環境変数は実行環境 (ターミナルセッションなど) の環境変数に設定するか .env ファイルを新規作成して記述してください

動作方法

開発時 Nuxt のみ起動

npm install # npm パッケージのインストール（初回のみ必須）
cat << EOL > .env # .env ファイルの作成（ターミナルに Bash 以外のシェルを使用している場合は適宜読み替えてください）
AWS_ACCESS_KEY_ID=XXXXXXXXXXXXXXXX
AWS_SECRET_ACCESS_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
NUXT_BUCKET_NAME=<作成した S3 バケット名>
EOL
npm run dev # 開発サーバーの起動

開発時 Nuxt と Express 起動

npm install # npm パッケージのインストール（初回のみ必須）
cat << EOL > .env # .env ファイルの作成（ターミナルに Bash 以外のシェルを使用している場合は適宜読み替えてください）
AWS_ACCESS_KEY_ID=XXXXXXXXXXXXXXXX
AWS_SECRET_ACCESS_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
NUXT_BUCKET_NAME=<作成した S3 バケット名>
NUXT_PUBLIC_BACKEND_ORIGIN=http://localhost:4000
EOL
npm run dev:express # 開発サーバーの起動

App Runner へデプロイ

準備: ロールの作成

https://us-east-1.console.aws.amazon.com/iamv2/home#/roles より「ロールを作成」をクリック

カスタム信頼ポリシーを選択し、以下のカスタム信頼ポリシーを作成

参考: アプリケーションランナー IAM ロール

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Statement1",
      "Effect": "Allow",
      "Principal": {
        "Service": "tasks.apprunner.amazonaws.com"
      },
      "Action": "sts:AssumeRole"
    }
  ]
}

許可ポリシーから AmazonS3FullAccess を指定

ロール名を入力して作成

App Runner サービスの作成

https://us-east-1.console.aws.amazon.com/apprunner/home#/services からサービスの作成をクリック

リポジトリタイプは「ソースコードリポジトリ」を指定、必要に応じてAWS Connector for GitHubアプリをインストールし、webdino/lyceum-pokemonをフォークしたリポジトリを指定

下記の通り設定（ランタイムは適宜最新の Nodejs ランタイムを選択します）

サービス設定は下記のとおり設定

このとき、環境変数 NUXT_BUCKET_NAME は作成した S3 バケット名にしてください

準備で作成したIAMロールをインスタンスロールとして指定

ここでは、IAMロールを apprunner-have-s3fullaccess としています

npm スクリプト

次の npm スクリプトを用意しています (package.json の記述と npm run の出力を参照)。

  • npm install: npm パッケージのインストール
  • npm run dev: 開発サーバーの起動
  • npm run dev:express: 開発サーバーの起動 (別プロセスでの Express サーバー起動を含む)
  • npm run build: アプリケーションのプロダクションビルドを .output ディレクトリに生成する
  • npm start: プロダクションビルドを使ったローカルサーバーの起動 (事前にビルドしておくこと)
  • npm run lint: コードリント
  • npm run format: コード整形

環境変数

変数名 説明 初期値
AWS_ACCESS_KEY_ID AWS 認証情報のアクセスキー ID なし
AWS_SECRET_ACCESS_KEY AWS 認証情報のシークレットアクセスキー なし
NUXT_REGION AWS のリージョン "ap-northeast-1"
NUXT_BUCKET_NAME 本アプリケーションのデータ永続化に用いる AWS S3 バケット ""
NUXT_PUBLIC_BACKEND_ORIGIN Nuxt から Express への API リクエストに用いるオリジン1 なし
HOST または NITRO_HOST npm start 時反映される Nuxt サーバーのホスト名 "0.0.0.0"
PORT または NITRO_PORT npm start 時反映される Nuxt サーバーのポート番号 3000
FRONTEND_ORIGIN Express サーバが CORS を許可するアクセス元オリジン。Nuxt 側のオリジンを設定する "http://localhost:3000"
BACKEND_PORT Express が HTTP(S) リクエストを受け付けるポート番号 4000

それぞれのケースで注意を払うべき環境変数の対応表

初期値がなくチェックがあるものについては、必ず自身で値を設定する必要があります。初期値があるものであっても、チェックがあるものについては自身で値を設定する必要がある場合があります。

変数名 開発時 Nuxt のみ起動 開発時 Nuxt と Express 起動 App Runner へデプロイ
AWS_ACCESS_KEY_ID 2 ✔️ ✔️
AWS_SECRET_ACCESS_KEY 2 ✔️ ✔️
NUXT_REGION 3
NUXT_BUCKET_NAME 4 ✔️ ✔️ ✔️
NUXT_PUBLIC_BACKEND_ORIGIN ✔️
HOST または NITRO_HOST ✔️
PORT または NITRO_PORT ✔️
FRONTEND_ORIGIN ✔️
BACKEND_PORT ✔️

クライアント画面構成

画面名 機能
スタート 「つづきからはじめる」と「あたらしくはじめる」に遷移できる
あたらしくはじめる トレーナー名を入力してトレーナーが追加できる
つづきからはじめる どのトレーナーを表示するか選択できる
トレーナー情報 「ポケモンをつかまえる」に遷移できる、ポケモンにニックネームをつけられる、ポケモンを削除できる、トレーナーを削除できる
ポケモンをつかまえる ポケモンを追加できる

ER 図

erDiagram

Trainer ||--o{ Pokemon : pokemons

Trainer {
  string name PK "トレーナー名"
}

Pokemon {
  int id PK "手持ちポケモン識別子"
  string nickname "ニックネーム"
  int order "ポケモン図鑑番号"
  string name "ポケモン名"
  string sprites "スプライト（画像）"
}

サーバー API と AWS S3 の対応関係

サーバー API AWS S3
トレーナー名の一覧の取得 S3 オブジェクトの一覧の取得
トレーナーの追加 S3 オブジェクトの追加または更新
トレーナーの取得 S3 オブジェクトの取得
トレーナーの更新 S3 オブジェクトの追加または更新
トレーナーの削除 S3 オブジェクトの削除
ポケモンの追加 S3 オブジェクトの追加または更新
ポケモンの削除 S3 オブジェクトの追加または更新

S3 バケットに作成する S3 オブジェクトのサンプル

トレーナー情報 (トレーナーの名前や保有ポケモンのリスト) は AWS S3 のバケットの中に トレーナー名.json のような JSON ファイルとして保存します。 S3 バケット内のファイルリスト = トレーナーリストであり、トレーナーの情報は全てトレーナー名毎の JSON ファイルに含めています。

例えば、トレーナー名が レッド の場合は次のようになります:

  • レッド.json: S3 オブジェクトキー（ファイル名）
  • 次のコードブロック: S3 オブジェクト値（ファイル内容）
{
  "name": "レッド",
  "pokemons": [
    {
      "id": 1,
      "nickname": "",
      "order": 35,
      "name": "pikachu",
      "sprites": {
        "front_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png"
      }
    },
    {
      "id": 2,
      "nickname": "",
      "order": 220,
      "name": "espeon",
      "sprites": {
        "front_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/196.png"
      }
    }
  ]
}

API エンドポイント

GET /api/trainers

トレーナー名の一覧の取得

パラメーター

なし

レスポンス

200
["コジロウ", "サトシ", "ムサシ", "レッド"]

POST /api/trainer

トレーナーの追加

パラメーター

なし

リクエストボディ

  • name: トレーナー名（必須）
  • pokemons: 手持ちポケモン（任意）
{ "name": "satoshi" }

レスポンス

200

PutObjectCommandOutput

400

空（リクエストボディに必要なプロパティが含まれていない場合に返される）

409

空（すでにトレーナーが存在する場合に返される）

GET /api/trainer/:trainerName

トレーナーの取得

パラメーター

  • trainerName: トレーナー名

レスポンス

200
{ "name": "satoshi", "pokemons": [] }

POST /api/trainer/:trainerName

トレーナーの更新

パラメーター

  • trainerName: トレーナー名

リクエストボディ

  • name: トレーナー名（必須）
  • pokemons: 手持ちポケモン（任意）
{ "name": "satoshi" }

レスポンス

200

PutObjectCommandOutput

404

空（トレーナーが存在しない場合に返される）

DELETE /api/trainer/:trainerName

トレーナーの削除

パラメーター

  • trainerName: トレーナー名

レスポンス

204

DeleteObjectCommandOutput

POST /api/trainer/:trainerName/pokemon

ポケモンの追加

パラメーター

  • trainerName: トレーナー名

リクエストボディ

  • name: ポケモン名（必須）

レスポンス

200

PutObjectCommandOutput

DELETE /api/trainer/:trainerName/pokemon/:pokemonId

ポケモンの削除

パラメーター

  • trainerName: トレーナー名
  • pokemonId: 手持ちポケモン識別子

レスポンス

200

DeleteObjectCommandOutput

Footnotes

  1. NUXT_PUBLIC_BACKEND_ORIGIN は末尾の / は入れないようにしてください。npm run dev の開発サーバでは問題無くとも npm start で本番環境を動かす場合などで 500 エラーになる場合があります。 ↩

  2. AWS SDK により認証情報が提供されている場合不要です。 https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v3/developer-guide/loading-node-credentials-shared.html ↩ ↩2

  3. "ap-northeast-1" 以外のリージョンを使用している場合は設定必須です。 ↩

  4. AWS S3 バケット名はいずれの場合も設定必須です。npm run build; npm start でローカル起動する場合には特に OS 環境変数への設定が必須 (他と異なり .env ファイルが読まれない) ことに注意してください。 ↩

About

ポケモン API を使った Nuxt+Express アプリ/サーバの開発演習

Resources

Readme
Activity
Custom properties

Stars

3 stars

Watchers

7 watching

Forks

28 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •  

Languages