23
39

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

VScodeでリモートサーバをさもローカルのように操作する

Posted at

背景

AWS-cliを使ってコマンド操作でEC2にあれやこれやする方法を学んでいたときにこんな便利なツールがあったのか!と感動したのでメモ。

やれること

VSCode上でEC2などのリモートサーバに接続してリモートサーバ側のディレクトリやファイル操作をVSCodeだけでやれる。
VSCodeだけでやれるのです。

前提

AWS EC2インスタンスが用意されて、キーペア設定など完了し、SSH接続の準備ができているものとします。
また、私が試した環境は Windows10 home です。
またキーペアのタイプはRSA、秘密鍵のファイル形式はOpenSSH(拡張子.pem)とします。

用意するもの

  • AWS EC2インスタンス
  • キーペア
  • EC2インスタンスSSH接続情報

AWSコンソールの
EC2 > インスタンス > [各自のインスタンスID] > 接続ボタン > SSHクライアントタブ
例:のところに以下の様な記載があります。これがEC2インスタンスSSH接続情報です。

ssh -i "[各自の秘密鍵ファイル名].pem" ec2-user@ec2-[各自のEC2インスタンス パブリックIP].ap-northeast-1.compute.amazonaws.com

image.png

VScodeに拡張機能「Remote - SSH」をインストールする

この拡張機能をインストールします。
※202/2/20時点ではまだプレビュー(ベータ)版のようなので今後細かい仕様が変わるかも知れません。

image.png

接続の準備(ローカル)

秘密鍵ファイルを保存する

AWSから取得した秘密鍵ファイルをローカルPCに保存します。
私の場合は以下に配置しました。
C:\Users\[ユーザ名]\.ssh\[各自の秘密鍵ファイル名].pem

ユーザディレクトリの下にconfigファイルを作成する。

私の場合は以下です。
C:\Users\[ユーザ名]\.ssh\config

configファイルに接続するEC2の情報を記載する。

作成したconfigファイルに以下の情報を記載します。
各括弧で囲った部分を自分の情報に書き換えてください。
EC2再起動などでパブリックIPアドレスが変わったらそのたびに書き換えます。

Hostはコンフィグファイル名内での設定名。
HostNameは接続先のサーバホスト名。IPアドレス。

C\Users\[ユーザ名]\.ssh\config
Host Test-EC2
  HostName [各自のEC2インスタンス パブリックIP].ap-northeast-1.compute.amazonaws.com
  IdentityFile ~/.ssh/[各自の秘密鍵ファイル名].pem
  User ec2-user

上記configの設定をしたうえでssh接続してみる。

# これだけで接続される。もうどこにいても。
ssh Test-EC2

接続できた!これはめちゃめちゃ便利!
なんでもっと早く知らなかったんだ。。
毎回sshツールでつないでlsしてcatやらtailやらしてました。。

使い方

VSCode左下の緑色の部分をクリックする(これが分かりずらい!

2022-02-12-19-49-57.png

リストからconnect to host を選択する

2022-02-12-19-50-48.png

configファイルで設定した接続先名が表示されるので選択する

初回は接続するか聞かれるのでcontinueを選択する

2022-02-12-19-51-34.png

接続確認

左下の緑色のゾーンに接続先が表示されていれば接続成功

image.png

フォルダを開くでサーバのディレクトリを表示

2022-02-12-19-54-56.png
image.png

まるでローカルディレクトリのように左側にツリー表示される!

ターミナルでの操作

ターミナルではbashからいつも通りのコマンドをつかえる!

2022-02-12-19-55-56.png

他ディレクトリの閲覧

他のetcとかのファイルも閲覧可能!
Vscodeメニューの ファイル > フォルダを開くとすると
他のディレクトリも閲覧可能(権限によるとは思います)

image.png

ファイル操作

ファイルの編集も全てローカルと同じように操作可能!
左のツリーから新規作成しても、ターミナルからtouchなどでファイルを作っても完全に同期している!

2022-02-12-20-00-59.png

まとめ

知っている人からしたら当たり前かもですが、
個人的には使い勝手の良さもさることながら
WindowsとLinuxは絶対に混ざり合うことはない全く別の概念だったので
ついに歩み寄る姿勢を見せてきたのかと嬉しくなって思わず記事を書いてしまいました。

おしまい。

23
39
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23
39

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?