VSCodeを使ってAWS EC2のソースコードを編集する

やりたいこと
--
EC2インスタンス上で直接開発できれば楽じゃない？
VSCodeを使って、AWS EC2のインスタンス上でWebアプリ開発できるようにします。

使用環境
--
クライアント
・Windows10 Home (Build 1809)
・Visual Studio Code (ver 1.39.2)

AWS EC2インスタンス
・Ubuntu Server 18.04 LTS
・キーペア有り
・自作のWebアプリ(Laravel)を配置。←これの開発をやりたい
早速設定してみよう
--
まず、VSCodeを使ってEC2のファイルシステムに接続するには、
VSCodeにSSHの拡張機能をインストールする必要が有ります。
今回は、Microsoftがリリースしている「Remote - SSH」を使用します。
この拡張をインストールしましょう。
![WS000000.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520421/f01f5447-0aa3-b5eb-6de5-f9349bda50b8.jpeg)

インストールが完了すると、メニューにリモート接続のアイコンが表示されます。
このアイコンをクリックしましょう。
![WS000001.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520421/f6534e6c-8696-6814-71b1-ed022af4f8b9.jpeg)

SSH TARGETSの＋アイコンをクリックして、Enter SSH Connection Commandのダイアログを表示します。
ここに、EC2インスタンスに接続するSSHコマンドを入力します。
![WS000002.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520421/ba59ad14-91f7-93c9-36b8-25f4b56d7b7b.jpeg)

コマンドは、"ssh -i "[秘密鍵]" [ユーザ]@[ホスト]"です。

[秘密鍵]の部分には、EC2インスタンスの作成時に発行した、秘密鍵ファイル(.pem)のパスを指定します。
私の環境では「C:\Users\takas\aws_key」にファイル名「aws-ubuntu.pem」で保存してありますので、
絶対パスで指定します。
※ちなみに、秘密鍵ファイルがNASとかファイルサーバとかの共有フォルダ上にあるとエラーになります。
　VSCode曰く、みんなが参照できる場所にある秘密鍵は信用できないそうです。

[ユーザ]の部分は、EC2インスタンスにインストールしたOSによって異なります。
私の場合はUbuntuなので、ユーザ名は"ubuntu"になります。
最新のユーザ名は、[AWSのリファレンス](https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/connection-prereqs.html)を参照してください。

一応、2019/10/26時点の情報をコピペしておきます。

- Amazon Linux 2 または Amazon Linux AMI の場合は、ユーザー名は ec2-user です。
- CentOS AMI の場合、ユーザー名は centos です。
- Debian AMI の場合は、ユーザー名は admin または root です。
- Fedora AMI の場合、ユーザー名は ec2-user または fedora です。
- RHEL AMI の場合は、ユーザー名は ec2-user または root のどちらかです。
- SUSE AMI の場合は、ユーザー名は ec2-user または root のどちらかです。
- Ubuntu AMI の場合は、ユーザー名は ubuntu です。
- それ以外の場合で、ec2-user および root が機能しない場合は、AMI プロバイダーに確認してください。

[ホスト]には、EC2コンソールに表記されている「パブリックDNS(IPv4)」もしくは「IPv4パブリックIP」を指定します。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520421/eaddc2c4-75c1-1ffe-1daa-a1f638cb765d.png)

SSHコマンドを入力してEnterキーを押すと、どのconfigファイルを利用するか選択します。
好きな方を選んでください。
※configファイルが無い場合はエラーになるので、
　メモ帳とかで空のconfigファイルを作って置いといてください。
![WS000003.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520421/92d73fd6-5968-7857-c237-ba6253591b25.jpeg)
![WS000005.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520421/3cbf54ec-2d14-ed18-22c6-736a7c51bc27.jpeg)

configファイルへの書き込みが完了すると、右下にファイルを開くかどうか聞かれます。
接続先の名前を変えたいので、ファイルを開きます。
接続先の名前はデフォルトでホスト名になっていますので、分かりやすい名前に変更しましょう。
![WS000006.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520421/85147f2e-283d-4f46-9d1d-54a84148ffcf.jpeg)
![WS000007.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520421/f2df93f7-6132-c1c9-e613-4c5f57e63947.jpeg)
![WS000008.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520421/2bc1d2f6-8e34-860b-6c52-c26fa17199b3.jpeg)

あとは、SSH　TARGETSで接続先の名前を右クリック、「Connect to Host in Current Windows」を選択。
初回接続の場合は、フィンガープリントの確認が求められますのでContinueを選択してください。
![WS000009.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520421/8a8e26e9-ec75-df36-1802-68dfdcad2b8a.jpeg)

で、しばらく待ちます・・

接続に成功すると、EXPLORERにSSHで繋がったことが表示されます。
Open Folderをクリックして、EC2インスタンス上のWebアプリのディレクトリをオープンします。
![WS000010.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520421/28071981-a702-cb26-fb85-c7fe56aced37.jpeg)
![WS000012.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520421/82c4b0ed-3f49-ad31-7a4f-0da55029afbf.jpeg)

これで、EXPLORERにEC2インスタンス上のディレクトリが表示されて
VSCodeで直接、Webアプリ開発が行えるようになりました！
めでたしめでたし。
![WS000013.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520421/bb2f39b9-f9d6-e0ee-2f7d-bfffacfb7aa0.jpeg)