Next.js(ts) docker導入(作業メモ)
Nico※途中で方針を変更したため、このスクラップは完結していません。
create next appでアプリケーション作成済み。
dockerの設定を追加し、DB周りも構築する。
Nicoプロジェクトのルートディレクトリ直下に、Docker fileを作成する。
cd ~/project-file
touch Dockerfile
作成したDockerfileには、next.jsのサンプルコードに記載の内容をコピペする。開発環境と本番環境で使用できるように設定したいので、with-docker-composeのサンプルを使用する。
今回は、開発環境用のdev.Dockerfileと本番環境用のprod.Dockerfileを配置する。(テスト環境にはvercelを使用する想定のため、テスト環境用は作成しない)
条件分岐でnpmにもyarnにも対応できるようになっている。
dev
prod
Nicodev.Dockerfileの中身について
FROM node:18-alpine
この行は、ベースイメージとしてnode:18-alpineを指定しています。これはNode.jsのバージョン18を含むAlpine Linuxをベースにした軽量なイメージです。Alpine Linuxは、その小さなサイズとセキュリティのため、コンテナ環境において人気があります。
WORKDIR /app
WORKDIRはコンテナ内での作業ディレクトリを設定します。この例では/appディレクトリを作業ディレクトリとして使用します。これにより、以降の命令（COPYやRUNなど）がこのディレクトリ内で実行されます。
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
このCOPY命令は、ホストマシンからコンテナ内の作業ディレクトリ（/app）にpackage.jsonと各パッケージマネージャーのロックファイルをコピーします。*は、対応するロックファイルが存在する場合にのみそれをコピーすることを意味します。
RUN (Package Installation)
ここでは、存在するロックファイルに基づいて依存関係をインストールする条件分岐があります。これにより、使用するパッケージマネージャーに応じて異なるインストールコマンドが実行されます：
yarn.lockが存在する場合はyarn --frozen-lockfileを実行します。
package-lock.jsonが存在する場合はnpm ciを実行します。
pnpm-lock.yamlが存在する場合はcorepack enable pnpmでpnpmを有効にした後にpnpm iを実行します。
ロックファイルがない場合は、警告メッセージを出力しyarn installを実行します。
COPY src ./src とその他のCOPY命令
これらの命令は、アプリケーションのソースコード、公開可能ファイル、Next.jsの設定ファイル、TypeScriptの設定ファイルなど、必要なファイルをコンテナにコピーします。
ENV NEXT_TELEMETRY_DISABLED 1
この環境変数はコメントアウトされていますが、有効にするとNext.jsによる匿名の使用状況データの収集を無効にします。これはプライバシーに関する考慮から選択することができます。
CMD (Command to Start the App)
最後に、使用されているパッケージマネージャーに応じて開発サーバーを起動するための条件分岐があります。この設定により、適切なコマンドでNext.jsアプリケーションを開発モードで起動します。
Nicostandaloneモードを使った方がイメージサイズが大幅に削減できるらしい。ので、standaloneモードの設定を追加する。
next.config.mjs(next.config.js)に以下を追加する。
output: 'standalone',
docker-composeファイルを作成する。
こちらもnext公式サンプルを使用する。
変更箇所は以下
- context : 実際のDokcerfileのパスに変更、今回はrootディレクトリにあるので"."を設定
- ports : 必要に応じて変更
- network設定はここでは不要なので削除する
- services: next-appとなっているので自分の開発物に合わせて変更する
- 末尾にcommand: npm run devを追加する
- 環境変数のサンプルの部分は削除
開発環境用 本番環境用
Nicodocker-composeの中身について
Version
version: "3"は使用しているDocker Composeファイルのバージョンを指定します。このバージョンは、使用する機能とその構文に依存します。
Services
next-app
このセクションではnext-appという名前のサービスを定義しています。
container_name: next-app: コンテナの名前をnext-appと設定しています。これにより、Docker内でこの名前を使ってコンテナを参照できます。
build:
context: ./next-app: Dockerfileが置かれているディレクトリのパスを指定しています。これはビルドコンテキストとなります。
dockerfile: dev.Dockerfile: 使用するDockerfileの名前を指定しており、ここではdev.Dockerfileという開発用の設定ファイルを使用しています。
environment: コンテナ内で利用する環境変数を設定します。ここで定義されたENV_VARIABLEやNEXT_PUBLIC_ENV_VARIABLEは、コンテナが実行される際に利用可能となります。
env_file: 環境変数を.envファイルから読み込む設定です。ファイル内の変数がコンテナ内で使用できるようになります。
volumes:
./next-app/src:/app/src: ホストのnext-app/srcディレクトリをコンテナの/app/srcにマウントします。これにより、ソースコードの変更がコンテナに直接反映され、開発時のライブリロードが可能になります。
./next-app/public:/app/public: 同様に、publicディレクトリもマウントされます。
restart: always: コンテナが停止した場合に常に再起動するように設定します。
ports: ホストのポート3000をコンテナのポート3000にマッピングし、外部からのアクセスを可能にします。
Networks
networks:
my_network: my_networkという名前のネットワークを定義し、external: trueとすることで、既存の外部ネットワークにこのサービスを接続します。これにより、他のコンテナやサービスと通信が可能になります。
Nicodocker-compose -f docker-compose.dev.yml build
でイメージをビルドする。
Nicofailed to solve: Internal: rpc error: code = Internal desc = rpc error: code = Internal desc = header key "followpaths" contains value with non-printable ASCII characters
困った。
NicoCOPY next.config.js を COPY next.config.mjs に変更したときに、mを日本語入力モードで入力してしまっていたのが原因だった。英字入力で入力し、解消。
Nicodocker-compose -f docker-compose.dev.yml up
でコンテナを起動する。
を開き、Next.jsの初期画面が表示されれば、お父さんスイッチの出来上がり。
Nicoprisma(DBクライアント)をinstallする。
docker-compose -f docker-compose.dev.yml exec app npm install prisma --save-dev
docker-compose -f docker-compose.dev.yml exec app npx prisma init