Theiaを利用してVS Code Poweredな自分用クラウドIDE環境を構築する

2019/03/30 コメント追加 やっぱり[gitpod](https://gitpod.io/)に乗り換えましたｗ
2019/03/13 コメント追加 [Coder](https://coder.com/)に乗り換えました

## 前置き

わたくし公私共にChromebook使いなので基本的に全てChromebook上のクラウドツールで済ませたいと思っているのですが、開発に関しては仕事上ネイティブAPIを叩くelectronアプリを試作する必要もあり、Visual Studio Code ＠Windows(electron)、cloud9@chrome(Web/electronのUI)、Monaca@chrome(Cordova)と使い分けていました。この中のお気に入りはVS Codeだったのですが、electronベースに関わらずオンラインバージョンは無く、VS Codeで環境統一できたらいいなーとずっとモヤモヤしていたところ、VS Codeを一部利用した[Theia](https://www.theia-ide.org/)のニュースを見たので、環境構築してみました。

gitpod@Chromebook C101PA
![P_20190407_203655.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103775/9e04c570-5179-e62f-2890-3afb997068d7.jpeg)


## 手順

### なにかマシンを用意する

これ用にubuntu18.04のEC2のスポットインスタンスを1つ立てました。
（ホントはECSを使おうかと思ったのですが、不慣れで意外と設定が大変そうだったので今回は断念しました。きっと誰か素敵な記事を書いてくれるはず！）

### オフィシャルドキュメントに従いDockerのインストール&テスト

**編注** ここらへんはオフィシャルドキュメントの更新頻度も高いので、本家当たるのをおすすめします。久しぶりにやろうとしてやってみたら変わったりしてたので、、。

```bash:install_ubuntu.sh

sudo apt-get install apt-transport-https ca-certificates curl gnupg-agent software-properties-common
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
sudo apt-key fingerprint 0EBFCD88
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io
sudo docker run hello-world
```
コピペです。ちなみにDocker初めて使うので、検索上位サイトに書いてあったインストール方法で行なったのですが、古いのがインストールされたっぽく、無駄に1時間ハマったりしていました、、。ドキュメントはまず公式ドキュメントを当たりましょう、、、。

### プロジェクトフォルダを作成

- 開発に使うワークスペース用のフォルダを作成

```
mkdir myApp
```

後でここに何かソース突っ込みます。

- permissionを追加し移動(777でなくても良いかも)

```
chmod 777 myApp
cd myApp
```

- Theiaコンテナの立ち上げ

オフィシャルドキュメントにあるコマンドをそのままコピペ

```
sudo docker run -it -p 3000:3000 -d -v "$(pwd):/home/project:cached" theiaide/theia:next
```

ちなみにDockerhubで探すといくつかの種類のコンテナが見つかります。theiaide/theiaは本当に最低限なので、本格的に使って見るには theiaide/theia-full あたりが必要かもしれません。
https://hub.docker.com/search?q=theiaide&type=image

これでコンテナにアクセス http://hostname:3000 すると無事動作していることが分かり、おぉぉーとなります。で、このままだと認証が無いので認証を追加、、しようとしたのですが、[ここ](https://github.com/theia-ide/theia/issues/2365)にもある通り、Theia自体には認証機能を持たせる計画が無いらしく、前段に認証機能持たせる必要があるみたいです。

### リバースプロキシを置く

ALB配下にあるインスタンスなのでALBの認証機能を使ってみようかと思ったのですが、OCID等ちゃんとした認証用でこれまた設定が大変そうだったので、いったん簡易的にベーシック認証だけを行うリバースプロキシを置くことにしました。せっかくなのでこれもdockerでやってみます。
※ここでホスト名は host.example.com とします。

### ベーシック認証用ディレクトリ・ファイルを作成

htpasswd用ディレクトリを作成し、apache2-utilsでhtpasswd形式ファイルを作成します。

```
mkdir ~/htpasswd
sudo apt-get install apache2-utils
htpasswd -c -b ~/htpasswd/host.example.com ユーザ名 パスワード
```
 
### リバースプロキシとTheiaコンテナを立ち上げなおす

さっきのコンテナはいったんkillします（docker kill プロセス）。
その後コンテナを立ち上げなおします。

```
sudo docker run -d -p 80:80 -v /var/run/docker.sock:/tmp/docker.sock:ro \
  -v /home/ubuntu/htpasswd:/etc/nginx/htpasswd \
  jwilder/nginx-proxy
sudo docker run -it -p 3000:3000 -d -v "/home/ubuntu/myApp:/home/project:cached" -e VIRTUAL_HOST=host.example.com theiaide/theia:next
```

※ちなみにこの後ポート3000は外部アクセス不要なので閉じます

これでhost.example.comにアクセスするとベーシック認証付きでTheiaを使えます。業務用にはもうちょっとちゃんとしたほうが良いとは思いますが、個人用で楽しむものとしてこんな感じで設定してみました、の話でした。

### Theiaをgithubから起動できるGitpodについて

重たい処理が走らないプロジェクトならgithubでソース管理しつつ[Gitpod.io](https://www.gitpod.io/index.html)を利用する、というのも結構良いとは思います(かなり便利なので契約してしまいました）。なんだかんだいってサーバーをそれなりにセキュアに保ったり、ポートの設定したりするのは面倒なので、気持ちよく契約してしまうのもおすすめです。