概要

Docker初めて使います。
VSCodeのシンタックスハイライトを作るためにyeomanをインストールしたかったのですが、npmが必要とのことでした。
単純にWSL2でnpm installしても良かったのですが、WSL2の環境を汚したくないのでDockerのコンテナの中で作業したいと思いました。

事前準備

WSL2: Ubuntu-20.04
Docker : Docker version 20.10.8, build 3967b7d

Docker-composeのための準備

WSL2の中に下記構成でファイルを作っておきます。

~/node-docker$ tree -f
.
├── ./docker-compose.yml
└── ./node
    └── ./node/Dockerfile

次にdocker-compose.ymlとDockerfileを書いていきます。ベースとしているのは参考記事Docker-composeを使ってnode.jsの環境構築をしてみたのよ。中のコードです。npm installやimageの部分だけ変えています。

今回は./node/appを作業ディレクトリとしたいので、次のdocker-compose.ymlには次のように書いておきます。

docker-compose.yml

version: '3'
services:
  webserver:
    build: node
    image: node:latest　#ここだけ変えました。
    tty: true
    volumes:
      - ./node/app:/app
    ports:
      - "8080:3000"

yoをインストールするため、Dockerfileは次のように書いておきます。

Dockerfile

# ベースイメージを指定
FROM node

# node.js の環境変数を定義する
# 本番環境では production
ENV NODE_ENV=development

# 雛形を生成するのに必要なパッケージのインストール
RUN npm install -g yo generator-code #ここだけ変えました。

# ディレクトリを移動する
WORKDIR /app

# ポート3000番を開放する
EXPOSE 3000

コンテナに入るまで

ここからは参考に記載したDocker-composeを使ってnode.jsの環境構築をしてみたのよ。と全く同じ手順で進みます。
最初にbuildします。初回は必要らしいです。

$ docker-compose build
[+] Building 20.5s (3/6)
 => [internal] load build definition from Dockerfile
 => => transferring dockerfile: 390B
中略
 => => naming to docker.io/library/node:latest
Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them

イメージが作成されているか確認します。

$ docker images
REPOSITORY   TAG       IMAGE ID       CREATED          SIZE
node         latest    9687fd56f5e5   26 seconds ago   982MB

コンテナを起動し、中に入ってみます。

$ docker-compose up -d
[+] Running 2/2
 ⠿ Network node-docker_default        Created
 ⠿ Container node-docker_webserver_1  Started
$ docker exec -it node-docker_webserver_1 /bin/sh
#

yoがインストールされているか確認してみます。

# yo --version
4.3.0

作業の終わりかた

コンテナからexitで抜けます。
docker-compose stopでコンテナを停止します。

もう一度始めたいとき

docker-compose restartでコンテナ起動します。
docker exec -it <コンテナ名> /bin/shでコンテナの中に入れます。

開発を終わるとき

docker-compose downでコンテナが削除されます。

終わりに

書いてて思いましたが、WSL2を使ってるものの特徴的な部分はありませんね。強いて言うならWSL1→2の移行とDockerDesktopのインストールが手間取りましたが、他の方が散々やっているのでこの記事では書きません。
yoのインストールは他の参考記事を見てもnpmバージョンが原因なのかうまくインストールできなかったので、どのimageを使ったかのメモとして記事を残しておきたいと思います。

参考

Visual Studio CodeでCode Syntax Highlight Extentionを作る
 Docker-composeを使ってnode.jsの環境構築をしてみたのよ。
【Docker】docker-composeコマンド早見表
 docker-compose up とか build とか start とかの違いを理解できていなかったのでまとめてみた