Cloud9でVScodeをつかう

## AWS Cloud9

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/df72b1ed-6970-4c4b-4449-2421ab15daf7.png)

* ブラウザ上で動作するIDE
* 実態はEC2だが、起動や終了が自動化される
* 単一の環境を複数人でアクセスして共同開発ができる

AWSのワークショップやハンズオンでよく触る

---

## 個人的にはAWS Cloud9はあまり使ってなかった

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/1ffdb63c-7c2a-40d3-e8d3-c7f6be508573.png)

使いにくいからというより、慣れるほど使ってない。

---

## 個人的にはAWS Cloud9はあまり使ってなかった


いや、慣れたい思わない。

---

## 個人的にはAWS Cloud9はあまり使ってなかった


いや、慣れたい思わない。
というか、慣れたエディターが使いたい！！

---

## 個人的にはAWS Cloud9はあまり使ってなかった


いや、慣れたい思わない。
というか、慣れたエディターが使いたい！！

**VSCodeを使いたい！**

---

## 個人的にはAWS Cloud9はあまり使ってなかった


いや、慣れたい思わない。
というか、慣れたエディターが使いたい！！

**VSCodeを使いたい！**

Cloud9上でVSCodeを使用する方法をご紹介します。


---

## VScodeにはWeb版がある

`https://vscode.dev/`にアクセスするだけ。

https://vscode.dev/

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/eb619b46-2a3b-c0f5-6892-f2be10175a67.png)

ローカルディスク上のソースコードを読んだりできます。

（もうこれでいいやんと思った方も、もう少しお付き合いください）


---

## VSCodeには、Web版のサーバー機能がビルトインされている

引数に`--serve-web`をつけて起動する

```shell
code serve-web --without-connection-token --accept-server-license-terms
```

```
*
* Visual Studio Code Server
*
* By using the software, you agree to
* the Visual Studio Code Server License Terms (https://aka.ms/vscode-server-license) and
* the Microsoft Privacy Statement (https://privacy.microsoft.com/en-US/privacystatement).
*
Web UI available at http://127.0.0.1:8000
```

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/c492fa54-4f16-2764-d948-96330faadc38.png)


参考

https://qiita.com/ku_suke/items/07b67bd710b17a3a7cf3

---

# これをCloud9上で起動します

Cloud9で実行します。

:::note
VSCodeにはCLI版があるのでそれを使用します
:::

```shell
curl -L "https://code.visualstudio.com/sha/download?build=stable&os=cli-alpine-x64" -o vscode_cli_alpine_x64_cli.tar.gz
tar zxvf vscode_cli_alpine_x64_cli.tar.gz
mkdir -p ~/.local/bin
mv code ~/.local/bin/
```

```shell
code serve-web --port 8080 --without-connection-token --accept-server-license-terms
```

:::note
`--port 8080`が重要です。
:::

`Preview` -> `Preview Running Application`をクリック

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/965763fd-e96d-d1fc-6744-2ab6ece19bb6.png)

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/a24d40fc-6dca-956d-7485-55696f923db9.png)

`Browser`の横のアイコンをクリックすると新しいタブで開きます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/c1ccc971-6fe2-a1b6-1807-b1e03025c5b4.png)

URLはこんな感じ

```
https://**********.vfs.cloud9.*****.amazonaws.com/
```

どうもCloud9で起動しているサーバーにポート転送されている模様

---
## ポート転送のルール（個人調べ）

| ブラウザでアクセスするポート | 転送先のサーバーポート |
| --- | --- |
| 443 | 8080 |
| 8080 | 8080 |
| 8081 | 8081 |
| 8082 | 8082 |

Cloud9上で起動するアプリケーションが使用できるポートは8080～8082までとのこと。

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


VSCodeサーバーを立ち上げたまま、Webアプリ開発も可能！

---

## 疑問：URLがわかっちゃうと認証なしでアクセスできちゃうんじゃない？？

シークレットモードで開くと、 **Oops**

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/5cbff4f9-8691-9f44-e786-c52df72d1936.png)

マネジメントコンソールにアクセスできるIAM権限（？）かなにかで認証されている模様。だから一応安心？

---

## Cloud9上のVSCodeの利点

* 使い慣れたIDE、拡張機能のインストールもできる
* AWSの認証情報を気にしなくて良い
* ブラウザさえあればPCを変えても同じ環境が使える
* ブラウザ閉じたら勝手にEC2停止

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/dc56b56e-77b7-9fe3-ef08-2f8531660168.png)

難点
* たまに応答しなくなる

これができてから、Cloud9のことがちょっとだけ好きになりました😄

---

# 宣伝させてください

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/eb29fecc-80b2-2643-356b-dfdcf30e71ce.png)

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/494c3cc2-bf59-2f2c-f7ef-f531ea06383d.png)

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/90afd246-f815-2ab9-26fe-2de0ca8b6149.png)

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/ce5b22c2-88a1-6f61-5e7b-727eda0fcea2.png)

---

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/57210daa-a989-76b6-1f95-e96f5495e62d.png)

---

ご静聴ありがとうございました。

https://amzn.asia/d/ixBbCO7