Visual Studio CodeでSSH接続をしてみる




こんにちは、プロクラスの國府です。

私の開発環境で、Visual Studio Code(統合開発環境、以下VS Code)でSSH接続してみて、便利だったので紹介したいと思います。

どういったことができるのか

  1. サーバのシェルでコマンドを実行
  2. サーバー上のファイルを、ローカルにあるファイルのように自由に編集することができる

特に「2.」がとてもよく、サーバ上の「vi」や「nano」などのクセがあるエディタを使う必要がなく、VS Codeのエディタを使うことができます。

それでは、設定方法や使い方を見ていきましょう。

(前提として、VS Codeは、インストール済みとします)

1. VS Code に Remote SSH の拡張機能をインストール

拡張機能のボタンをクリックし、Remoteと入力。表示された Remote-SSH をインストールする。

インストールが正常に完了すると、以下のようなマークが左下に「><」が表示されることを確認する。

2. VS Code を利用しているマシンで SSH Key を作成

ssh-keygen を使って、公開鍵と秘密鍵のペアを作成する。
今回は” ssh-keygen -t rsa -b 2048 -f ~/.ssh/aws_server”を実行し、公開鍵と秘密鍵を作成。

上記のコマンドだと

秘密鍵ファイルは、~/.ssh/aws_server

公開鍵ファイルは、~/.ssh/aws_server.pub(pubはpublicの意)

に出来上がります。

3. 接続先サーバーの /home/user名/.ssh/authorized_keys に公開鍵の内容を入力

接続先サーバとして、AWSのEC2サーバ (OS: Amazon Linux)を使いました。ユーザはデフォルトから存在する「ec2-user」を使いました。

以下のコマンドで、接続先に公開鍵を登録する。

「cat aws_server.pub >> ~/aws_server.pub」

4. sshを利用して、リモートサーバのファイルを開く

VSCodeで、上の画像の赤枠1をクリック。

「SSHターゲット」に、configファイルに保存した 「Host ~」の名前が表示されるので、クリックする。赤枠2のアイコンをクリック。すると別ウィンドウのVSCodeが立ち上がり、リモートサーバに接続されます。

5. SSHしたウィンドウでファイルやディレクトを作成・編集してみる。

別ウィンドウのVSCodeの写真です。赤枠1でSSHで「Host 〜」で指定した名前のサーバに接続されていることが分かります。configファイルのUserで指定したユーザのホームディレクトリがワーキングディレクトリになっています。

ディレクトリを作成する

VSCodeの、メニューバーの「ターミナル – 新しいターミナル」をクリック。

ターミナルが起動するので「mkdir <作成するディレクトリの名前>」と入力するとディレクトリが作成されます。

上の画像の赤枠2の「開く…」をクリックすると、ディレクトリの一覧がでるので、移動したいディレクトを選択後「OK」を押すと、そのディレクトリに移動できます。

ファイルを作成するには、

上の画像の赤枠内をを右クリックして「新しいファイル」でファイル作成できます。

ファイルを編集するには、エクスプローラーからファイルを選択して編集するだけです。

以上で、使い方の説明は終わりになります。

VSCodeの拡張機能「Remote SSH」を使うと、サーバのファイルを簡単に編集することができます。