VSCode の Remote – SSH 機能を使って EC2 上で開発する

AWS運用自動化サービス「Cloud Automator」

こんにちは、技術1課の加藤です。
みなさんエディタは何を使っていますか。
ぼくは入社以来ずっとVimを使っていたんですが、先日ついに同僚に勧められてVSCodeを導入しました。

これがね、便利。ほんと。

というわけで今日は、VSCode布教活動の一環として、VSCode プラグインの使い方ブログ記事を3本出します!
まずは Remote – SSH プラグインをご紹介。これを使って、VSCode x EC2 環境で開発を行う方法をご紹介します。

概要

Remote – SSH は SSH 接続越しにサーバー上のファイルを編集できるようにする VSCode のプラグインです。
VSCode の開発元である Microsoft が開発しているプラグインとなります。

ターミナルでコマンドを流すこともできるため「EC2 を開発環境として利用したいけど、エディタはローカルのものを使いたい」という方にぴったりです!
(2020年2月20日現在、Previewとなっております。正常に動作することは確認しておりますが、ご利用はご自身の責任でお願いします。)

 

手順

0. VSCode をインストール

まだ VSCode をインストールしていない方は、こちらからダウンロードしてインストールしてください。

Visual Studio Code – コード エディター | Microsoft Azure

1. 開発用インスタンスを用意

開発用の環境を用意します。今回は EC2 インスタンスでいきましょう。

SSH でログインできるように設定してあればOKです。今回は主題ではないので詳しい手順は割愛。
一応、チュートリアル貼っておきますね。
仮想マシンの起動

2. VSCode にプラグインをインストール

メニュー の [Extensions] から Remote と検索し、Remote - SSH を選択します。
表示される Install ボタンを押しインストールします。

左側のメニューに、下のような [Remote Explorer] アイコンが表示されていれば OK です。

3. SSH ログイン設定

メニューの [Remote Explorer] を選びます。
表示される SSH TARGETS の右側にある歯車アイコンを選択し、 SSH 接続用の config ファイルを作成します。

作成される(開かれる) config ファイルに以下の内容を書き込みましょう。
(設定名として remotessh を設定していますが、ここは任意の直で大丈夫です。)

Config ファイルを保存すると、 SSH TARGETS に新しくサーバーが追加されます。

4. Remote – SSH で EC2 にログイン

SSH TARGETS に表示されているサーバーのうち、アクセスしたいサーバーの名の右側に表示されるウィンドウマークを押しましょう。

新しいウィンドウが立ち上がり、自動的に SSH 接続してくれます。
(ここで fingerprint の確認が求められることがありますが、問題なければ continue を選んで接続しましょう)

ウィンドウ左下にサーバー名が表示されていれば接続完了です。

5. ファイルを編集する

通常の VSCode と同じように、フォルダを開いて編集を行なっていきます。
左側メニューから [Explorer] を選び、 Open Folder ボタンを押します。

するとディレクトリを選択するメニューが表示されますので、編集を行いたいディレクトリを選択しましょう。

あとはそのディレクトリで編集を行なっていくことができます。

またターミナルを開くと、EC2 上の指定したディレクトリをカレントディレクトリとしてターミナルが開きます。
開発サーバーを立ち上げながらファイル編集をする、などが簡単にできますので、活用してあげてください。

補足

Remote Developer という Microsoft が出している別のプラグインもあります。
こちらは Remote – SSH, Remote -WSL, Remote – Containers の3つの Remote 開発機能をまとめたものです。
全部のせが欲しい、という方はこちらをインストールしても良いかと!

AWS運用自動化サービス「Cloud Automator」