DockerとNext.jsとTypescriptで開発環境構築

フロントエンド

バンドラーでwebpack使った開発環境使っていましたが、開発終了になっていたりしたので、そろそろ最新の開発環境にしていこうかなと色々調べていると、Next.jsに行きつきました。
まだまだスタートラインに立ったくらいで、今から勉強してく感じですが、ひとまずタイトルの環境を構築しようかと思ったのですが、いろいろ引っかかったのでメモとして残しておきます。

Dockerはインストールされている事とします。まだならこちらからインストールしてください。

必要なツールの確認

Docker Desktopはインストール済みとのことなので、まずは以下のツールが正常に動作しているか確認します。

  • Docker Desktop: docker --versionコマンドでインストールされているか確認。
  • Docker Compose: docker-compose --versionで確認。

これらが正常に動作していることを確認できたら、次のステップに進みます。

Next.jsプロジェクトの作成

まず、Next.jsのプロジェクトを作成しますが、今回はDocker上で動かすので、プロジェクトの初期セットアップはローカルで行い、Dockerファイルを後で追加します。

1.プロジェクト作成

npx create-next-app@latest my-next-app
cd my-next-app

2.依存パッケージのインストール

npm installで必要なパッケージがインストールされます。

Dockerfileの作成

次に、プロジェクトのルートディレクトリにDockerfileを作成して、コンテナ内でNext.jsアプリケーションを実行できるようにします。

Dockerfile

# Node.jsの公式イメージをベースにします
FROM node:16

# 作業ディレクトリを設定
WORKDIR /app

# パッケージ.jsonとパッケージロックファイルをコピー
COPY package.json package-lock.json ./

# 依存関係をインストール
RUN npm install

# プロジェクトのソースコードをコピー
COPY . .

# 開発サーバー用にポート3000を公開
EXPOSE 3000

# Next.jsアプリケーションを起動
CMD ["npm", "run", "dev"]

このDockerfileでは、以下のことを行っています：

  • node:16という公式のNode.jsイメージを使用
  • 作業ディレクトリを/appに設定
  • package.jsonとpackage-lock.jsonをコピーし、依存関係をインストール
  • プロジェクトの全ファイルをコンテナにコピー
  • ポート3000を公開（Next.jsのデフォルトポート）
  • npm run devで開発サーバーを起動

Docker Composeの設定（オプション）

複数のサービスを管理するために、Docker Composeを使うと便利です。今回はシンプルにNext.jsを立ち上げるため、Docker Composeを使ってコンテナを管理します。

docker-compose.yml

version: '3'
services:
  nextjs:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
    environment:
      - NODE_ENV=development

この設定では、以下のことをしています：

  • nextjsというサービスを定義
  • プロジェクトのルートディレクトリでDockerfileをビルド
  • 3000:3000でローカルポート3000をコンテナの3000ポートにマッピング
  • volumesを使ってローカルのファイルをコンテナ内に同期
  • NODE_ENV=developmentで開発環境を設定

コンテナのビルドと起動

Dockerfileとdocker-compose.ymlの設定が完了したら、コンテナをビルドして起動します。

1.コンテナのビルド

docker-compose build

2.コンテナの起動

docker-compose up

これで、ブラウザでhttp://localhost:3000にアクセスすると、Next.jsの開発サーバーが表示されるはずです。

開発作業

DockerでNext.jsのプロジェクトを動かしている間も、ローカルでファイルを編集すると、コンテナ内でその変更が反映されます。Dockerはvolumesでローカルのファイルシステムと同期しているため、コンテナを再起動することなく、リアルタイムで開発が行えるはずだったのですが、ホットリロードが動きません。

困って色々調べるとこちらの記事に行きつきました。
その中で私がうまくいったのは、「package.jsonでのscriptsの設定」で下記を記述したら問題なく動き出しました。

package.json


{
  ~
  ~
  ~
  "scripts": {
    "dev": "WATCHPACK_POLLING=true next dev",
    ~
    ~
    ~
  }
}

まあ、これで一先ず開発できる状態になったので、これまでの開発環境で使っていたscssやPrettierの設定など行っていきたいと思います。（これがまたやっかいそうで、エラーでまくりです泣）

コメント

タイトルとURLをコピーしました