トップ > 30分で動かすシリーズ > 【後編】VSCodeのRemote-SSHでEC2に接続してみよう

【後編】VSCodeのRemote-SSHでEC2に接続してみよう

30分で動かすシリーズ 初学者向け
記事タイトルとURLをコピーする

はじめに

こんにちは、椎名です。前回に引き続き、SSHを使用したEC2への接続についての記事です。

まだ前編を読んでいない方は、先にこちらをご覧ください。

【前編】VSCodeのRemote-SSHでEC2に接続してみよう

前編で「素のSSHでログインできる状態」まで整ったので、後編ではいよいよ、VSCodeのRemote-SSH拡張機能を使って、実際にエディタから接続していきます。

おさらい：Remote-SSHとは？

VSCodeの「Remote - SSH」は、SSH接続先のマシン（今回はEC2）にVSCodeから直接つないで、あたかもローカルPC（自身のPC）で作業しているかのようにファイルの編集やターミナル操作ができるようになる拡張機能です。

ポイントは、エディタの画面はローカルPCに表示されるが、実際のファイルの保存やコマンドの実行はすべて接続先（EC2）側で行われるという点です。ローカルPCには余計なツールを入れずに、EC2上に環境構築を集約できるのがメリットです。

前編で確認した通り、Remote-SSH拡張機能そのものはSSH通信の仕組みを持っておらず、裏側でPCにもともと入っているsshコマンドを呼び出しているだけです。つまり、前編で素のSSHログインができていれば、あとはVSCode側にその接続情報を教えてあげるだけで、同じように接続できるようになります。

VSCodeでの接続設定手順

それでは実際にVSCodeでの接続設定手順を確認していきましょう！

1.Remote-SSH拡張機能のインストール

まずVSCodeを開いて、左側のサイドバーにある、下の図の「拡張機能」アイコンをクリックします。

次に、検索欄に「Remote - SSH」と入力し、Microsoft製の「Remote - SSH」という拡張機能が出てくるので、それを選択して「インストール」ボタンをクリックします。

今回はすでにインストール済みですが、上記の画面が出たら、インストール完了です！

2.~/.ssh/config とは？

次に~/.ssh/configの設定に入ります。その前に、そもそもconfigって聞きなれない単語だし、なんのために必要なのかも分からないですよね。

実は、前編ではSSH接続をするたびに、以下のような少し長いコマンドを毎回手打ちしていました。

ssh -i "C:\Users\<ユーザー名>\.ssh\your-key.pem" <ログインユーザー名>@<接続先IPアドレス>

これ、正直かなり長いですよね。毎回手打ちするのは大変ですし、打ち間違いも起きやすいです。そこで登場するのが~/.ssh/configというファイルです。

一言でいうと、~/.ssh/configは、「この名前で呼んだら、この鍵を使って、このユーザーで、この住所に接続してね」という接続情報を、あらかじめメモしておくためのファイルです。

3.~/.ssh/config の設定

それでは実際に設定していきましょう！VSCodeを開いた状態で、以下の手順を1つずつ試してみてください。

  1. キーボードで Ctrl + Shift + P を押します。画面上部に、コマンドを入力できる細長い検索窓（コマンドパレット）が開きます
  2. その検索窓に、そのまま以下を入力します Remote-SSH: Open SSH Configuration File...

3. 候補がいくつか表示されるので、C:\Users\<ユーザー名>\.ssh\config と書かれているものをクリックします

これで、~/.ssh/configというファイルがVSCode上に開かれます。もし今までに一度もこのファイルを使ったことがなければ、中身は空っぽの状態で開くはずです。これは正常な状態なので、心配いりません。

それでは、このファイルの中に情報を書き込んでみましょう！（今回はec2-blogという名前で登録します）

開いたファイルの中に、以下の４行を貼り付けてください。（各自で設定した値を記入します）

Host ec2-blog
    HostName <接続先IPアドレス>
    User <ログインユーザー名>
    IdentityFile C:\Users\<ユーザー名>\.ssh\your-key.pem

貼り付けが完了したらファイルの保存を行ってください。

4.VSCodeから接続

~/.ssh/configにec2-blogという名前で接続情報を登録できたので、いよいよその名前を使って、実際にVSCodeから接続してみましょう。

  1. キーボードで Ctrl + Shift + P を押し、コマンドパレットを開きます
  2. 検索窓に、以下を入力します Remote-SSH: Connect to Host...
  3. 候補が表示されるので、先ほどconfigに登録した名前（本記事の例ではec2-blog）を選択します

ec2-blogを選択すると、VSCodeの新しいウィンドウが立ち上がり、接続処理が始まります。

このとき、初めて接続するホストの場合、接続先のOSの種類（Linux、Windows、macOS）を選ぶ画面が表示されることがあります。

これは、VSCode側が「接続するサーバーが、どのOSで動いているか分からないので教えてください」と確認しているものです。今回のEC2インスタンスはAmazon Linux 2023なので、「Linux」を選択します（ここでのOSは、あなたが今使っているPCのOSではなく、あくまで接続先であるEC2側のOSを指している点に注意してください）。

選択すると、EC2側にVSCode Server（EC2上でVSCodeの機能を動かすための小さなプログラム）が自動でインストールされます。

5.接続できたことの確認

接続処理が終わると、VSCodeの左下に、接続先の情報（SSH: ec2-blogのような表示）が出てきます。これが、今VSCodeがローカルPCではなく、EC2に接続した状態で動いているという目印です。

ここまで確認できれば、VSCodeのRemote-SSHを使ってEC2に接続する、という一連の作業は完了です。あとは、このEC2上のフォルダを開いて、ファイルの作成や編集、ターミナルでのコマンド実行など、まるでローカルPCで作業しているかのように開発を進められます！

おわりに

前編・後編の2本を通して、「VSCodeのRemote-SSHでEC2に接続する」という作業を進めてきました。

正直、経験のある人からすれば「Remote-SSHの設定をして繋ぐだけ」の、ごく単純な作業だと思います。ですが、初めて触れる人にとっては、sshとは何か、configとは何か、なぜエラーが起きるのか、何一つ当たり前ではありません。私自身、最初はまさにその状態でした。

だからこそ、単に手順をなぞって「繋がった」で終わるのではなく、一つひとつ「なぜこの設定が必要なのか」を理解しながら進めることを大事にしています。同じように初めてEC2やRemote-SSHに触れる方が、この記事をきっかけに、少しでも「理解しながら手を動かす」感覚を持てたら嬉しいです。

椎名 光介(執筆記事の一覧)

好きなダックスフンドの色：ブラックタン