ポケモン API を使った Nuxt+Express アプリ/サーバの開発演習
ヒント集を参照してください。それでも解消しなければ助けを求めましょう。
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 # 開発サーバーの起動
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 # 開発サーバーの起動
次の 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 リクエストに用いるオリジン[^オリジン以外禁止] | なし |
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_PUBLIC_BACKEND_ORIGIN
は末尾の /
は入れないようにしてください。npm run dev
の開発サーバでは問題無くとも npm start
で本番環境を動かす場合などで 500 エラーになる場合があります。
初期値がなくチェックがあるものについては、必ず自身で値を設定する必要があります。初期値があるものであっても、チェックがあるものについては自身で値を設定する必要がある場合があります。
変数名 | 開発時 Nuxt のみ起動 | 開発時 Nuxt と Express 起動 | App Runner へデプロイ |
---|---|---|---|
AWS_ACCESS_KEY_ID [^AWS_クレデンシャル] |
:heavy_check_mark: | :heavy_check_mark: | |
AWS_SECRET_ACCESS_KEY [^AWS_クレデンシャル] |
:heavy_check_mark: | :heavy_check_mark: | |
NUXT_REGION [^他のリージョン] |
|||
NUXT_BUCKET_NAME [^AWS_S3_バケット名] |
:heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
NUXT_PUBLIC_BACKEND_ORIGIN |
:heavy_check_mark: | ||
HOST または NITRO_HOST |
:heavy_check_mark: | ||
PORT または NITRO_PORT |
:heavy_check_mark: | ||
FRONTEND_ORIGIN |
:heavy_check_mark: | ||
BACKEND_PORT |
:heavy_check_mark: |
[^AWS_クレデンシャル]: AWS SDK により認証情報が提供されている場合不要です。 https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v3/developer-guide/loading-node-credentials-shared.html
[^他のリージョン]: "ap-northeast-1"
以外のリージョンを使用している場合は設定必須です。
[^AWS_S3_バケット名]: AWS S3 バケット名はいずれの場合も設定必須です。npm run build; npm start
でローカル起動する場合には特に OS 環境変数への設定が必須 (他と異なり .env
ファイルが読まれない) ことに注意してください。
画面名 | 機能 |
---|---|
スタート | 「つづきからはじめる」と「あたらしくはじめる」に遷移できる |
あたらしくはじめる | トレーナー名を入力してトレーナーが追加できる |
つづきからはじめる | どのトレーナーを表示するか選択できる |
トレーナー情報 | 「ポケモンをつかまえる」に遷移できる、ポケモンにニックネームをつけられる、ポケモンを削除できる、トレーナーを削除できる |
ポケモンをつかまえる | ポケモンを追加できる |
erDiagram
Trainer ||--o{ Pokemon : pokemons
Trainer {
string name PK "トレーナー名"
}
Pokemon {
int id PK "手持ちポケモン識別子"
string nickname "ニックネーム"
int order "ポケモン図鑑番号"
string name "ポケモン名"
string sprites "スプライト(画像)"
}
サーバー API | AWS S3 |
---|---|
トレーナー名の一覧の取得 | S3 オブジェクトの一覧の取得 |
トレーナーの追加 | S3 オブジェクトの追加または更新 |
トレーナーの取得 | S3 オブジェクトの取得 |
トレーナーの更新 | S3 オブジェクトの追加または更新 |
トレーナーの削除 | S3 オブジェクトの削除 |
ポケモンの追加 | S3 オブジェクトの追加または更新 |
ポケモンの削除 | S3 オブジェクトの追加または更新 |
トレーナー情報 (トレーナーの名前や保有ポケモンのリスト) は AWS S3 のバケットの中に トレーナー名.json のような JSON ファイルとして保存します。 S3 バケット内のファイルリスト = トレーナーリストであり、トレーナーの情報は全てトレーナー名毎の JSON ファイルに含めています。
例えば、トレーナー名が レッド
の場合は次のようになります:
レッド.json
: 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/trainers
トレーナー名の一覧の取得
なし
["コジロウ", "サトシ", "ムサシ", "レッド"]
/api/trainer
トレーナーの追加
なし
name
: トレーナー名(必須)pokemons
: 手持ちポケモン(任意){ "name": "satoshi" }
空(リクエストボディに必要なプロパティが含まれていない場合に返される)
空(すでにトレーナーが存在する場合に返される)
/api/trainer/:trainerName
トレーナーの取得
trainerName
: トレーナー名{ "name": "satoshi", "pokemons": [] }
/api/trainer/:trainerName
トレーナーの更新
trainerName
: トレーナー名name
: トレーナー名(必須)pokemons
: 手持ちポケモン(任意){ "name": "satoshi" }
空(トレーナーが存在しない場合に返される)
/api/trainer/:trainerName
トレーナーの削除
trainerName
: トレーナー名/api/trainer/:trainerName/pokemon
ポケモンの追加
trainerName
: トレーナー名name
: ポケモン名(必須)/api/trainer/:trainerName/pokemon/:pokemonId
ポケモンの削除
trainerName
: トレーナー名pokemonId
: 手持ちポケモン識別子