はじめに
フロントエンドを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にディストリビューション毎のインストール方法が掲載されているので、その通りに行います。
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
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 FrameworkNext.js by Vercel is the full-stack React framework for the web.
ホストでWebブラウザを起動して下記にアクセスします。
http://localhost:3000
コンテナ切断・削除
コンテナ切断・削除するには以下のようにします。
sudo docker compose down
strconv.Atoi: parsing “”: invalid syntax
コンテナの切断・削除時に「strconv.Atoi: parsing “”: invalid syntax」が表示されて、コンテナが削除できない場合があります。
以下のコマンドで解決します。
sudo docker compose down --remove-orphans
コンテナを削除する
イメージ名とイメージIDを調べます。
sudo docker container ls sudo docker container ps
コンテナ名とコンテナIDのどちらかを指定して削除します。
sudo docker container rm -f コンテナ名 sudo docker container rm -f コンテナID
イメージを削除する
イメージ名とイメージIDを調べます。
sudo docker image ls
イメージ名とイメージIDのどちらかを指定して削除します。
sudo docker image rm -f イメージ名 sudo docker image rm -f イメージID
Comments