Next.js+Python を Docker 環境で動かす

Docker 初心者を抜けて、自分で環境構築をし始めた人向け。

この流れを理解すると、それなりに自由度高く環境構築できるようになる気がします。

完コピでも起動すると思うので、誰かの参考になれば嬉しく思います。

## 筆者の環境

- Windows
- WSL2 > Ubuntu - 20.04.6 LTS
- node.js - 18.17.1
- npm - 9.8.0

## 全体の流れ

1. WindowsPC に WSL2 と Ubuntu を導入
2. node.js/npm をインストール（バージョンを要確認）
3. project フォルダを作成+docker-compose.yml を追加
4. `npx create-next-app client`を実行
5. Next.js が起動することをローカルで確認
6. client フォルダ内に Dockerfile を追加（Nextjs 用）
7. 同様に server フォルダを作成+Dockerfile 追加（Python 用）
8. project フォルダ内で`docker compose up --build -d`を実行
9. 各コンテナが立ち上がればクリア

### 【1】WindowsPC に WSL2 と Ubuntu を導入

ドキュメントこそ正義。

https://learn.microsoft.com/ja-jp/windows/wsl

Ubuntu ディストリビューションは、LTS を選んでおけば良いと思います。

バージョンによる差異は分からないので、優しい人は教えてください。

[Ubuntu 20.04 LTS](https://www.microsoft.com/store/apps/9n6svws3rx71)

### 【2】node.js/npm をインストール（バージョンを要確認）

node や npm コマンドは、それぞれインストールしなければ使えません。

Windows 環境での開発が長く、これから Docker 環境をメインにしたいというケースだと、忘れがちかもしれません（僕は忘れていて、小一時間が溶けました）。

・パッケージリストの更新

```
sudo apt update
```

・nvm をインストール

```
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

```

・Node.js をインストール

```
nvm install --lts
```

・NPM のインストール

```
sudo apt install npm
```

### 【3】project フォルダを作成+docker-compose.yml を追加

おおよそ下記のように設定すれば、クライアント側は起動するはず。

```yml
version: "3.9"

services:
  client:
    build:
      context: ./client
      dockerfile: Dockerfile
    volumes:
      - ./client:/client # mount
      - /client/node_modules # unmount node_modules
    environment:
      - CHOKIDAR_USEPOLLING=true # hot reload
    ports:
      - "3000:3000"
    command: sh -c "npm install && npm run dev"
    stdin_open: true
    tty: true

  server:
    build:
      context: ./server
      dockerfile: Dockerfile
    ports:
      - "5000:5000"
    tty: true
```

### 【4】`npx create-next-app client`を実行

client フォルダに Next.js のプロジェクトを作成します。

基本、全部 Yes で良いと思います。

### 【5】Next.js がローカルで起動することを確認

`npm run dev`を実行して、ローカルで Next.js が起動することを確認します。

ここまでの手順をクリアできていれば、問題なく起動するはずです。

もし起動できなければ、Node.js のインストールの有無や、適正なバージョンかどうか確認（`node -v`が v10 になっていないか？）してみてください。

### 【6】client フォルダ内に Dockerfile を追加（Nextjs 用）

docker-compose.yml で指定した Dockerfile を作成します。

npm install と npm run dev の実行は docker-compose.yml で指定しています。

なのでここでは簡単に、 Next.js のイメージを作成するだけで OK。

```Dockerfile
FROM node:20

WORKDIR /client
```

### 【7】同様に server フォルダを作成+Dockerfile 追加（Python 用）

client フォルダと同様に、server フォルダを作成します。

こちらは Python 用の Dockerfile を作成します。

サーバーで行いたい処理内容に応じて、必要なパッケージのインストールなど、自由にカスタマイズしてください。

```Dockerfile
FROM python:3.9.7-alpine

WORKDIR /app
```

### 【8】project フォルダ内で`docker compose up --build -d`を実行

ここまでの手順をクリアできていれば、`docker compose up --build -d`を実行するだけで、コンテナが立ち上がります。

- `--build`：再ビルド
- `-d`：バックグラウンド実行

### 【9】各コンテナが立ち上がればクリア

お疲れ様でした。

Enjoy Docker Life !

## Points

後日談というかまとめ。

今回、ゼロから環境を構築して思ったこと。

### Docker 以外での環境構築はもはや考えられない

Docker があるとないとでは、開発環境の構築にかかる手間が全然違います。

間違えても、設定ファイルを書き直して再ビルドすれば、またクリーンな状態で起動します。

PCのオン・オフよりも軽い気持ちで環境を作り直せるので、気楽に開発できるようになったのを実感します。

### まずはローカルで動かすことを目標にする

これが基本で、ローカルで動かし方が分からないものを Docker 上で動かすのは難しいと思います。

とはいえバックエンドをローカルに環境構築するのは大変でしょうが、フロントエンドは簡単です。

まずはローカルで動かし、それをそのまま Dockerfile に書くようにすれば、やることがイメージしやすいと思います。

### Docker 上に何があれば動作するかを調べる

ローカルで動くということは、ある程度、どうやったら動くか分かっているはずです。

必要なソフトウェアや OS などが分かっていれば、それを Docker 上に再現することだけ考えれば良いです。

逆にいえば、通常の PC は多様なソフトウェアが雑多にインストールされている状態であり、それを排除できるのが Docker の強み。

また必要なものだけであれば、再現性も高くなります。

### コンテナをたくさん作って理解を深めよう

僕も最初は学習コストが高いイメージがあって、なかなか手を出せずにいました。

しかしDockerを使うメリットは、使っているうちに分かるというもの。

とにかく何でもDockerを使ってプロジェクトを作るようにするのがおすすめです。

4つくらい作った後に、ローカル環境にDockerを使わない環境構築をしてみてください。

その違いが分かると思いますし、二度とローカルに環境構築することはしなくなると思います笑