これまでEC2インスタンス内のファイルを編集する際には、SSH接続してVimで編集していました。
Vimを使うのが嫌というわけではないけど、VisualStudioCodeでも編集、デバッグができるみたいなので手順をまとめます。
手順としては
1.VisualStudioCodeにプラグイン追加
2.~/.ssh/configの編集
3.接続、編集
##前提条件
・macOS
・VisualStudioCodeがインストール済み
・EC2インスタンスが作成済み
・EC2インスタンスにはApacheがインストール済み
・ローカルPCからEC2インスタンスにSSH接続できる環境構築済み
##1.VisualStudioCodeにプラグイン追加
VisualStudioCodeを開き、プラグインであるRemote Developmentをインストールしましょう。
有効にした後、一度VisualStudioCodeを閉じて開き直してください。
開き直した後、サイドバーのアイコンをクリックします。
するとSSH接続可能なリモート環境が表示されます。
こちらにEC2インスタンスを追加しましょう。
##2.~/.ssh/configの編集
接続可能一覧に表示させるには、~/.ssh/configにEC2インスタンスの情報を追加する必要があります。
ターミナルで以下のコマンドを実行してください。
% cd ~/.ssh
% vi config
~/.ssh/configに以下のEC2インスタンスの情報を追加します。
.
.
.
Host 任意の接続名(例：ec2-user)
User ユーザー名(例：ec2-user)
HostName ホスト名(例：XX.XXX.XX.XXX)
IdentityFile .pemファイルのパス(例：~/.ssh/XXX.pem)
上書き保存後、VisualStudioCodeを一度閉じて開き直してください。
追加した接続先が表示されているはずです。
##3.接続、編集
それでは早速、接続してみます。
表示されている接続先名の右側のアイコンをクリックしましょう。
自動的に新しいウインドウが開かれ、SSH接続をしてくれます。
早速コードを書いていきましょう。
Apacheのデフォルトのドキュメントルートは/var/www/htmlになっているかと思いますのでそちらの直下にファイルを作成します。
左側の青いボタン「フォルダーを開く」をクリックして/var/www/htmlを指定してください。
/var/www/htmlを開くことができたらindex.htmlを作成し適当なコードを記述します。
アクセスして確認してみましょう。
無事反映されました！
これでリモートデバッグなどもVisualStudioCodeで行えます。
ちなみに元々インスタンス内に置かれているファイルに関しては書き込み権限がない場合もあります。
適宜権限変更などして対応してください。