皆さんこんにちは。Sandyマンです。今回は、「Docker×Next.js×NestJS×PostgreSQL」の環境構築をしていきます！ それではやっていきましょう！ （Docker未経験なので間違ってるかもです…。）
必要なもの
- Docker Desktop or Docker CE
- WindowsならWSL2
- 好きなエディタ
Dockerをインストールしてない人はさっさと公式サイトに飛んでインストールしましょう！！
1.いろいろフォルダとかを作る
今回はWSL2上でDockerを使って、こんな感じで作ろうと思います。
1my-app
2┗frontend
3┗backend
4┗nginxNginxはリバースプロキシ用に入れてあります。それぞれ適当にmkdirして作っておきます。
2.Next.jsの環境構築
まず最初に、Next.jsの環境構築をしていきます。frontend内で、npx create-next-app .と打っていい感じにします。（いい感じとは）できたら、Dockerfileを作成して書き込んでいきます。内容はだいたいこんな感じです。まあChatGPTに丸投げしたんだけど
1# ベースイメージとして公式のNode.jsイメージを指定
2FROM node:18-alpine
3
4# アプリケーションのディレクトリを設定
5WORKDIR /app
6
7# package.jsonとpackage-lock.jsonをコピー
8COPY package*.json ./
9
10# 依存関係のインストール
11RUN npm install
12
13# アプリケーションのソースコードをコピー
14COPY . .
15
16# アプリケーションのビルド
17RUN npm run build
18
19# ポート3000で実行
20EXPOSE 3000
21
22# アプリケーションの起動
23CMD ["npm", "start"]3.NestJSの環境構築
次は、NestJSのほうをやっていきます。NestJSの方のコマンドはこんな感じです。（backendディレクトリ内で実行）
1npm install -g @nestjs/cli
2nest new .次にDockerfileを作成して書き込んでいきます。~~もちろんこれもChatGPT ~~
1# ベースイメージとして公式のNode.jsイメージを指定
2FROM node:18-alpine
3
4# アプリケーションのディレクトリを設定
5WORKDIR /app
6
7# package.jsonとpackage-lock.jsonをコピー
8COPY package*.json ./
9
10# 依存関係のインストール
11RUN npm install
12
13# アプリケーションのソースコードをコピー
14COPY . .
15
16# ポート4000で実行
17EXPOSE 4000
18
19# アプリケーションの起動
20CMD ["nest", "start"]4.Nginxの環境構築
Nginxのリバースプロキシとか正直よくわからないんですけど、なんかやった方がいいらしいのでやっていきます。リバースプロキシについては、今度記事にしてまとめてみようと思います。
Nginxディレクトリの中に、nginx.confを作ります。作ったら下のように書き込んでいきます。
1http {
2 server {
3 listen 80;
4 server_name localhost;
5
6 location / {
7 proxy_pass http://frontend:3000;
8 proxy_set_header Host $host;
9 proxy_set_header X-Real-IP $remote_addr;
10 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
11 proxy_set_header X-Forwarded-Proto $scheme;
12 }
13
14 location /api {
15 proxy_pass http://backend:4000;
16 proxy_set_header Host $host;
17 proxy_set_header X-Real-IP $remote_addr;
18 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
19 proxy_set_header X-Forwarded-Proto $scheme;
20 }
21 }
22}ついでにDockerfileも作ります。一行だけFROM nginx:latestとだけ書いておきましょう。
5.docker-compose.ymlの作成
では、docker-compose.ymlを作成していきます。（最近はcompose.yamlとかいうらしい）プロジェクトディレクトリ直下に、docker-compose.ymlを作成して書き込んでいきます。
1version: '3'
2
3services:
4 frontend:
5 container_name: my-app-frontend
6 build: ./frontend
7 command: npm run dev
8 volumes:
9 - ./frontend/src:/app/src
10 - ./frontend/package.json:/app/package.json
11 - ./frontend/package-lock.json:/app/package-lock.json
12 ports:
13 - "3000:3000"
14 depends_on:
15 - backend
16
17 backend:
18 container_name: my-app-backend
19 build: ./backend
20 command: npm run start:dev
21 volumes:
22 - ./backend/src:/app/src
23 - ./backend/package.json:/app/package.json
24 - ./backend/package-lock.json:/app/package-lock.json
25 ports:
26 - "4000:4000"
27 depends_on:
28 - db
29
30 db:
31 container_name: my-app-db
32 image: postgres:latest
33 environment:
34 POSTGRES_USER: ${POSTGRES_USER}
35 POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
36 POSTGRES_DB: ${POSTGRES_DB}
37 volumes:
38 - db-data:/var/lib/postgresql/data
39
40 nginx:
41 container_name: my-app-nginx
42 build:
43 context: ./nginx
44 dockerfile: Dockerfile
45 volumes:
46 - ./nginx/nginx.conf:/etc/nginx/nginx.conf
47 ports:
48 - "80:80"
49 depends_on:
50 - frontend
51 - backend
52
53volumes:
54 db-data:6.動作確認
ここまで来たら、後は動かすだけです。docker-compose up -dで動かしてみましょう。いい感じにできたら成功です！
まとめ
ということで、Dockerでの環境構築でした。Dockerは初めてで手探りでやってみたので、もしかしたら間違っているところがあるかもしれません（多分ある）もしあったら、ブログのリポジトリをGitHubで公開してるので、そちらに送ってくださると助かります！それではさようならーーーーーーーー！
GitHubのリンク https://github.com/SuperSandyman/sandyman-papermod-blog