AWSのCloud9を既存インスタンスで使用する

# はじめに
既存のインスタンスを使用して、Cloud9を構築します。Visual Studio CodeのRemote Developmentを使用してEC2に接続できますが、Cloud9だとブラウザがあれば動作するので、タブレットやChromeBookなどでもコーディングをできるようにします。

# インスタンスのセキュリティーグループの変更
インバウンドルールのSSHに、Cloud9のIPアドレス```18.179.48.128/27```　```18.179.48.96/27```許可します。

<img width="831" alt="スクリーンショット (54).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/2af35143-030e-b759-c7ce-b227366b6b1c.png">

# IPアドレスの固定(EIPを割り当てていない場合)
EC2ダッシュボードのネットワーク&セキュリティから、Elastic IPを選択します。

Elastic IPアドレスの割り当てを開き、割り当てをクリックします

![スクリーンショット (55).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/8d479e63-8046-2baa-62e4-73ceba1cda87.png)

取得したIPアドレスが選択された状態で、アクションからElastic IP アドレスの関連付けをクリックします。インスタンスが選択されていることを確認し、インスタンスの入力ボックスをクリックし、使用したいインスタンスを選択します。

<img width="672" alt="スクリーンショット (58).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/d086c0b9-1f02-c9b7-f749-b92cf3e6a4bf.png">

# Node.jsのインストール(Ubuntu向け)
最初に、アップデート＆アップグレードを実行します。

```
sudo apt-get update
```

```
sudo apt-get -y upgrade
```

curlのインストール

```
sudo apt-get -y install curl
```

PRAの導入

```
sudo curl -sL https://deb.nodesource.com/setup_12.x | sudo bash -
```

Node.jsのインストール

```
sudo apt-get -y install nodejs
```

# Cloud9の構築

## cloud9の設定
<a href="https://ap-northeast-1.console.aws.amazon.com/cloud9/home?region=ap-northeast-1" target="_blank">Cloud9</a>のページのNew AWS Cloud9 environment ->　Create environmentからCloud9の環境を構築します。

![スクリーンショット (59).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/0fad2978-51a0-6d35-aabe-be35c925bd63.png)

Nameと、Descriptionを入力します。Descriptionは省略可能です。入力が完了したら、```Next step```をクリックします。

![スクリーンショット (60).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/deecc55c-8023-4453-9608-a077bee5c104.png)

既存のインスタンスを使用するので、Environment typeから```Connect and run in remote server (SSH)```を選択します。

Userのところにインスタンスのユーザー名、HostにインスタンスのIPアドレス又はDNSを入力します。

<img width="711" alt="スクリーンショット (61).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/3fc8d8b2-c15f-c148-3d3c-c098f3445f65.png">

View public SSH keyのところのCopy key to clipboardをクリックして、クリップボードにCloud9の公開鍵をコピーします。

インスタンスに接続し、```./.ssh/authorized_keys```に上記でコピーした公開鍵を貼り付けます。

<img width="729" alt="スクリーンショット (62).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/af4b44ac-404b-5b29-61f6-1e4f7758775a.png">

公開鍵を追加したら、Next stepをクリックします。

Reviewが表示されるので、Create environmentをクリックします。

<img width="702" alt="スクリーンショット (63).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/08e53055-a952-f53b-bbfd-63c2967416db.png">

## Cloud9のインストール

```Can we quickly set up AWS Cloud9 on your environment?```と表示されるので、Nextをクリックします

![スクリーンショット (66).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/f5d78d72-c188-e575-c988-0fc33656e6ec.png)

```The following components will be installed. You can untick any of the optional components.```と表示されるので、すべてチェックが入っている状態で、Nextをクリックします。

![スクリーンショット (67).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/2aa0d723-6b00-40d3-998d-424b55b48f6b.png)

```Installing Cloud9 IDE```の```Do you want to install them now [Y/n]```が表示されたらエンターキーを押します。

![スクリーンショット (68).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/497ecea8-8b41-08e7-ac9c-0d6f574cfae3.png)

```Installation Completed```と表示されるとインストール成功です。Nextをクリックします。

![スクリーンショット (69).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/0e27f03c-7b9a-0f76-ebff-1afe8f44ae0a.png)

Finishをクリックして、Cloud9の使用を始めます。

![スクリーンショット (70).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/f16b067d-e6e7-3e40-d2a2-20fb5cd73114.png)

# Cloud9を使ってみる

タブの＋マークから、New Fileをクリックします。

![スクリーンショット (72).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/fa839e8d-d02b-4c35-426c-299872a9ce3d.png)

Ctrl + S または、File -> Saveから、名前を付けて保存します。ここでは、Hello.jsにしました。

![スクリーンショット (73).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/259123f3-2397-d6c8-ad96-9129cd24c6f2.png)

![スクリーンショット (74).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/65a66413-4c6e-9869-9191-da4f5147ee98.png)

プログラムを入力します。

``` javascript:Hello.js
const Hello = "Hello!";
for (let i = 0; i < 10; i ++ ) {
    console.log(Hello);
}
```

Alt + F5 または、Runボタンをクリックして実行します。
![スクリーンショット (77).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/b911a27b-3d49-771d-d01b-9d8753d548fc.png)

# おわりに

ブラウザ上で動くので、デバイスに関係なくコードを書くことがき、補完機能もあるので、ちょっとしたコーディングからメインのIDEとしても使えます。複数人で編集できるので、チーム開発やペアプロにもってこいだと思います。