VSCodeのRemote Development-Containers

アプリケーションの開発をするときに、ローカルで環境で実行しているかのようにリモート環境に接続して、開発をすることができる便利な機能です。 この機能を利用すれば、ローカル環境にインストールされているプログラミング言語のバージョンがランタイムと異なっている場合でも、ローカル環境に影響を与えずにクラウドにデプロイするためにテストをすることができるようになります。

VSCode Remote Development の発表のブログRemote Development with Visual Studio Code

f:id:akubicharm:20191023033829p:plain

Remote Developmentでは、3種類のリモート接続して利用できる環境があります。

ここでは、Remote Development-Containerの利用方法を紹介します

VSCodeへのRemote Development拡張機能のインストール

  • VSCodeの左下の歯車マークをクリックし、プルダウンメニューから[Extensions]をクリックします。 f:id:akubicharm:20191023035348p:plain

  • [Remote Development] と検索キーワードを入力して拡張機能を検索し、[Remote Development]を選択してインストールします。 f:id:akubicharm:20191023035712p:plain

※インストールが完了すると、左下の歯車マークの下に緑色のRemote Developmentのアイコンが表示されます。 f:id:akubicharm:20191023040033p:plain

Remote Development-Containersでの開発

コンテナ環境を利用するために、Dockerデーモンを起動しておきます。

  • 画面左下のRemote Developmentアイコンをクリックしてコマンドパレットを開き、[Remote-Containers: Open Folder in Container...] をクリックします。 f:id:akubicharm:20191023041140p:plain

  • ダイアログで開きたいフォルダを選択します。 f:id:akubicharm:20191023041330p:plain

  • 開発する対象を選択します(ここではAzure Function & Node.js (LTS)を選択)。 f:id:akubicharm:20191023041602p:plain

  • Remote Development-Containers の環境を整備が開始されます。 f:id:akubicharm:20191023041841p:plain ここでやっていることは、開発に利用するDockerコンテナイメージを生成するためのDockerファイルの作成と、そのDockerファイルを使ったコンテナのビルドと実行です。 環境準備が終わると、指定したフォルダーには .devcontainer というディレクトリができています。

  • VSCodeのViewメニューからTerminalを選択します。 f:id:akubicharm:20191023042511p:plain

  • [Dev Containers]は、開発環境のDockerコンテナを実行しているターミナルです。もう一つターミナルを開いてプロンプトを確認するとDockerコンテナに入っていることがわかります。 f:id:akubicharm:20191023045312p:plain

Macのターミナルでも、docker ps コマンドを実行すると開発環境のDockerコンテナが実行されていることが確認できます。 f:id:akubicharm:20191023042900p:plain