導入
今回は最新のNext.jsを最も簡単にセットアップして動くようにするコードを用意したので軽い検証や初めてNextを使う方はぜひ使ってみてください！
必要なもの
これだけです！
初学者向けに今回はvscodeで説明していますがエディターはなんでもいいです
手順
gitが普通に使える方は以下のリポジトリからクローンしてREADME.md通りに構築してください
gitがよくわからない方は以下の手順で進めてください
- 適当な空のフォルダを開きます
2. `Dockerfile`, `Makefile`, `setup.sh` の3つのファイルを作成します
3. それぞれの中身は以下をコピペしてください
Dockerfile
FROM node:18-alpine
WORKDIR /usr/src/app
RUN npm install -g create-next-app
COPY setup.sh /setup.sh
RUN chmod +x /setup.sh
CMD ["/setup.sh"]
setup.sh
#!/bin/sh
PROJECT_DIR="/usr/src/app"
# 以下はproject作成後は消していい
if [ ! -f "$PROJECT_DIR/package.json" ]; then
TMP_DIR=$(mktemp -d -t tmp-nextjs-XXXXXX | tr '[:upper:]' '[:lower:]')
npx create-next-app@latest $TMP_DIR --use-npm --ts --eslint --src-dir
mv $TMP_DIR/* $PROJECT_DIR
mv $TMP_DIR/.[^.]* $PROJECT_DIR
rm -rf $TMP_DIR
fi
echo "Starting Next.js development server..."
npm run dev
Makefile
CONTAINER_NAME=nextjs-container
IMAGE_NAME=nextjs-docker
build:
docker build -t $(IMAGE_NAME) .
run:
docker run --rm -it -p 3000:3000 -v $(PWD):/usr/src/app --name $(CONTAINER_NAME) $(IMAGE_NAME)
bash:
docker exec -it $(CONTAINER_NAME) /bin/sh
4 . ターミナルを開いてください
5 . ターミナルに以下のコマンドを打ちます
make build
make run
最初に立ち上げる時はそこそこ時間がかかります。15分くらいかかったかも!
いくつか質問がされますがよくわからない方は全て適当にEnter押して大丈夫です。後から変更できるので
ターミナルが写真のようになった後、http://localhost:3000 にアクセスしてNextの画面が表示されれば成功です
コンテナに入りたい場合は
make bash
を使ってください
最後に
わからないことやエラーがあったらお気軽にコメントください！
ここから先は興味がある人のみ読んでください
なぜこの方法が「最も簡単」なの？
ホストにNodeやnpmが無くてもよく、それらのバージョンに左右されないからです
公式サイトの手順でNextを動かそうとすると
- 動かしたいバージョンのnodeをインストールする
- インストールしたnodeのバージョンを設定する
- node -v をするがなぜかバージョンが変わっていない
- なんかごちゃごちゃしてpathを通す
- やっと新しいバージョンのnodeのpathが通る
- 動かしたいバージョンのnpmをインストールする
- インストールしたnpmのバージョンを設定する
- npm -vするがなぜかバージョンが変わっていない
- 以下略
こんなことが起きて普通のエンジニアでも1~2時間手こずることがあります
初学者だとここで挫折してもおかしく無いです
だからこそ初学者こそDockerを使うべきだと私は考えており、初学者がDockerのことをよく知らなくても簡単に動かせるようなコードを今回作成しました