GCP(Compute Engine)をvscodeでリモート接続とfilezillaで接続

# 参考サイト
ほぼ丸パクリ

https://qiita.com/FukuharaYohei/items/fa2d75ad8406e497906f

参考

https://onepagezen.com/google-cloud-ftp-filezilla-quick-start/

# 必要なもの
1. 静的IPアドレスを振り分けたVMインスタンス
1. [Remote - SSHのインストール](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh)

# VScodeからVMインスタンスにSSH接続するための設定
## 1. ローカル環境で公開鍵の発行
`"<user name>"` の例として `"username@gmail.com"`
```bash:ローカルのターミナル(power shellとか)
ssh-keygen -t rsa -b 4096 -C "<user name>"
```
３回の質問は全部 `enter` で飛ばせる。

デフォルトでは `C:\Users\username\.ssh` にファイルが作成される

```bash:作成した公開鍵をコピーする
cat ~/.ssh/id_rsa.pub 
```
## 2. VMインスタンスに公開鍵を登録
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/b4a0d593-9eb1-ea9c-f11f-f16e5084c3cb.png)

## 3. パーミッションを厳格にしておく必要がある
所有者以外禁止
```bash:
chmod 700 ~/.ssh
```

## 4. ターミナルからの起動が確認できれば成功
username は `username`だけ`gmail.com`は不要
```bash:
ssh username@VMインスタンスの静的IPアドレス -i ~/.ssh/id_rsa
```
「Are you sure you want to continue connecting (yes/no/[fingerprint])?」 
とでたら `yes` で エンターすると ターミナルがリモート接続できる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/ffe9e2a1-c2fe-6c55-155f-a200f6ceb620.png)

## 5. 構成ファイルの編集
先ほど作成した公開鍵と一緒に `C:\Users\username\.ssh`直下にconfigファイルが作成されているので編集する
ユーザー名に`@gmail.com`は不要
```tex:C:\Users\username\.ssh\config
Host VMインスタンス名
    HostName VMインスタンスの静的IPアドレス
    User ユーザー名
    IdentityFile ~/.ssh/id_rsa
    PasswordAuthentication no
    IdentitiesOnly yes
```
複数ある場合
```tex:C:\Users\username\.ssh\config
Host VMインスタンス名1
    HostName VMインスタンスの静的1IPアドレス
    User ユーザー名
    IdentityFile ~/.ssh/id_rsa
    PasswordAuthentication no
    IdentitiesOnly yes

Host VMインスタンス名2
    HostName VMインスタンスの静的2IPアドレス
    User ユーザー名
    IdentityFile ~/.ssh/id_rsa
    PasswordAuthentication no
    IdentitiesOnly yes
```
## 6. VS CodeでのVMインスタンスへのリモート接続
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/ffb58490-c659-fc9d-67f7-44c1ccb84bad.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/191aa216-209a-1ddc-eafd-feb3474c2fa1.png)
構成ファイルに登録したHOSTが表示されるのでクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/b50bb996-7e5f-672c-8f33-5100b9140181.png)

新しくVSコードが立ち上がるのでlinuxを選択して完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/dc4b0a3a-e61d-28a5-5fcf-7983f46f924d.png)

フォルダを開くとVMインスタンスの適当なフォルダをカレントディレクトリに設定できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/4279f342-1fa3-e00a-24f7-ec2b00978577.png)

## 5番外 構成ファイルはvsコードからも編集できる
1. リモート接続をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/35ef11f0-1942-1321-cea7-24d0a81ea213.png)
2. ホストに接続
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/70130992-79b7-ea06-354d-dd1ea0cedc24.png)
3. SSHホストを構成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/037ee996-0051-4f52-cc1b-d6e58485fc0f.png)
4. configファイルを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/6ccb57f4-5736-643e-56b5-8bd288c84822.png)

# Filezillaで接続

## 必要なもの
- id_rasをppkに変換するソフト
  - [putty](https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html) 

## メタデータに公開鍵を登録
登録する公開鍵は上で作成した`id_ras.pub`の値です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/2ae37b59-2aad-400b-88b9-c6d1f859d5b7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/64c38430-ea87-747a-1ffe-ee6dcb144832.png)
## ppkの作成
- Conversionsタブのimport keyをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/0644b58c-51c2-4adc-b004-9210c1c73ee3.png)

- 上で作成した id_ras を選択(デフォルトでは`C\user\username\.ssh`にできる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/c16828cb-8deb-4829-2566-891824cac1a6.png)

- `Save private key` をクリックすると`id_ras.ppk`が作成される

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/c043a05d-7307-ccc5-e3ef-cc5b9b6c32b7.png)

## FileZillaで接続
- Editタブ -> settings

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/40999792-04c9-9eb8-69f0-52bc393619eb.png)
- add key fileで `id_ras.ppk`を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/28f5e188-6ff1-1d31-5fcb-43de47596677.png)

- usernameに`@gmail.com`はいらない
- passwordとportも不要

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/d9268107-2a2f-bc39-922e-b102d8ed34c6.png)