Docker + Next.js13ちゃっちゃと動かしたい人へ

はじめに

Docker前提の記事なのと、使い捨ての環境を作れるようになると便利なのでDocker入れてない人はこの機会に是非入れてみてください！！(Docker Init熱いから入れ得やで！！！)

他の方の記事を使用していますが、もし問題があるならコメントいただけると幸いです。
後エラーとかの問題起きたらコメントいただけると嬉しいです(調べて追加していきたいので！)。

Docker Install参考

筆者はWindowsなので以下の記事を参考に入れました。(多分)

注意

使用する際の注意点ですが、Ubuntuのhome配下にプロジェクトフォルダを配置して使用しないと全体的に遅くなるので注意してください。(筆者は過去にnode_module入れるのに10分以上かかってキレました。)

本編

下部に使用するファイルと最終結果があるので参考にしてください。

• docker-composeはv2。
• 筆者はWSL2を使用しUbuntuにDockerを入れて使ってるので何かあったら適宜対処してください。
  • docker-compose v1の場合は　docker compose を　docker-compose に変えてください。

v2: docker compose build --no-cache
    to
v1: docker-compose build --no-cache

コンテナの作成と起動後コンテナ内へ

• 使用するファイルにあるDockerfile、docker-compose.yml、.dockerignoreを作成し内容をコピペ後以下コマンド(ローカル)

docker compose build --no-cache && docker compose up -d && docker compose exec next ash

コンテナ内

• 以下コマンド実行、名前をnext-appにして感謝のエンター連打(コンテナ)

pnpx create-next-app@latest

• 使用するファイルにあるDockerfile(変更後)を参考にDockerfileを変更後し以下コマンド(コンテナ)

※ 以下を1行ずつ順に使用してください
exit
docker compose down && docker compose build --no-cache && docker compose up -d && docker compose exec next ash

• 最後に開発環境で動かすやで！(コンテナ)

 pnpm i && pnpm dev

• http://localhost:3000/ で確認できます。

PS.もうちょい勉強するなら英語やけどこの動画が良さそう。

使用するファイル

Dockerfile

FROM node:18.16-alpine3.18

ENV APP_ROOT /node/next-app

RUN apk update && \
    npm install -g pnpm && \  # デフォルトで入ってるyarnを使用する場合この行いらないです
    mkdir -p $APP_ROOT

WORKDIR $APP_ROOT

COPY . .

EXPOSE 3000

docker-compose.yml

version: "3.8"

services:
  next:
    build:
      context: ./
    volumes:
      - ./:/node
    ports:
      - 3000:3000
    tty: true
    command: ash -c '/bin/ash'

.dockerignore

.pnpm-store
next-app/node_modules
next-app/.next
next-app/next-env.d.ts

# Gihubに上げる場合以下追加
.gitignore
.git
next-app/.gitignore

おまけ

Prettier 追加

コンテナ内で以下コマンドを実行

pnpm add -D prettier eslint-config-prettier prettier-plugin-tailwindcss

pnpm format でPrettier使用できるようにpackage.jsonと.eslintrc.jsonを変更

package.json

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
+   "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json}'"  //追加
  }

.eslintrc.json

{
  "extends": ["next/core-web-vitals", "plugin:import/warnings", "prettier"]
}

ここでは分けてますけど、筆者は普段は楽したいがために以下のようにまとめて使用しています。

"lint": "next lint && prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json}'"

Parsing error

vscode使用時、postcss.config.jsでParsing error: Cannot find module 'next/babel'がでるので、
Dockerfileのあるrootに.vscode/settings.json作って以下記述

.vscode/settings.json

{
  "eslint.workingDirectories": ["./next-app"]
}

エラーで検索したら.eslintrc.jsonに以下のように変更みたいなのがでますが、波線消えるだけでpnpm lint実行時に失敗します。

{
  "extends": ["next/core-web-vitals","next/babel"]
}

css(unknownAtRules)

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

＠tailwindでUnknown at rule ＠tailwindcss(unknownAtRules)が出る方は
拡張機能でPostCSS Language Supportを入れてください。

最終結果