Docker Desktopを使ってみたい！

先日、こちらの投稿を拝見し、Docker Desktop for Windowsを無事にインストールできました。
せっかくなので、最近勉強しているNode.jsのアプリケーションをDocker Desktop上で動作させてみたいと思います。

参考サイト：Node.js Web アプリケーションを Docker 化する

この記事でやってみること
①Dockerfileを使ってExpress.jsアプリを起動する
②VSCodeの拡張機能"Remote-Containers"を使ってみる

①Dockerfileを使ってExpress.jsアプリを起動する

node-dockerディレクトリおよびDockerfileファイル、.dockerignoreファイルを作成します。

mkdirnode-dockercdnode-dockerNew-Item-TypeFileDockerfile

Dockerfileには、下記の通り入力します。

#ローカルの環境にあわせてバージョン12FROM node:12# アプリケーションディレクトリを作成するWORKDIR /usr/src/app# expressインストールRUN npx express-generator --view=ejs .
RUN npm install nodemon
RUN npm installEXPOSE 3000#express-generatorで作成されたサンプルアプリをnodemonで起動CMD [ "npx", "nodemon", "./bin/www" ]

この状態でDockerイメージのビルド＆起動します。

#"flets708/myapp"という名前のDockerイメージを作成dockerbuild-tflets708/myapp.#作成したDockerイメージを元にtestappという名前のコンテナを起動dockerrun-it-d--rm-p13000:3000--nametestappflets708/myapp

ちなみに上記コマンドで--rmオプションをつけていますが、これをつけるとコンテナを停止した時に勝手に削除されます。たくさんコンテナつくって遊んでいると乱立したりするので、自動削除は便利だなと思います。

docker psコマンドで起動状態を確認します。

PS>dockerpsCONTAINERIDIMAGECOMMANDCREATEDSTATUSPORTSNAMES337cb52f6231flets708/myapp"docker-entrypoint.s…"3secondsagoUp2seconds0.0.0.0:13000->3000/tcptestapp

無事にExpressのWelcomeページが表示されました！

Image may be NSFW.
Clik here to view.

②VSCodeの拡張機能"Remote-Containers"を使ってみる

コンテナが無事に起動できたところで、VSCodeを使ってコンテナの中で直接開発できるとより良いなあとふと思いました。色々調べた結果、VSCodeの拡張機能「Remote-Containers」というのがあるらしいので早速使ってみました。
この拡張機能を使うと、Dockerコンテナ内で直接VSCodeを使った開発が可能とのこと。
個人的に特にメリットになりそうだなと感じたのは下記3点です。

VSCodeを使ってDockerコンテナ内で開発するメリット
a. 環境設定まるごとコンテナとして保存できる
b. ローカルの環境に左右されない
c. 拡張機能を直接設定できる。ESLintとかが良い感じに使える

aとbはコンテナそのもののメリット、cは"Remote-Containers"ならではのメリットという感じでしょうか。

ということで、以下の手順で導入してみました。

node-dockerディレクトリ内に.devcontainerディレクトリを作成し、さらにdevcontainer.jsonファイルを作成します。

cd../node-dockermkdir.devcontainercd.devcontainerNew-Item-TypeFiledevcontainer.json

devcontainer.jsonには下記を記述します。それぞれの記述の説明はコメントを参照ください。

{//Remote-Containersを使ってVSCodeを開いたときのウィンドウのタイトル。何でもいい。"name":"Existing Dockerfile",//実行パスを指定。.devcontainerディレクトリの一階層上。"context":"..",//Dockerfile上で指定したワークスペースディレクトリにあわせる。"workspaceFolder":"/usr/src/app",//利用するDockerfileの相対パス。"dockerFile":"..\\Dockerfile",//Set*default*containerspecificsettings.jsonvaluesoncontainercreate."settings":{"terminal.integrated.shell.linux":null},//コンテナ作成時にインストールしたい拡張機能のIDを書く。"extensions":["dbaeumer.vscode-eslint",],//ローカルの13000盤ポートとコンテナの3000番ポートを接続。"appPort":["13000:3000"],}

extensions部分に拡張機能を色々設定できるのが便利です。お好みで色々設定してみると良いと思います！

devcontainer.jsonの準備が終わったら、コマンドパレット上でRemote-Containers: Open Folder in Container...を選択します。出てこない人は拡張機能Remote - Containers (ms-vscode-remote.remote-containers)もしくはRemote Development (ms-vscode-remote.vscode-remote-extensionpack)を先にインストールしてください。
Remote-ContainersはRemote Developmentのコンテナ接続部分だけに絞った拡張機能のようです。
Image may be NSFW.
Clik here to view.

ディレクトリ選択画面が出るので、node-dockerディレクトリを指定した上でOpenすると、開発用コンテナのイメージ作成とコンテナ起動が自動で開始されます。
最終的に、下記画面になっていればOKです！
Image may be NSFW.
Clik here to view.

ターミナルもコンテナ内のExpressインストールディレクトリになっていることが確認できます。
ちなみに、作成されたイメージとコンテナは下記のようになっていました。

PS>dockerimagesREPOSITORYTAGIMAGEIDCREATEDSIZEvsc-node-docker-ca6497fdb4b6eecf9b3f476bxxxxxxxxlatesta853xxxxxxxx4hoursago927MBPS>dockerpsCONTAINERIDIMAGECOMMANDCREATEDSTATUSPORTSNAMES376ab65ea05evsc-node-docker-ca6497fdb4b6eecf9b3f476xxxxxxxx"/bin/sh -c 'echo Co…"4minutesagoUp4minutes0.0.0.0:13000->3000/tcpbold_pasteurPS>

終わりに

今回初めてRemote-Containersを触ってみたので、まだまだ「やってみた」レベルですが、これからしばらく触ってみて、真価を探っていこうと思います。
自分の備忘のため、というのが一番の目的の記事ですが、もしどなたかのご参考になれば幸いです！