VSCode Remote – SSH 拡張機能をインストールし、VSCode で直接 EC2 を使用する方法

タイオフィスの三並です。

これはTinnakornさんの記事を日本語化したものです。
https://dev.classmethod.jp/articles/install-extention-remote-ssh-in-vscode-connect-ec2/

VSCodeのRemote SSH拡張を使ってEC2インスタンスに直接接続し、開発環境を構築する方法をご紹介します。

はじめに

VSCodeは人気の高いコードエディタですが、Remote SSH拡張を使うことで、ローカルPC上でVSCodeを動かしながら、リモートサーバー上のファイルを直接編集できます。これにより、強力なサーバー環境で開発を行いながら、快適なローカル環境でのエディタ体験を享受できます。

今回は、VSCodeにRemote SSH拡張をインストールして、AWS EC2インスタンスに接続する方法を解説します。

前提条件

Visual Studio Codeのインストール

VSCodeがまだインストールされていない場合は、以下の記事を参考にしてください。
https://dev.classmethod.jp/articles/how-to-install-visual-studio-code-on-windows10-11-ja/

EC2インスタンスの準備

Amazon Linux 2のEC2インスタンスを作成します。他のAMI（Amazon Linux 2023、Ubuntuなど）も使用できますが、SSHユーザー名が異なることに注意してください。

• Amazon Linux（Amazon Linux 2、Amazon Linux 2023）: ユーザー名 = ec2-user
• Ubuntu: ユーザー名 = ubuntu

EC2インスタンス作成時は、キーペアのプライベートキーファイル形式を.pem形式で作成してください。

https://dev.classmethod.jp/articles/how-to-install-amazon-linux-2023-on-ec2-jp/

キーペア作成の設定例

• Key pair name: your-key-name
• Key pair type: RSA
• Private key file format: ◉ .pem

EC2インスタンス設定例

• Name: your-instance-name
• AMI: Amazon Linux 2023 kernel-6.1 AMI
• Instance type: t3.nano
• Security group rules: SSH (port 22) で My IP アドレスからのアクセスを許可

Remote - SSH Extention のインストール

VSCodeを開いて、以下の手順で Extention をインストールします。

1. 左側のサイドバーから Extentions アイコンをクリック
2. 検索ボックスに「Remote - SSH」と入力
3. 「Remote - SSH」Extention をクリック
4. 「Install」ボタンをクリック

インストールが完了すると、左側のサイドバーにRemote SSH用のアイコンが表示されます。

SSH接続の設定

SSH設定ファイルの作成

1. Remote SSHアイコンをクリック
2. 歯車アイコン（設定）をクリック
3. ユーザーフォルダの.ssh/configファイルを選択

SSH設定の記述

以下の内容をconfigファイルに記述します。各項目は実際の値に置き換えてください。

Host [your_host_name]
    Hostname [your_ec2_ip_address]
    User ec2-user
    Port 22
    IdentityFile ~/.ssh/[your_key_pair.pem]

設定例：

• Host: 任意の名前（英語のみ）
• Hostname: EC2インスタンスのIPアドレス
• User: ec2-user（Amazon Linuxの場合）
• Port: 22（SSH標準ポート）
• IdentityFile: キーペアファイルのパス

キーペアファイルの配置

.pemファイルを.sshフォルダに配置します。
例：C:\Users\your_name\.ssh\your_key_pair.pem

EC2への接続

1. SSH HOSTSでEC2インスタンス名にマウスを合わせる
2. 「Connect to Host in New Window」アイコンをクリック
3. 新しいVSCodeウィンドウが開いたら「Linux」を選択
4. 「Continue」をクリック

接続が成功すると、VSCodeの左下に接続先の情報が表示されます。

Terminalの起動

VSCodeでTerminalを開く方法は2つあります。

1. メニューから：「View」→「Terminal」
2. メニューから：「Terminal」→「New Terminal」

Terminal起動後の画面：

フォルダの操作

EC2フォルダを開く

1. 「File」→「Open Folder...」を選択
2. デフォルトの/home/ec2-user/フォルダを選択するか、他のフォルダを指定
3. 「OK」をクリック
4. 「Trust the authors of all files in the parent folder 'home'」にチェック
5. 「Yes, I trust the authors」をクリック

改行コードの設定

Linuxでの開発では、改行コードをLF、文字エンコーディングをUTF-8に設定することを推奨します。

LFの設定：

• VSCode下部の「CRLF」をクリックして「LF」を選択

UTF-8の設定：

1. VSCode下部の「UTF-8」をクリック
2. 「Save with Encoding」を選択
3. 「UTF-8 utf8」を選択

ファイル操作

ファイルの作成

1. 左側のエクスプローラで右クリック
2. 「New File」を選択
3. ファイル名と拡張子を入力（例：test.txt）
4. 内容を入力してCtrl+Sで保存

Markdownファイルの場合は、プレビューも確認できます：

ファイルのアップロード

ローカルPCからEC2へファイルをアップロードするには、ファイルをドラッグ&ドロップでVSCodeのエクスプローラにドロップします。

ファイルのダウンロード

1. ダウンロードしたいファイルを右クリック
2. 「Download...」を選択
3. 保存先を指定して「Download」をクリック

Terminalでのファイル確認

Terminalでllコマンドを実行すると、作成したファイルを確認できます。

ll

注意事項

• 現在の接続ユーザーはec2-userです
• rootユーザーで作成されたファイルなど、権限の制限があるファイルは編集できない場合があります
• フォルダの権限を変更する場合は、以下のコマンドを使用してください：

chmod -R ugo+rw [folder]

まとめ

VSCodeのRemote SSH拡張を使うことで、ローカル環境の快適なエディタ機能を使いながら、リモートサーバーでの開発が可能になります。ファイルの作成、編集、アップロード、ダウンロードも直感的に行えるため、とても便利です。

AWS EC2の環境構築において、非常に便利なツールですので、ぜひ活用してみてください。