LoginSignup
4
5

More than 3 years have passed since last update.

Dockerを使った、サクッと作ってパッと捨てられるNode.js環境

Posted at

待ちに待ったWindows 10 May 2020 Update(WSL2)もリリースされ、WindowsへのDockerの敷居も下がってきそうです。
そこで、Dockerで作る使い捨てやすいNode.jsの開発環境についてまとめておこうと思います。

main.png

Why NodeJS with Docker :thinking:

※前置きです(読み飛ばし可)

250px-Docker_(container_engine)_logo.png

現状のバージョン管理方法

  • Mac (メイン)
  • Windows (サブ)
    • 漢らしくzipを解凍してパスを通す
      • nvmがあるのは知っていましたが、バージョン指定するほどの開発もしてなかったため、入れるのが手間で。。。

不満 :thumbsdown:

  • コマンド覚えるのが苦手なので、逐一調べるのが億劫。
    (たまにしか使わないコマンドなので尚更。。。)
    • 新しいバージョンいれたり、古いバージョン消したり、、、
  • WindowsとMacで導入手順やコマンドが違う
    (社内で布教サポートがしづらい)
  • package.jsonのscriptをWindows,Mac考慮しながら書くの辛い。
  • package-lock.jsonがたまにプラットフォーム(OS)によって変わるため、
    別OSで作った環境でnpm installするとコケることがある。

解決策

同じOS上でNode.jsを実行させればいいのでは?:thinking:
 → Docker使おう:tada:

※よく手順で出てくるDockerfiledocker-compose.ymlは、コンテナが残ってしまって後始末がめんどくさいので、コンテナが残らない手順にしています。

--ここから本編です--

前提

  • Dockerがインストールされていること

Dockerイメージの取得

docker hubの公式イメージから任意のバージョンのDockerイメージを取得する。
※ alpine系がイメージサイズが小さいためオススメ。

console
% docker pull node:14-alpine

※ この手順は省略可(後でdocker runするタイミングで、イメージ未取得の場合は自動取得してくれるため)

Nodeコマンドの実行

基本以下ルールで実行するだけです。

  • ローカルのディレクトリをDockerコンテナの好みの場所(/home/nodeとか?)にマウントする
  • マウントしたディレクトリを作業ディレクトリに指定する
  • サーバ機能を利用する場合は、必要なポートのマッピングを行う
example
# 作業用ディレクトリ作成
% mkdir workdir
% cd workdir
# プロジェクトの初期化
% docker run --rm -it \
%   -v "$PWD":/home/node/app \ # マウントの設定
%   -w /home/node/app \ # 作業ディレクトリの指定
%   node:14-alpine \ # イメージの指定
%   npm init -y # コンテナ内で実行したいコマンド
# モジュールのインストール
% docker run --rm -it \
%   -v "$PWD":/home/node/app \
%   -w /home/node/app \
%   node:14-alpine \
%   npm install --save-dev http-server
# 実行(ポートマッピング追加)
% docker run --rm -it \
%   -v "$PWD":/home/node/app \
%   -w /home/node/app \
%   -p 8080:8080 \ # ポートマッピング
%   node:14-alpine \
%   npx http-server

後始末

  • コンテナは残っていないため掃除不要
  • 不要になったイメージは定期的にガーッと削除しましょう

以上です。

4
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
5