DockerとNext.js

INDEX

はじめに
環境
ホストにDocker Engineをインストールする
Node.jsのイメージを作成する
コンテナ切断・削除
- strconv.Atoi: parsing “”: invalid syntax
コンテナを削除する
イメージを削除する

はじめに

フロントエンドをNext.jsで作るために、環境をDockerで作ることにしました。

環境

- ホスト
  - Debian Bullseye 11 64bit
  - Docker 5:23.0.1-1~debian.11~bullseye
        Docker version 23.0.1, build a5ee5b1
- コンテナ
  - node:bullseye
        Docker image 19.6.0

ホストにDocker Engineをインストールする

GitHubにディストリビューション毎のインストール方法が掲載されているので、その通りに行います。

Docker Engine インストール（Debian 向け）

Debian 上に Docker Engine をインストールする手順を説明。

sudo apt-get update
sudo apt-get install ca-certificates curl gnupg lsb-release
curl -fsSL https://download.docker.com/linux/debian/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/debian $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-compose-plugin

テスト用イメージが、メッセージを表示して終了すれば完了です。

sudo docker run hello-world

Node.jsのイメージを作成する

作業ディレクトリを作成して移動します。

mkdir -p ~/Docker/nextjs
cd ~/Docker/nextjs

名前付きボリュームの作成

データ永続化に使うボリュームを作成します。
予め作成するので、docker-compose.ymlで「external: true」を指定します。

sudo docker volume create vol_nextjs

確認します。

docker volume ls

結果です。

DRIVER    VOLUME NAME
local     vol_nextjs

バインドマウント(bind mount) の使用 — Docker-docs-ja 24.0 ドキュメント

Dockerfileの作成

Dockerfileを作成します。

vi Dockerfile

Dockerfileの内容です。

# ベースイメージの作成
# https://hub.docker.com/_/node
FROM node:bullseye

# コンテナ内で作業するディレクトリを指定する。
WORKDIR /app/nextjs-project

#COPY ./ /app

#RUN curl -fsSL https://deb.nodesource.com/setup_19.x | bash - && apt install -y nodejs
#RUN apt install -y htop

docker-compose.ymlの作成

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

vi docker-compose.yml

docker-compose.ymlの内容です。

version: '3.8'
services:
  # サービス名
  app:
    build:
      # docker buildを実行する時のワーキングディレクトリ
      context: ./
      dockerfile: ./Dockerfile
    container_name: "nextjs-app"
    # srcディレクトリの中に後ほどNext.jsをインストールする
    volumes:
      # バインド
      # ホスト側のディレクトリ./srcを、コンテナのディレクトリ/appにマウントする。
      - type: bind
        source: ./src
        target: /app
      # ボリューム
      # 予め作成したボリュームをマウントします。
      - type: volume
        source: vol_nextjs
        target: /vol
        volume:
          # ボリューム生成時のコンテナからのデータコピーを無効にする。
          nocopy: true
    # ホスト側のポート：コンテナ側のポート
    ports:
      - '3000:3000'
    # dockerを起動した際に、サーバの起動などずっとフォアグラウンドで実行しているプロセスがないと、
    # 起動してすぐにコンテナが停止してしまう。
    # コンテナを起動したままにするために設定
    tty: true
    stdin_open: true

    #command: "npm run dev"

    # If you want to run `yarn dev` at docker compose startup
    # command: sh -c "yarn dev"

# 予め「sudo docker volume create vol_nextjs」で作成したボリュームを参照する。
volumes:
  vol_nextjs:
    external: true

必要なディレクトリを作成する

docker-compose.ymlで「volumes」の項を複数行で記述した場合、ディレクトリは自動で作成されません。

cd ~/Docker/nextjs
mkdir ./src

イメージをbuildする

イメージをbuildして、バックグラウンドで複数のコンテナを実行します。
Dockerfileを更新した際も使います。

sudo docker compose up -d --build

作成したイメージと、コンテナが実行しているか確認します。
イメージ一覧を表示します。

sudo docker image ls

コンテナ一覧を表示します。

sudo docker container ls

コンテナ名とサービス名を表示します。

sudo docker compose ps

コンテナにログインする

サービス名でログインするには以下のようにします。

sudo docker compose exec app bash

sudo docker compose exec 【サービス名】 bash

コンテナ名でログインするには以下のようにします。

sudo docker exec -it nextjs-app bash

sudo docker exec -it 【コンテナ名】 bash

コンテナのバインドで設定した/app/nextjs-projectにNext.jsをインストールする場合です。

cd /app/nextjs-project
yarn create next-app . --typescript

コンテナのボリュームで設定した/volにNext.jsをインストールする場合です。

cd /vol
yarn create next-app . --typescript

動作確認です。

yarn dev

******************************************
yarn run v1.22.19
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 1113 ms (165 modules)
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:

Telemetry | Next.js by Vercel - The React Framework
Next.js by Vercel is the full-stack React framework for the web.
nextjs.org
******************************************

ホストでWebブラウザを起動して下記にアクセスします。

　http://localhost:3000

コンテナ切断・削除

コンテナ切断・削除するには以下のようにします。

sudo docker compose down

strconv.Atoi: parsing “”: invalid syntax

コンテナの切断・削除時に「strconv.Atoi: parsing “”: invalid syntax」が表示されて、コンテナが削除できない場合があります。
以下のコマンドで解決します。

sudo docker compose down --remove-orphans

Attention Required! | Cloudflare

コンテナを削除する

イメージ名とイメージIDを調べます。

sudo docker container ls

sudo docker container ps

コンテナ名とコンテナIDのどちらかを指定して削除します。

sudo docker container rm -f コンテナ名

sudo docker container rm -f コンテナID

イメージを削除する