Zenn
🐋

【Docker】インストールからコンテナ実行までの手順【Next.js】

2024/02/24に公開
Docker
TypeScript
VS Code
WSL 2
NestJS
tech

開発で必要不可欠となったDocker。
導入方法（インストールからコンテナ実行まで）を備忘録として記事にします。

今回は、Next.js(TypeScript)で作ったプロジェクトに対して、Dockerを導入します。

導入手順

  1. Dockerをインストールする
  2. Dockerfileの作成
  3. Dockerイメージのビルド
  4. Dockerコンテナの実行

本手順を実行する際、VSCodeとWSL(WSL2)を利用しています。

1.Dockerをインストールする

Dockerがインストールされていない場合、Docker Desktopをダウンロードします。

インストール後、ターミナルで以下を実行し、Dockerが正常にインストールされていることを確認します。

ターミナル
docker --version

2.Dockerfileの作成

プロジェクトのルートディレクトリにDockerfileを作成します。
以下のように yarn または npm で書きます。

yarn

dockerfile

# ベースイメージの指定
FROM node:【任意のバージョン】

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

# パッケージ.jsonとyarn.lockをコピー
COPY package.json yarn.lock ./

# 依存関係のインストール
RUN yarn install

# 残りのファイルをコピー
COPY . .

# TypeScriptのコンパイル
RUN yarn build

# アプリケーションを実行
CMD ["yarn", "start"]

npm

dockerfile

# ベースイメージの指定
FROM node:14

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

# 依存ファイルのコピー
COPY package.json package-lock.json ./

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

# アプリケーションのソースコードをコピー
COPY . .

# アプリケーションのビルド
RUN npm run build

# アプリケーションの実行
CMD ["npm", "start"]

Dockerfileの説明

念のため上記ファイルの中身で何が行われているかを説明します。

ベースイメージの指定

FROM命令でベースとなるイメージを指定します。
Node.jsのバージョンを指定し、Next.jsアプリケーションを実行環境を定義します。

作業ディレクトリの設定

WORKDIR命令でコンテナ内の作業ディレクトリを指定します。

依存ファイルのコピー

COPY命令で、package.jsonとyarn.lock（またはpackage-lock.json）をコンテナにコピーします。

依存関係のインストール

RUN命令で、yarn install（またはnpm install）を実行し、プロジェクトの依存関係をインストールします。

アプリケーションのソースコードをコピー

プロジェクトの残りのファイル（ソースコードなど）をコンテナにコピーします。
後述しますが、.dockerignoreファイルを使用して、不要なファイル（例: node_modulesなど）を除外することもできます。

アプリケーションのビルド

プロジェクトのビルドを実行します。

アプリケーションの実行

CMD命令でアプリケーションを実行します。

3.Dockerイメージのビルド

ターミナルでDockerfileがあるディレクトリで以下を実行します。

ターミナル
docker build -t 【イメージ名】:【タグ】 【.】

【イメージ名】と【タグ】は任意で設定できます。
【.】は、Dockerビルドコンテキストのパスを指定します。

4.Dockerイメージの確認

ビルドが完了したら、以下のコマンドを使用してビルドされたイメージを確認できます。

ターミナル
docker images

5.Dockerコンテナの実行

ビルドしたイメージからコンテナを実行するには、以下のコマンドを使用します。

ターミナル
docker run -p 3000:3000 【イメージ名】:【タグ】

-p 3000:3000 のオプションは、ホストのポート3000、コンテナのポート3000 を指定します。
他にも-e オプション等で環境変数を渡すことも可能です。

上記コマンドを実行後、ブラウザから http://localhost:3000/ で動作を確認できます。
また、

6.Dockerコンテナの確認

実行中のコンテナを確認するには、以下のコマンドを使用します。

ターミナル
docker ps

実行中のすべてのコンテナとそのID、イメージ名、作成からの経過時間、ステータスなどの情報を表示されます。

7.Dockerコンテナの停止

実行中のコンテナを停止するには、以下のコマンドを使用します。

ターミナル
docker stop 【コンテナIDまたは名前】

(補足).dockerignore ファイルの作成

プロジェクトのルートディレクトリに .dockerignore ファイルを作成。
.dockerignore に無視したいファイルやディレクトリのパターンを書きます。(.gitignoreみたいなもの)

.dockerignore
node_modules/
.next/
.env
.git/
.gitignore
.dockerignore
Dockerfile
LICENSE
*.md

まとめ

上記内容でDockerの基本的な設定できたと思います。

Discussion