AWS Cloud9を試してみた

# 背景・目的
- 自分のPCにソフトウェアをインストールしたくないため、クラウドで環境を構築する。

# 内容
## 概要
### Cloud9とは
- AWS上のIDE（統合開発環境）。
- 以下の機能を有する。
    - リッチなコード編集エクスペリエンス
    - 複数のプログラミング言語、ランタイムデバッガ、および組み込みターミナルをサポート
- クラウドでソフトウェアのコード作成、ビルド、実行、テスト、デバッグに使用するツールが含まれている。
- ウェブブラウザを通じてアクセスする。CLIでもアクセスできる

### 仕組み
<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/48ad8bb1-428c-fc1d-43a9-14cdccff26b4.png">

1. ブラウザからアクセス
1. コンピュート（EC2 or 独自サーバ）に接続
1. 作業内容はリポジトリ（CodeCommit or 独自リポジトリ）に保存

### Cloud9でできること
- 複数のプログラミング言語と AWS Cloud Development Kit (CDK) でコードを使用する。
- 実行中の Docker コンテナでコードを使用する。
- オンラインコードリポジトリを使用する。
- リアルタイムで他のユーザーとコラボレーションする。
- さまざまなデータベースやウェブサイト技術とやり取りする。
- AWS Lambda、Amazon API Gateway、およびAWSサーバーレスアプリケーションをターゲットにする。
- Amazon Lightsail、AWS CodeStar、および AWS CodePipeline など他の AWS 製品を利用する。


## チュートリアル
[チュートリアル: Hello AWS Cloud9 (コンソール)](https://docs.aws.amazon.com/ja_jp/cloud9/latest/user-guide/tutorial.html)を参考に、試す。


### ステップ 1: 環境を作成する
1.Cloud9のトップページにアクセスし「Create environment」をクリック。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/36ac3e2f-7b56-c229-ee9b-92311f6d5344.png">

2.NameとDescriptionを入力して、「Next Step」をクリック。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/14cd431b-126a-71fd-db41-b01d3826624a.png">

3.Environment type、Instance Type、PlatformとCost-saving settingを入力し、「Next Step」をクリック。
- 必要に応じてAdvancedでVPCとSubnetを設定する。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/9780e6f0-6b28-583c-fc93-db06e140856e.png">
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/97bae92c-9cc4-46e2-493f-7be48b6a91cf.png">


4.Review画面（キャプチャは省略）で「Create environment」をクリック。
5.作成まで1分程度かかる。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/89b67c49-f46f-b6d2-27f4-a43c434d3bc6.png">
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/4a011712-3b36-42e2-2bd7-3d88084e842a.png">
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/2ab92bd8-dcb2-04ac-9fdb-bcfc26703dec.png">

### ステップ 2: IDE のベーシック演習
Node.jsパッケージをインストールする。
1.環境を準備する。
```
XXXX:~/environment $ npm install readline-sync

added 1 package, and audited 5 packages in 804ms

found 0 vulnerabilities
XXXX:~/environment $ 
```

2.New Fileをクリックする。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/92a9ac37-5127-173a-27ed-130a6f8d88f8.png">

3.以下のコードをコピーする。
```
var readline = require('readline-sync');
var i = 10;
var input;

console.log("Hello Cloud9!");
console.log("i is " + i);

do {
    input = readline.question("Enter a number (or 'q' to quit): ");
    if (input === 'q') {
        console.log('OK, exiting.')
    }
    else{
        i += Number(input);
        console.log("i is now " + i);
    }
} while (input != 'q');

console.log("Goodbye!");
```
4.File>Saveでファイルを保存する。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/bb0afd74-085f-e652-2313-814b483bad81.png">

5.Create folderをクリック後、フォルダ名、Filenameを入力してSaveをクリックする。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/547c8883-786d-6ef6-18f1-0df252d8f7bb.png">

6.メニューバーのRun>Run Configurations>New Run Configurationをクリックする。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/010a8efa-d0ec-7d61-8196-544d45e4872f.png">

7.Commandに保存したコードを入力し、Runをクリックする。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/6601ac37-d200-7496-bb7f-992fc4ad951a.png">

```
Debugger listening on ws://xxx.xxx.xxx.xxx:xxxxx/xxxxxxxxxxx
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
Hello Cloud9!
i is 10
Enter a number (or 'q' to quit): 5
i is now 15
Enter a number (or 'q' to quit): 10
i is now 25
Enter a number (or 'q' to quit): q
OK, exiting.
Goodbye!
Waiting for the debugger to disconnect...

Process exited with code: 0
```
※ コマンドラインで実行する場合は、以下の通り。
```
XXXX:~/environment/src/node $ node hello-cloud9.js 
Hello Cloud9!
i is 10
Enter a number (or 'q' to quit): 5
i is now 15
Enter a number (or 'q' to quit): 10
i is now 25
Enter a number (or 'q' to quit): q
OK, exiting.
Goodbye!
XXXX:~/environment/src/node $ 
```
8.ブレイクポイントを設定しコードをデバッグする。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/2ca0db6d-6066-fd35-beca-7eb184be8bfa.png">

9.右側のデバックボタンをクリックし、Type an expression hereに10を入力する。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/87ce26d5-f296-5547-2c87-58f5dff321ef.png">
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/1830aa99-4613-266c-a309-84d115f82310.png">

10.Runをクリックする。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/9b32baab-2892-529d-9009-377e84a57ed8.png">

11.Resumeボタンで再開する。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/12f7fdba-354b-0d1c-3b7f-dc7fdf5883a3.png">

# 考察・結論
- もっさりとすると思っていたが、割とサクサクと動く。
- 今後、色々な機能を試してみたい。

# 参考
https://docs.aws.amazon.com/ja_jp/cloud9/latest/user-guide/welcome.html

https://docs.aws.amazon.com/ja_jp/cloud9/latest/user-guide/what-can-i-do.html

https://docs.aws.amazon.com/ja_jp/cloud9/latest/user-guide/tutorial.html