Sakura VPSをクラウドIDE(AWS Cloud 9)で使う

# やったこと

Sakura VPSを利用しているのですが、Teratermでログインしてviでコーディングというスタイルには**限界**を感じ
クラウドIDE(AWS Cloud9)経由で利用できるようにしました。

Cloud9でSakura VPSに接続している様子です (これだけ見てもわからないですね...)
ファイルブラウザ、高機能なエディタ、構文解析支援などなど、これで**コーディングがはかどる！**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/be305111-02b2-6184-7f96-d685703e7452.png)

# 必要なもの

以下の物はすでにあるものとして話を進めます

* AWSのアカウント
* Sakura VPSの契約
* Sakura VPSにSSH接続できるツール(Teratermなど)

# 手順

## 1. 22番ポートの開放

Sakura VPSの22番ポート(SSH)を開放します

[Sakura VPSのコントロールパネル](https://secure.sakura.ad.jp/vps/)にログインし、サーバ一覧から対象のサーバを選択
「パケットフィルタ」のタブを選択し、22番ポートが開放されていることを確認します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/e0c45763-fa12-47fc-3bf5-845fffc12419.png)

もし解放されていなければ、「パケットフィルタ設定へ」をクリックし開放ポートを追加してください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/cb781272-715c-7941-bf88-287cbbaf8cc9.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/9ec77b69-b427-0617-c546-64ec6dc5f253.png)

## 2. AWS Cloud9に新規開発環境を作りSakura VPSと接続する

2-1. [AWS Cloud9](https://aws.amazon.com/jp/cloud9/)を開き「Cloud9を始める」をクリックします
2-2. 「Create environment」をクリックします
2-3. **Step 1 Name environment** では NameとDescriptionを適当に設定して、Next stepを押します
2-4. **Step 2 Configure settings** では、"Create and run in remote server (SSH connection) を選択し、Userに Sakura VPS のログインアカウント、Hostに Sakura VPS のGlobal IPアドレスを入力します。そして、"Copy key to clipboard"をクリックしSSH Keyをクリップボードにコピーしておきます。※この時点でまだ Next Step は押さないでください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/7e785320-96e2-f046-8ca2-7c061faecb07.png)
2-5. Sakura VPSのコントロールパネルで「公開鍵」>>「鍵追加＞」を選らびます。名前は適当に入力。公開鍵にクリップボードの内容をペーストし「追加」を押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/3655bf5d-37c9-4bf1-b39d-597f3f39bd1b.png)
2-6. Cloud9の画面に戻り Next Step を押します。
2-7. SSH Key(公開鍵)の設定がうまくいっていれば、**Step 3 Review**画面が表示されるので、Create environmentをクリックします

## 3. Sakura VPSに必要なツールをインストールする

### 3-1. node.jsとnpmのインストール

Sakura VPSにTeratermで接続し、node.jsとnpmをインストールします

```shell
$ sudo apt-get update

$ sudo apt-get install -y nodejs npm
$ sudo npm cache clean
$ sudo npm install n -g
$ sudo -E n stable
$ sudo ln -sf /usr/local/bin/node /usr/bin/node
$ sudo apt-get purge -y nodejs npm
$ sudo apt -y autoremove
$ sudo npm install require
```
もしかすると、node.jsとnpmをインストールしないと、手順2-6か2-7でエラーが出るかもしれません。
その時は、3-1を実行してからもう一度やってみてください。

### 3-2. c9-install.shの実行

手順2-7でCreate environmentをクリックすると、以下のダイアログが表示されます。
```See C9-install```をクリックして、c9-install.shを取得してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/2ec7fdb6-0a23-da34-cf7d-dafa1800c49a.png)

c9-install.shをscpなどを利用して Sakura VPS 上にコピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/5520bdae-eac8-7a06-a76f-a5682ca00f93.png)

Sakura VPSで c9-install.sh を実行します
※chownはroot:rootのままだと色々Permissionのエラーが出るために、その対応

```shell
$ chmod 777 c9-install.sh
$ sudo ./c9-install.sh
$ find .c9 -exec sudo chown ユーザ名:グループ {} \;
```

## 4. AWS Cloud9 installerをうまく抜ける

手順3で Sakura VPS に必要なツールはインストールしたので、
Cloud9からインストールする必要はありません。
うまいタイミングで、インストーラーをキャンセルします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/2ec7fdb6-0a23-da34-cf7d-dafa1800c49a.png)
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/7cc21923-ca7b-0eb6-3d59-af8569cd7c02.png)
↓
**この画面で Cancel を押す！**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/b7fb7b81-8ac0-369f-d822-c51869becb08.png)

タイミングが遅すぎると、インストール失敗の画面になります
Previousをクリックしてもう一度 Cancel を狙ってください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/e98dd8a9-97f3-e980-6b05-009c61747c91.png)

うまく cancel できれば、この画面にたどり着きます。
Finish を押すと、Cloud9が起動し、Sakura VPSとの接続が確立されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/f0c0ba88-4f40-ec9e-ac85-2f39cf8be818.png)

これで設定は完了。
AWS Cloud9での快適なコーディングをお楽しみください！

# 参考にさせていただいた記事

既存EC2インスタンスにAWS Cloud9を構築する
[https://qiita.com/yube/items/57c3454c9e9517c7edf5](https://qiita.com/yube/items/57c3454c9e9517c7edf5)