今回の内容は、先日書いた以下の記事の続きになります。

はじめに

前回の記事を書いたとき、最初は Docker と組み合わせて使おうと思ってました。その途中で、クイックスタート的なものを見つけ、それを試したところで記事がある程度の長さになっていたので、そこで一区切りとしました。

今回は、Docker と組み合わせて使うパターンを試してみようと思います。
Docker といえば、de:code 2019 で聞いたセッションの1つでプレゼンの題材になってました。

Docker の環境構築

まずは、Docker を導入して使えるようにしてみます。

と書いたものの、自分の場合は既に「Docker Desktop for Mac」を過去に導入していました。Macの場合は、以下に記載されたとおり「Docker.dmg」をダウンロードして簡単に導入できます。

●Install Docker Desktop for Mac | Docker Documentation
　https://docs.docker.com/docker-for-mac/install/

導入できたら、以下にある「$ docker run hello-world」を実行して、うまくいけば今回用の環境作りは大丈夫です。

●Get started with Docker Desktop for Mac | Docker Documentation
　https://docs.docker.com/docker-for-mac/

Docker で nginx を動作させる

de:code でのセッション「【CD82】20 分で速習 コンテナの基本と使い所」では、nginx を動かすのを見たのを覚えていて、その時と同じ nginx を試してみようと思いました（試した内容は、セッションでの内容と違っていますが）。

de:code でどのイメージを使っていたか記録できてなかったので、とりあえず Docker Hub で一番使われていそうなものを選んでみました。

●nginx - Docker Hub
　https://hub.docker.com/_/nginx

早速、以下のコマンドを実行します。

docker run --rm --name nginx_temp -p 3000:80 nginx

コマンドのオプションはいろいろありますが、まずは単純なものにしてみました。

今回指定したオプションは以下の3つです。
　・「コンテナ終了時にコンテナを自動で削除するオプション（rm）」
　・「コンテナに指定した名前をつけるオプション（name）」
　・「特定のホストのポートをコンテナの指定のポートにつなげるオプション（p）」
1つ目のオプションは、今回はお試しをしたコンテナを再利用するつもりがなかったのでつけました。

この状態で、Webブラウザを開き「 http://localhost:3000/ 」にアクセスすると、以下のようなページが表示されます。

これで、正常にWebサーバが動作しているのを確認できました。

VS Code と Docker を連携させる

それでは、ここで VS Code と Docker を連携させてみます。
前回の記事で、VS Code に VS Code Remote Development が既にインストールされた状態になっています。

ここで、VS Code 上で「F1」を押してコマンドパレットを開き、「Remote-Containers: Attaching to running containers ... 」を選択します。そして、上記の手順で動作させているままの Docker のコンテナを選択します。

そうすると、以下のように新しいウィンドウが開き、しばらくすると左下に「Attached Container nginx (/nginx_temp)」と表示された状態になります。

これで下準備はできました。

この状態で、左端の下記 1 を押し、展開されたメニュー内の 2 の「フォルダーを開く」を選択すると、コンテナ内にアクセスできます。

以下は「フォルダーを開く」を選択した直後に、表示された中の「1つ上の階層へ移動（ ".." を選択して移動 ）」を選んだ状態のものです。

ここから「etc/」を選び「nginx/」を選択して、上記の画像右上付近の「OK」を選択すると、左側のメニューに以下のような表示がされます。
このエクスプローラーのメニュー内でファイルの選択が行えます。試しに、この中の「conf.d」を選ぶと表示される「default.conf」を開いてみましょう。

そうすると、以下のように、コンテナ内の設定ファイルの中身を VS Code で開くことができました。
それでは、次は設定ファイル内に書かれたドキュメントルート（上記の動作確認のとき、ブラウザでアクセスした先）を開いてみます。

上部のメニュー内の「フォルダーをワークスペースに追加 ...」を選択します。

その後、一番上の階層へ進み、そこから4つの階層をたどって「/usr/share/nginx/html/」を開いてみます。
その中に「index.html」があるので、そのファイルを開きます。

このように、ファイルが開かれ、ファイルの中身が右側に、左下にはアウトラインが表示されました。

ここで、bodyタグの中の h1タグの中身にある「Welcome to nginx! 」と言う部分に、適当な文字列を追記してみます。以下の通り追記をし、それと合わせて、UTF-8 の指定をするタグも追加しました。

追記後、ファイルの保存を行ったら、上記の手順でブラウザでアクセスしたURLを再度開いてみます。

上記の通り、タイトルの部分に、「index.html」に追記した内容が反映されました。

終わりに

前回の記事で試した VS Code の Remote Development を、今回は Docker と組み合わせて使ってみました。

今回は、簡単な内容を試しただけでした。
そして、Docker と VS Code の連携については「Developing inside a Container using Visual Studio Code Remote Development というページ」の「Option 1: Use the Docker extension という部分」に「Docker extension」を使う話などもでていました。
もう少し、この辺りを調べてみて、VS Code 活用に詳しくなれればと思います。