小村の開発環境構築（４）　VSCodeからVMインスタンス（Ubuntu）へのリモート接続設定

こんばんは、小村です。
今日はおまちかね！VSCodeからUbuntuにリモート接続するよ！
もう自分のパソコンに依存しなくて済むよ！浮気し放題だネ！！！

やること

SSHキー作成
GCEインスタンスに公開鍵を登録
VSCodeに拡張機能「Remote Development」をインストール
VSCodeのSSH接続用config設定
Ubuntuへリモート接続

前提

Windows環境
- いつかはMacでもやりたいけどね！ごめんね今はわからんちん！
VSCodeがインストール済
- ない人はVSCode 公式からDLとインストールしてねー
- ↓あたりを参考にして日本語化あたりまでしておくと楽かも
  - 参考：【2021年5月更新】VisualStudioCodeのインストールと日本語化

手順

SSHキー存在確認

これからリモート接続に必要になる「SSHキー」を作ってくよ！
まずはエクスプローラー開いて下記のフォルダパスにアクセスしてね
- C:\Users\(windowsアカウント)

ここに[.ssh]フォルダが存在するかを確認。
- 存在しない
  - Good！問題なし！次の項へGOだ！
- 存在する、けどいつ作られたか／用途がわかっている
  - Cool！君は君の判断でどうにでもできる！
- 存在する、そしてなぜ存在するかもわからない
  - Boo！次の項ではくれぐれもEnter連打するなよ！！！

コマンドプロンプトよりSSHキー作成

コマンドプロンプトを開いて下記を入力

ssh-keygen

なんか色々質問される。痴れ者が……余と会話できることを誇りに思え……
下記が最初の質問

Enter file in which to save the key 
(C:\Users\(Windowsアカウント)/.ssh/id_rsa):

さっきの項で[.ssh]フォルダが存在しなかった人はそのままEnterでOK！
- さっき確認したフォルダに[.ssh]フォルダが作られるようになるよ
もし[.ssh]フォルダが存在した人はフォルダパスを変えてね！
- もし何も変えずそのままEnterすると上書きするよーって聞かれるよ！
- 上書きしちゃうと別の何かで使ってるSSHキーを消しちゃう可能性あるからね！
- 私は言ったからな！！！！！！
- どこに変えたらいいか？自分で考えろ！（.ssh→.ssh2であと同じでいいかも？）

Enter passphrase (empty for no passphrase):

２つ目の質問はパスフレーズだね。パスワードみたいなものだよ
- ~~つけなくても作れるけどつけたほうが良いよ~~
- つけると毎回リモート接続する時に入力する必要があるよ
  - くっそめんどい！だから私はつけなくした！最初つけたけど作り直した！
- 注：つけないことでセキュリティ上何かあっても小村は責任を負いません
  - 私は言ったからな！！！！！！
パスフレーズを入れた場合再入力を求められる
パスフレーズが終わったら上の画像のように表示されて完了！

[id_rsa.pub]（公開鍵）の内容コピー

最初に確認したフォルダに[.ssh]フォルダが存在することを確認
- 作成するフォルダパス変えた人はそっち見てね！
そしたらフォルダ内の[id_rsa.pub]の中身をコピーしておいてね！
- 公開鍵というものだよ！こっちは基本的に中身見られても平気！

前回作成したGCEインスタンスを編集

GCEでリモート接続したいインスタンスを選択して[編集]を押下！
インスタンスが立ち上がってても編集可能だよ！

GCEインスタンスに公開鍵を登録

[SSH 認証鍵]の欄で「表示して編集する」をクリック

さっきコピーした[id_rsa.pub]の内容をペースト
貼り付けた値の最後の部分はキーになる。変更してもよいし変えなくてもよい。

私は[komura]に変えたよ！
- このキー値は後で使うので覚えておいてね
そいだら「保存」をクリック

GCEインスタンスを立ち上げる

次は、GCEインスタンスが立ち上がってなければ立ち上げてね
そしたら外部IPが表示されるのでコピーしておいてね、後で使うよ！

VSCodeにRemoteDevelopmentをインストール

ようやくVSCodeを使うよ！起動してね！
一番左のバー（アクティビティバー）にて拡張機能をクリック
- ちょっと違うテトリスみたいなアイコンのやつだね！
そしたら開いたバー（サイドバー）の検索欄に[Remote Development]を入力して検索
- 画像の[Remote Development]を選択してインストール！
詳細な説明は避けるけど、これがVSCodeからリモート接続してくれるえらい奴だよ！

VSCodeよりRemoteSSHのコンフィグファイルを開く

[ctrl] + [shift] + [P]にてコマンドパレットを開くよ
- このショートカットはよく使うから覚えよう！
[remote-ssh open]と入力して、一番上に出た行をクリック
先ほどSSHキーを作成した[.ssh]フォルダパスを指定するよ！

RemoteSSHのコンフィグファイルの編集

上が開いた直後、下が編集後

Host Ubuntu-001（自由でOK）
    HostName (GCEの起ち上げた際の外部IP)
    User (GCEに登録したSSHのキー名)
    IdentityFile ~\.ssh\id_rsa（追加。秘密鍵のあるところ。フルパスでもOK）

[Host]はそのコンフィグの名前みたいだから好きな名前でOK
[HostName]は立ち上げたGCEインスタンスの外部IPを貼り付ける
- 外部IPは静的化しない限り変わるので毎回書き直す必要あり
  - 静的化すると結構お金かかるので石油王以外は素直に毎回書き直そう
[User]はGCEのSSHキーを登録した時の、左側に出てたキー名
[IdentityFile]はSSHキーの秘密鍵（id_rsa）の作成した場所
上記を入力したら保存するよ！！！これで設定はおわり！！！

Ubuntuにリモート接続

一番左のバー（アクティビティバー）からリモートエクスプローラーを選択
前項のコンフィグの[Host]で設定した名前があるので、オンカーソル
右側ににちっこいフォルダマークみたいのが出るのでクリック

新しいウィンドウが立ち上がって何か聞かれるので、[Linux]を選択
また何か聞かれるので[Continue]を選択
SSHキー作成時にパスフレーズを入力してた場合聞かれるので入力
長かったーーー！！！！これで！！！ついに！！！

接続できない

んあああああああああああああああああ！！！！！（発狂）
めっちゃエラー出るんだが？？？
CentOS7ではこれで動いていたんだが？？？
なんぞ？？？誰か我に恨み持ってる？？？

今度こそ接続！

やったーーー！！！つながった！！！
SSHkeyのパスフレーズ間違えてただけみたいテヘペロ(・ω<)
SSHkeyをパスフレーズなしで作り直してGCEに再設定したら繋がりました！
くぅ～！疲れました！これにて完です！

おわりに

まだもうちょっとだけ続くのじゃ
途中で言ったけど、GCEのインスタンスを立ち上げなおすたびに外部IPが変わるよ！
- なので毎回コンフィグの[HostName]を変更する必要あり
- 静的な外部IPにすることもできるけどお金かかるので計画的にね！
じゃー次はUbuntuに対しての設定しなきゃだねー！
はー疲れた！！！今日はこれでおちまい！
ちゃおちゃお～またね！！！