CodeanywhereにVSCodeからSSH接続する

#この記事を読むとできること
（macの）VSCodeからCodeanywhereのcontainerに接続できる。

#作業前に...
この記事では複数回、コピーしておいた文字列を貼り付ける必要があります。
メモ帳などに溜めながら読み進めることをお勧めします。

#1. 公開鍵＆秘密鍵を生成する
まずは、macでターミナルを開いて、以下を実行します。

```sh:公開鍵と秘密鍵のキーペアを生成
ssh-keygen -t rsa
```
色々聞かれますが、基本的にEnterで進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625702/ed21b9f7-b830-5b88-27b4-3fbd21d8155c.png)

これで、公開鍵と秘密鍵が生成されました。後で使うので公開鍵を表示してみましょう。

```sh:公開鍵の内容を表示
cat .ssh/id_rsa.pub
```
![scsh 2021-12-03 0.46.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625702/b82ffd8d-cc50-994b-c3bb-4f64fc53935b.png)

`ssh-rsa`から始まる長い文字列が表示されればOK。コピーしておきましょう。

#2. Codeanywhereに公開鍵を登録する
Codeanywhereで[Dashboard](https://dashboard.codeanywhere.com/)にアクセスして、`Open IDE`からcontainerを開きましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625702/9151aad4-8d24-d769-049e-627e1ea573ca.png)

CodeanywhereのTerminalが開いていない場合は、上部タブメニュー[Terminal]->[New Terminal]から開きましょう。
まずは、`/home/cabox`に移動します。

:::note warn
しばらくcontainerのTerminalを使うので、macのターミナルで実行しないように注意してください。
:::


```sh:/home/caboxへ移動
cd /home/cabox
```

以下を実行して`authorized_keys`というファイルを作成します。

```sh:authorized_keysを作成
touch .ssh/authorized_keys
```
次に、authorized_keysに、先ほどコピーしておいた公開鍵を書き込みます。
以下の`<Your Public Key>`の部分を先ほどコピーしたssh-rsaから始まる文字列に置き換えてから実行してください。

```sh:公開鍵をauthorized_keysに書き込む
echo "<Your Public Key>" > .ssh/authorized_keys 
```

これでCodeanywhereにSSH接続する準備が整いました。

#3. macのターミナルからcontainerにSSH接続してみる
上部タブバー[Help]->[Getting Started]からGetting Startedを開きましょう。
SSH access to の右側に書いてある`host`から始まる文字列をコピーしておきましょう。
![scsh 2021-12-03 1.18.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625702/2a174394-5bc3-d93c-3c9e-1dbd0d3caf40.png)

それでは、macのターミナルから以下を実行します。

```sh:ssh接続
ssh cabox@<Host & Port>
```
:::note warn
@以降は先ほどコピーした文字列に置き換えてください。上の例だと以下のようになります。
ssh cabox@host31.codeanyhost.com -p 30533
:::

以下のような表示が出れば接続完了です。`Ctrl+D`で接続を解除しておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625702/03f24e67-9ac1-f282-6e64-1ba51dca9ee4.png)

#4. VSCodeに拡張機能Remote-SSHを導入する
いよいよVSCodeからCodeanywhereにSSH接続します。
VSCodeを起動して、`Shift+Command+X`で拡張機能バーを開きます。`Remote SSH`と検索して、インストールしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625702/545c075c-2687-8f2d-3a92-0084869f639a.png)

VSCodeの画面左下に緑色のボタンができていると思うので選択しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625702/adce8b2a-31ea-8f1d-c9e0-6ddf8a2f0b9c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625702/a2f1562b-e4e8-b07c-0b86-123da025494a.png)

画面上部に表示されたリストから`Open SSH Configuration File`->`*/*/.ssh/config`を選択しましょう。このパスは後で必要なので覚えておきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625702/e9b0be4b-16a1-79c6-f465-1c97da4dbad3.png)

では、ファイルに書き込んでいきます。

先ほど覚えておいたパスと、３章で取得した`hostXX.codeanyhost.com -p YYYYY`を使います。

`<Alias>`には好きな名前を付けることができます。`codeanywhere`とか`containerの名前`にしておくとわかりやすいでしょう。

`<Host>`には`hostXX.codeanyhost.com`を書いてください。
`User cabox`は変更せず書いてください。
`<Port>`には`YYYYY`を、
`<Path>`には先ほど覚えておいた`/*/*/.ssh/id_rsa`を書いてください。

```txt:config
Host <Alias>
  HostName <Host>
  User cabox
  Port <Port>
  IdentityFile <Path>
```

以下のようになったでしょうか。ファイルを上書き保存しておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625702/3a3124cc-a6ab-0cb7-0471-692769550733.png)

では、もう一度左下の緑ボタンを選択して[Connect to Host...]を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625702/a0724c26-bfe4-7cdb-231d-918f47ca5892.png)

先ほど`<Alias>`に入力したものが接続先として表示されているはずですので、選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625702/e97119c4-cbb6-a923-a255-05ce0d35d455.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625702/5d69c92c-0237-bf25-383e-0275abb93372.png)

:::note info
画面左下にSSH:〜と表示され、SSH接続が出来ました。
:::