概要
insiders版でベータ版としてリリースされていた「Remote Development with VS Code」が正式版としてリリースされました。
今回はこの中の一つ、「Remote-Containers」を使用してNode.jsの開発環境を構築していきたいと思います。
「Remote Development with VS Code」についてはこちらから
準備するもの
- Docker(Mac/Windows/Linux)
- VScode
各インストール手順については、OSによって異なるので、割愛します。
VSCodeに拡張機能をインストール
- サイドバーから拡張機能を選択します。
- 検索フォームに「remote」と入力します。これで大体トップの方に出てくると思います。
- 検索結果から「Remote Development」を選択しインストールします。
インストールが完了すると、再読み込みを指示されるので再読み込みを行ってください。
Node.js環境の設定ファイルを作成
※Dockerについては起動した状態にしておいてください。
VSCodeの再読み込みが完了したら、任意のフォルダを開いておきます。
次にコマンドパレットを開き「remote-containers」と入力します。
コマンド一覧から「Create Container Configuration File...」を選択します。
選択すると、どの環境を作成するか問われるので、Node.js(今回はlatest LTSを使用)を選択します。
現在開いているフォルダに「devcontainer.json」と「Dockerfile」が作成されたことを確認したら、再びコマンドパレットを開き、「remote-containers」と入力します。
上の画像にも表示されている「Reopen Folder in Container」を選択します。するとVSCodeが再読み込みを行います。
Node.js開発環境立ち上げ
再読み込みが終われば、自動的に上記の手順で作成したファイルを基にコンテナを作成して、起動してくれます。（コンテナの作成状況は右下に「detail」と表示されているところをクリックすると見ることができます。）
無事コンテナが立ち上がると、以下の画面のようになります。
これでNode.jsの開発環境は構築完了です。コンテナ側で「npm init」などを入力し、遊びましょう。
終わりに
前までは、ローカルにNodeやnpmなどをインストールする必要があり、ローカルにはできるだけ実行環境は入れておきたくない自分からするとこの技術は非常に便利なものだと思いました。
コンテナに開発環境を構築するので、チーム開発などの時でもDockerfileを配布するだけで同じ環境が作れちゃうのも魅力の一つかと思います。
チーム開発の際は積極的に取り入れたい技術の一つですね。