【Docker】Next.js + TypeScriptの環境構築
試行錯誤して0からDockerfileを書いた記録です。
まず適当にDockerfileを書く。
FROM node:16-alpine WORKDIR /app
ビルドしてコンテナに入る。
$ docker build . $ docker run --rm -it -p 3000:3000 a5e52242bb4f sh
コンテナの中でサーバーを立てる
/app # npm i create-next-app /app # ls node_modules package-lock.json package.json /app # npx create-next-app sample_app --typescript /app/sample_app # npm run dev > sample_app@0.1.0 dev > next dev ready - started server on 0.0.0.0:3000, url: http://localhost:3000
http://localhost:3000 へGo!とりあえず無事に動いてる。
マウントする
$ docker run -it --rm -p 3000:3000 -v `pwd`:/app 3ff9c4e9af64 sh /app # npm i create-next-app /app # npx create-next-app sample_app --typescript /app # cd sample_app/ /app/sample_app # npm run dev > sample_app@0.1.0 dev > next dev ready - started server on 0.0.0.0:3000, url: http://localhost:3000
これでホストのファイルシステムと同期 & ホットリロードできるようになっている。
試しにホストのpages/index.tsx
を変更すると即座に変更が確認できる。
Gitで管理する
ホスト側では プロジェクトのルートディレクトリにDockerfileがあり、同階層に sample_appディレクトリがある。ルートディレクトリ上の node_modules
およびpackage.json
は コンテナ上で npm i create-next-app
を実行した時に作成されたものである。つまりもういらない。Dockerfile
をsample_app
の中にいれてしまう。
$ mv Dockerfile sample_app/ $ cd sample_app $ ls Dockerfile next.config.js package.json styles README.md node_modules pages tsconfig.json next-env.d.ts package-lock.json public
このsample_app
をGitの管理下に置く。適当にコミットしてpushする。
$ git init $ git add . $ git commit -m "first-commit"
Git Cloneをする
$ git clone https://github.com/big-of-big/sample_app $ cd sample_app
このディレクトリには node_modules
がない。つまりコンテナなの中ではパッケージをインストールする必要がある。
$ docer run -it --rm -v `pwd`:/app/sample_app -p 3000:3000 80ce3b29c8c7 sh /app/sample_app # npm run dev > sample_app@0.1.0 dev > next dev sh: next: not found
ということで npm install
でpackage.json
から必要なパッケージをインストールする。
$ /app/sample_app # npm install
ようやくサーバーを立てる!
/app/sample_app # npm run dev > sample_app@0.1.0 dev > next dev ready - started server on 0.0.0.0:3000, url: http://localhost:3000
これで一応開発はできる?
一応これでチーム開発はできると思うけど、毎回長いrunコマンド打って、コンテナの中に入ってnpm install
するのは流石にしんどい。
長いコマンドは docker-compose
でリファクタリング、後者の問題はDockerfileを変更して対応する。しかし長くなるので終わる。