Zenn
📝

Dockerで、Next.js,TypeScript環境構築方法

2021/10/02に公開
Docker
Next.js
React
TypeScript
tech

この記事ではDockerを使ってNext.js11の開発環境の構築方法を紹介します。
今は、TypeScriptが当たり前になってきていると感じてますので、Typescriptでの環境を構築します。

なぜDockerで構築するのか

通常はnode等を直接マシンにインストールして環境を構築していきます。その場合、環境の違いによるトラブル解消で、多くの時間を消費してしまいます。

そこで、Dockerを使用して、仮想環境上に環境を構築すれば、環境の差異によるトラブルは避けることができます。

また、仮想環境上にインストールするため、不要になった場合は、仮想環境を削除するだけですので、マシンをきれいに保てることも利点です。

前提条件

マシンに Docker のインストールをしてください。
⇢Docker公式

docker-composeも使用するためインストールしてください。
⇢Docker公式

好きなエディタをインストールをしてください。
私の場合は、大人気のVSCodeを使用しています。
⇢VSCode公式

Next.js環境構築

Docker準備

ターミナルを起動して、好きな場所にディレクトリを作成します。
作成後はディレクトリ内に入ります。

mkdir helloNext
cd helloNext

次にDockerfileを作成します。

touch Dockerfile

作成したDockerfileを編集します。

Dockerfile
FROM node:14.17.0
WORKDIR /usr/src/app

上記では、使用するnodeを記述しています。

ターミナルに戻り次はdocker-compose.ymlを作成します。

touch docker-compose.yml

作成したdocker-compose.ymlを編集します。

docker-compose.yml
version: '3'
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./:/usr/src/app 
    command: sh -c "cd hello-next && npm run dev"
    ports:
      - "3000:3000"

ここまででNext.jsを動かす準備ができました。

Next.js作成

いよいよNext.jsを構築したいと思います。

ターミナルで下記のコマンドを入力しましょう。

docker-compose run --rm app npm install create-next-app

これでcreate-next-appコマンドが使用できます。

実際にNext.jsを構築しましょう。
下記のコマンドを入力します。
hello-nextの部分は任意です。

docker-compose run --rm app npx create-next-app hello-next --ts

--tsをつけることでTypeScriptの設定を自動でしてくれます。
便利ですね。

構築が完了するとhello-nextというディレクトリが作成されその中にファイルがたくさん作成されていると思います。
このまま起動してみましょう。

docker-compose up -d

http://localhost:3000/にアクセスしてみると下記の用に表示されれば成功です！！

お疲れ様でした！
ちなみにpagesディレクトリを見ると、tsxファイルで作成されているため、TypeScript化も問題なさそうですね。

今回作成したコードです。
GitHub

終わり

ここまで見てくださりありがとうございました。

ツイッターもやっているのでぜひフォローもお願いします！
Twitter

Discussion