夢のかけら

Goエンジニアの技術ブログ

【Docker】Next.js + TypeScriptの環境構築

試行錯誤して0からDockerfileを書いた記録です。

f:id:lampler:20211010220842j:plain

まず適当に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!とりあえず無事に動いてる。

f:id:lampler:20211010210341p:plain

マウントする

$ 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を実行した時に作成されたものである。つまりもういらない。Dockerfilesample_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 installpackage.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を変更して対応する。しかし長くなるので終わる。