url3pokes作ってみた

はじめに

大学のサーバ構築演習科目があったので、そこで作ったシステムについて書きます。
作ってみたい記事はこちら

最終的に作成したシステムについて

うまくいかなかった部分

最初つくろうと思っていた、Docker + EC2 + RDS + Next.jsの構成は、うまくNext.jsをEC2(Nginx)上で動かすことができず、諦めてしまいました、、

一応その際にやったことも備忘録的に残しておきます。

1. Ubuntuでインスタンスを作成
2. 自分のPCからssh接続
3. nginxをインストール
4. リバースプロキシの設定（80番ポート→3000番ポートに流すように）
5. gitをインストールして、github上からcloneでコードを持ってくる
6. node.jsとnpmをインストール
7. npmのビルド
8. nextのイントール
9. ディレクトリの権限を変更して、ｖscodeからsshで接続（たぶんよろしくない）
10. npm run start

ここまでやったら、なぜかsshができなくなり、Next.jsの画面は表示されずにec2インスタンスのグローバルIP上にはnginxの画面が表示されるという事象になってしまいました。

ここの部分で詰まってしまい、授業での提出期限も近づいてきてしまったため、今回はAWSを利用することを諦め、VercelとPlanetScaleを利用することにしました、、、😔

システムの構成図

今回はVercelとPlanetScaleを利用していて、DBの操作にはPrismaというORM(オブジェクト関係マッピング)を使い、SQLではなくメソッドでやり取りをしました。
また、ポケモンたちのデータを持ってくるためにPokeAPIを利用しました。

開発について

環境構築(Nextjs)

環境構築はこちらの記事を参考にして行いました

（docker-compose.ymlのcommandのところで、
cdコマンドでのディレクトリ名を変更するのを忘れてしまい、
ちょっと詰まりました。）

結局Dockerを使った意味はほぼなかったかも...

環境構築(Prisma)

次にprismaをインストールします
cd ｛ プロジェクト名 ｝をしてから、
npm install prisma --save-dev
npx prisma init

.envが作成されているので、それを.gitignoreに追記する。

環境構築（material ui）

muiも使おうと思ってるので、インストールします
npm i @mui/material-next
npm install @mui/icons-material @mui/material @emotion/styled @emotion/react
npm install @material-ui/core --legacy-peer-deps
npm install @material-ui/icons --legacy-peer-deps

DB接続の準備

環境構築がひとまず終わったので、次にPlanetScaleにデータベースを作成して、nextjsからDB操作ができるようにします

1. PlanetScale上にデータベースを作成する（詳細は省略）
2. .envのDATABASE_URLを作成したデータベースのURLに書き換える
3. prismaのschema.prismaに今回作成するテーブルを記載する
4. npx prisma db push
   （このコマンドでschema.prismaに記載したテーブルをデータベースに反映する）
   （dbでうまく行かなければ、prisma.schemaのgeneratorの中身を変更して
   npx prisma generateを実行したら解決しました）
5. データを挿入する処理を作成
   こちらの記事を参考に
6. うまくPrismaを介してデータが追加できているのが確認できたらおっけい

画面イメージを作成

次に実装の前に、画面イメージの作成をします。　

今回は1ページで、URL→ポケモン、ポケモン→URLの二つの画面をタブなどで切り替えられれば、最低限の機能要件は満たせるので、その要件に沿うように画面イメージを作成しました。

イメージの作成はfigmaを利用しました。

Frame1のほうは、ポケモン3匹を入力するとそれに対応したURLが表示される
Frame2のほうは、URLを入れると新たに3匹のポケモンが割り当てられ登録される

といったようなイメージです。

実装

あとはこの画面イメージを参考にしながら、実装しました。
（詳細は省略します。詳しくはgithubに）
PokeAPIから取得したJSONデータの取り扱いで少しつまづきました。

vercelにデプロイ

1. vercelで該当するgithubのリポジトリと紐付ける（？）
2. 環境変数に.envのDATABASE_URLを追加する
3. build設定の変更
   1. Build Commandをnext build && prisma generate && prisma db pushに
   2. Install Commandをnpm install --legacy-peer-deps（バージョンでうまくinstallできないものがあるため）
4. Root DirectoryをNext.jsのプロジェクトのところに変更する

（ここの作業がEC2周りの次につまづきました、、）

完成

まだまだ不十分なところは多々ありますが、一旦最低限の動作ができるところまでは完成できました。

よかったら、実際に触ってみてください（動いていなかったらごめんなさい）
レスポンシブデザインできていないので、PC推奨です。

ふりかえってみて

まず、Next.jsとTypeScriptを使うのが初めてだったので、いい勉強になりました。触っていて楽しいと感じる瞬間が多くあったので、今後もぜひ触って勉強していきます。

あとは、やっぱりインフラ周りが思ったとおりに実装しきれなかった部分が悔しいです。せっかくならEC2上でちゃんと動かしたかったです🥲

この記事を書いていて思ったのですが、EC2での構築の際にややこしくなって、一旦dockerの存在を完全に無視して作業していたのを忘れていました。
もしかしたら、EC2上にdockerもインストールしてdockerも絡めてやるパターンは試してみる価値ありかも、、、

おわりに

とりあえず今回は授業課題だったので、構成は変わってしまったもののなんとか期日までに実装しきれたのでよしとします。

EC2への変更、styleの当て直し、ちゃんとした例外処理、機能の追加などやりたいことはいっぱいあるので、今後気分が乗ればやっていこうと思います。

拙い記事で恐縮ですが、最後まで読んでいただきありがとうございました！