前回は、開発するための身の周りの準備を行いました。
今回は、ずっと逃げてきたDockerを導入してみようと思います。
Web制作からキャリアをスタートした僕にはDockerとはかけ離れたところにおり、「コンテナね✌️」という軽いノリできたけど流石にもう少し理解をせねばと思い個人開発でも導入することを決めました。
Dockerとは？
Dockerは、アプリケーションをコンテナとしてパッケージ化するオープンプラットフォームです。コンテナは、アプリケーションのコードとその依存関係を含む軽量な仮想環境であり、どこでも一貫した動作を保証します。
Dockerの利点
- 一貫性：開発環境と本番環境の差異をなくし、一貫した動作を保証します。
- ポータビリティ：異なる環境間でアプリケーションを簡単に移行できます。
- 依存関係の管理：各コンテナは独立しており、依存関係の衝突を防ぎます。
Dockerfileの作成
まず、プロジェクトのルートディレクトリにDockerfileを作成します。このファイルには、コンテナのベースイメージや必要なコマンドを記述します。
# ベースイメージを指定
FROM node:18.17.0-alpine
# 作業ディレクトリを設定
WORKDIR /app
# pnpmをインストール
RUN npm install -g pnpm
# package.jsonをコピー
COPY ./package.json ./
# 依存関係をインストール
RUN pnpm install
# 開発サーバーを起動
CMD ["pnpm", "dev"]
このDockerfileでは、Node.js 18.17.0のAlpineイメージを使用し、pnpmをグローバルインストールしています。その後、依存関係をインストールし、開発サーバーを起動するよう設定しています。
4. docker-compose.ymlの作成
次に、docker-compose.ymlを作成します。これにより、複数のコンテナを一括して管理できます。
version: '3.7'
services:
app:
build: .
ports:
- '3000:3000'
volumes:
- .:/app
command: pnpm dev
このファイルでは、appサービスを定義し、コンテナをビルドしてポート3000でホストします。また、ホストのディレクトリをコンテナ内の/appにマウントし、開発サーバーを起動します。
Dockerコンテナのビルドと起動
Dockerfileとdocker-compose.ymlを設定したら、以下のコマンドでコンテナをビルドし、起動します。
docker-compose build
docker-compose up
これで、Next.jsの開発サーバーがDockerコンテナ内で起動します。ブラウザでhttp://localhost:3000にアクセスすると、アプリケーションが表示されるはずです。
まとめ
今回は、Next.jsプロジェクトにDockerを導入し、開発環境をコンテナ化する方法を紹介しました。
まだまだ理解度は低いですが、多分ネットワークとかその辺の勉強せんと理解できん気がするので本でも読もうと思います。
気づいたらこちらのUdemyをポチっていました。
また別の記事でまとめます。
最後に今回のDockerを追加したPRになります。