見出し画像

#decode19 #DT06 :Remote Development(コンテナ)を試してみる


今回、Microsoftさんのイベント「de:code 2019」に初めて参加してきました。この記事は、そこで気になったものを試してみた、という内容です。

今回の記事に関するセッション

今回の記事に関係する、自分が参加したセッションはこちらです。

【DT06】どっちの VS ショー 〜伝統の Visual Studio 2019、人気の Visual Studio Code〜
 https://www.microsoft.com/ja-jp/events/decode/2019session/detail.aspx?sid=DT06

このセッションで話された話題の中の、VS Code Remote Development を試してみます。

VS Code Remote Development の概要

関連するページは、以下になります。

上記ページによると、こちらの機能の対象となるものは、以下の通り「SSH、コンテナ、WSL(Windows Subsystem for Linux)」の3つのようです。

A)Remote - SSH - Connect to any location by opening folders on a remote machine/VM using SSH.
B)Remote - Containers - Work with a sandboxed toolchain or container-based application inside (or mounted into) a container.
C)Remote - WSL - Get a Linux-powered development experience in the Windows Subsystem for Linux.

今回は上記 B)を試してみます。

VS Code Remote Development の導入

de:code で話を聞いた際は、この拡張機能を利用するには VS Code Insiders(インサイダービルド版) で試す必要があったのですが、今現在では、通常版で利用できるようになりました。

上記のツイートを見て、通常版の VS Code に Remote Development を追加したところ、無事インストールできました。

VS Code の通常版で、「Remote Development」というキーワードで拡張機能を検索し、インストールしました。

コンテナの下準備

とにかく準備の手順が少ない方法で試したいという場合は、公式にあるクイックスタートが良さそうでした。

既に用意されているものを活用することで、簡単に試せるようになっており、クローンできるリポジトリは以下のとおりでした。

git clone https://github.com/Microsoft/vscode-remote-try-node
git clone https://github.com/Microsoft/vscode-remote-try-python
git clone https://github.com/Microsoft/vscode-remote-try-go
git clone https://github.com/Microsoft/vscode-remote-try-java
git clone https://github.com/Microsoft/vscode-remote-try-dotnetcore
git clone https://github.com/Microsoft/vscode-remote-try-php
git clone https://github.com/Microsoft/vscode-remote-try-rust
git clone https://github.com/Microsoft/vscode-remote-try-cpp

今回は、リストの中の「vscode-remote-try-node」を使ってみます。以下のコマンドで、適当なフォルダにクローンします。

git clone https://github.com/Microsoft/vscode-remote-try-node

そして、VS Code 上で「F1」を押してコマンドパレットを開き、「Remote-Containers: Open Folder in Container... 」を選択して、上記のクローン先となったフォルダを選択します。

そうすると、ウィンドウの左上の領域に、以下のような表示がされました。

この先の手順は、この中の「README.md」に記載された「Things to try」以下を参照すれば良さそうです。

サンプルを利用してサクッと試す

クローンしてきたファイルの中の「server.js」を開き、とりあえず、実行してみます。

自分はMac版なので、README.md の記載とちょっと違いがあり、ターミナル開くためのキーは「ctrl + shift + @」になります。
ターミナルを開いたら、「F5」を押してデバッグを実行します(なお、server.js は Express を使う前提になっているので、導入していない場合は、その対応も必要です)。

デバッグコンソールに「 Running on http://0.0.0.0:3000 」と表示されたのを確認し、このURLにブラウザでアクセスすると、以下のような表示がでます。

あとは、このファイルを書きかえるなどして開発を行っていけば良さそうです。

ポートフォワード

README.md の残りの手順に書いてあったポートフォワードを、最後に試してみます。

以下が README.md に記載された残りの手順です。
 1)「server.js」のサーバーのポートを5000に変更(const PORT = 5000;)
 2)「F5」キーを押して、コンテナ内でアプリを起動
 3)「F1」キーを押して、「Remote-Containers: Forward Port from Container... 」を実行
 4)ポート番号の「5000」を入力
 5)画面右下にでてくるポップアップの「Open Browser」を選択

これで、ブラウザ上で http://localhost:5000/ のURLが開かれ、再び「 Hello remote world! 」と書かれたページが表示されます。

まとめ

今回、VS Code の「Remote Development」を試してみました。
今のところ、サンプルの簡単なものを試しただけで、SSH など他の接続方法を用いる機能は使っていないため、今後、試してみようと思います。

追記: 続編の記事について(Docker との連携)

その後、Docker と組み合わせてみた、という続きの記事を書きました。


この記事が気に入ったらサポートをしてみませんか?