【勉強用】ローカルでサクッとフルスタック環境(Docker & Prisma & Next.js)
目次
はじめに
フルスタック開発の流れを体験できる環境をDockerで作りました。 自分自身の備忘録も兼ねていますが、同じように学習を始める方の参考になれば嬉しいです。
動機
もともとは「バックエンドの仕組みをしっかり勉強したい！」という思いからスタートしました。
しかし、
- 「Dockerを使って環境構築しよう」
- 「フロントエンドでもスムーズにデータ見たい」
などいろいろ詰め込んだら全部入りのymlファイルができました。
※AIと相談しながらだいたい6時間くらいかかって環境作れました笑
環境構成
作成した docker-compose.yml では、以下の4つのサービスが動くようになっています。
- PostgreSQL: データベース本体
- Backend: APIサーバー。起動時に自動で Prisma のマイグレーションを実行します
- Prisma Studio: ブラウザからDBの中身をポチポチ操作できる管理画面
- Frontend: Next.js (App Router)
使用方法・詳細
コードの全容や詳細なセットアップ手順については、GitHubのリポジトリにまとめました。READMEを読みながら試していただければと思います。
前提として自分はWSL2環境で動かしてました。Macでも確認しましたが、Macでも一応動作確認はできました。もし、WSL環境でこれを試される方で、WSL環境でDockerの環境作成していない方は以下を参考にして頂くといいかもしれません。
まとめ・アドバイスのお願い
バックエンドの勉強のために作り始めた環境ですが、インフラ周りをいじるのも楽しくてついつい作り込んでしまいました。
まだまだ勉強中の身ですので、「ここはもっとこうした方がスマートだよ！」「この設定は危ないよ！」といったアドバイスやご指摘があれば、ぜひコメント欄で教えていただけると嬉しいです。
よろしくお願いします！
最近ポートフォリオサイトも作成しました。
まだ作品はほぼないようなもんですが、是非見てみてください！