VisualStudioCodeからお手軽EC2接続・編集

はじめに

VSCodeを利用してEC2での開発ができれば楽だなぁと思っていた矢先、Remote SSHを利用することでEC2インスタンスの編集ができることを知ったので記述します

実装

1:VScodeにRemoteSSHをインストールする

スクリーンショット 2021-11-27 19.13.15.png

2:ターミナルで開発するEC2のパブリックIPアドレス・鍵の登録場所・ユーザ名を登録する

cdコマンドで『.ssh』へ移動 > vimで『config』を開き編集する

tetutetu214@mbp ~ % cd .ssh
tetutetu214@mbp .ssh % ls
config              tetutetu.pem
tetutetu214@mbp .ssh % vim config
Host Test-EC2
  HostName 52.199.91.242
  IdentityFile ~/.ssh/tetutetu_2.pem
  User ec2-user

※EC2を停止して、再起動した場合上記のHostNameにあたる値が変更されるので都度書き換える必要がある

3:VSCodeがEC2に接続される

3-1:『Connect Current Window to Host…』を押下

スクリーンショット 2021-11-27 19.13.30.png

3-2:2で作成したHost名を選択する

スクリーンショット 2021-11-27 19.13.42.png

3-3:新しいウィンドウが開き、EC2との連携を信頼する

スクリーンショット 2021-11-27 19.12.31.png

3-4:移動したい階層を押下して移動できる

スクリーンショット 2021-11-27 19.11.35.png

3-5 欄外の『ファイル』の『開く』を押下することでも、階層を移動することが出来る

スクリーンショット 2021-11-27 19.33.04.png

スクリーンショット 2021-11-27 19.33.23.png

おわりに

今までVSCodeを利用しながらEC2でも個人開発をしていましたが、全くこの機能を利用していなかったので次回の開発からは、有意義な構築していきたいです

Last modified: 2022-05-08

Author