(自分用)dockerでブラウザから触れるIDEの構築(お試し)

## はじめに
それまでは知らなかったんですが[この記事](https://qiita.com/HeRo/items/61e7f45a5dbb5fd0e4a7)で
jupyterlabの存在を知ってからWebIDEに興味を持ったので
ちょっとdockerで試してみようと思います。

### 環境
以下の環境でやっていきます。

- Ubuntu20.04
- Docker Version 20.10.1
- docker-compose Version 1.25.0


## 事前準備
```shell:
mkdir web-ide
mkdir web-ide/cloud9
mkdir web-ide/jupyter-lab
mkdir web-ide/eclipse-che
mkdir web-ide/code-server
mkdir web-ide/eclipse-theia
```

## eclipse-theia
最近初めて知りましたがvscodeの対抗でeclipse-thieaというものがあるそうです。
Gitpodに使われていたり、著名な企業が使っているようで相当期待が持てます。
[公式Github](https://github.com/theia-ide/theia-apps)を見て、さくっと構築してみます。

```shell:
cd web-ide/eclipse-theia

touch docker-compose.yml
# docker-compose.ymlを編集
gedit docker-compose.yml

mkdir project
```

docker-composeはこんな感じで、とりあえず全部入りのイメージにしておきます。

```yaml:docker-compose.yml
version: '2.2'

services:
  eclipse-theia:
    restart: always
    image: theiaide/theia-full # 全部入りイメージ
    init: true
    ports:
      - 50003:3000
    volumes:
      - ./project:/home/project/:cached

```

起動します。
`docker-compose up -d`

ブラウザからアクセスしてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/168779/2298e311-f292-f94b-4121-b6af7c5557ea.png)

test.pyを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/168779/5551e1e8-8951-092d-aebf-b099c6ef09cc.png)

Linterがないって言われるのでinstallします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/168779/afc7192a-5dbb-ecf8-3f92-0a57187fface.png)

以下のコマンドが叩かれました。

```shell:
/usr/bin/python3.8 -m pip install -U pylint --u Collecting pylint
```

その後、実行しようとした時にlaunch.jsonがないと「Debug Configuration」がないと言われます。
ここは当然「Python File」を選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/168779/2cf00fcf-3918-a983-72ab-c4a829cbcaf9.png)

以下のjsonが作られます。

```json:.theid/launch.json
{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Current File",
      "type": "python",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal"
    }
  ]
}
```
ブレークポイントを置いて、実行してみると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/168779/db78fa8b-c635-16f4-47d1-00c37a6a9ca2.png)
ちゃんとデバッグできるみたいです。

他のCloud9やcode-serverのようにセキュリティ面はどうなのかな？と思いましたが
どうもクラウド上で使う場合はnginx経由で証明書ありきで使うのかな？
英語なのでちゃんと読めていませんがおそらく。
参考URLは以下になります。
[How To Set Up the Eclipse Theia Cloud IDE Platform on Ubuntu 18.04 [Quickstart]](https://www.xpresservers.com/how-to-set-up-the-eclipse-theia-cloud-ide-platform-on-ubuntu-18-04-quickstart/)
[How To Set Up the Eclipse Theia Cloud IDE Platform on Ubuntu 18.04 [Quickstart]](https://www.stackovercloud.com/2020/02/10/how-to-set-up-the-eclipse-theia-cloud-ide-platform-on-ubuntu-18-04-quickstart/)
[How To Set Up the Eclipse Theia Cloud IDE Platform on Ubuntu 18.04](https://www.digitalocean.com/community/tutorials/how-to-set-up-the-eclipse-theia-cloud-ide-platform-on-ubuntu-18-04)
別の機会に試してみようと思います。

## Cloud9

docker-hubで探しているとかなり[新しくてpull数も多いもの](https://hub.docker.com/r/linuxserver/cloud9)があったので
それを使います。


```shell:
cd web-ide/cloud9

touch docker-compose.yml
# docker-compose.ymlを編集
gedit docker-compose.yml

mkdir code
mkdir docker.sock
```

docker-compose.ymlはこんな感じにしておきます。

```yaml:docker-compose.yml
version: "2.1"
services:
  cloud9:
    image: linuxserver/cloud9:python
    container_name: cloud9
    environment:
      - PUID=1000
      - PGID=1000
      - TZ=Asia/Tokyo
      - GITURL=https://github.com/linuxserver/docker-cloud9.git #optional
      - USERNAME=user #optional
      - PASSWORD=password #optional
    volumes:
      - ./code:/code #optional
      - ./docker.sock:/var/run/docker.sock #optional
    ports:
      - 10000:8000
    restart: unless-stopped
```

起動します。
`docker-compose up -d`

ブラウザからアクセスしてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/168779/e56bdb18-4628-a416-e4ae-34e10b44db4e.png)
ymlで設定しておいたuserとpasswordを入れるとアクセスできました。

tagはpythonにしましたがRunnerはこれだけ入っている？みたいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/168779/352cef72-5ac2-4ee2-4951-075c1eea6ed8.png)

bashからは実行できましたがRunからはなぜかpythonが実行できませんでした。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/168779/3ffbae81-9a25-18c7-af5a-727b5978f196.png)

Runnerの設定が何か違うのでしょうか？
とりあえずお試しなのでヨシ！とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/168779/6e15bbee-ffd8-a284-0c1d-e3908a418342.png)

### 追記
Runnerを追加して、cmdの箇所を以下のようにするとpythonでもRunできました。

```diff:python3.run
// This file overrides the built-in Python runner
// For more information see http://docs.c9.io:8080/#!/api/run-method-run
{
  "cmd": [
--- "$python",
+++ "python3",
    "$file",
    "$args"
  ],
  "selector": "^.*\\.(python|py)$",
  "env": {
    "PYTHONPATH": "$python_path"
  }
}
```

C++は実行できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/168779/a54b8813-169c-0162-7d6d-a30e997e9448.png)

参考URL:
[linuxserver/cloud9](https://hub.docker.com/r/linuxserver/cloud9)
[docker+alpine+cloud9で最速・最軽量IDE環境を用意する](https://qiita.com/ssaita/items/17d78d6a9449dcb5c7b4)
[オンラインIDEを無料で作ろう](https://qiita.com/Utree/items/658b76f17e5511d3ccc4)

## code-server
```
cd /web-ide/code-server
mkdir projects
mkdir code-server
touch Dockerfile
touch docker-compose.yml
```

Dockerfileとdocker-compose.ymlは以下になります。
簡単にpython3をinstallしています。

```dockerfile:Dockerfile
FROM codercom/code-server:latest

USER root

RUN apt-get update && apt-get install -y \
	python3

USER coder
```

```yaml:docker-compose.yml
version: "3"
services:
  code:
    build:
      context: .
      dockerfile: Dockerfile
    restart: always
    environment:
      PASSWORD: password
    ports:
      - 30001:8080
    volumes:
      - ./projects:/home/coder/project
      - ./code-server:/home/coder/.local/share/code-server
```

ブラウザからアクセスしてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/168779/ff8619bc-1784-c293-65f5-945ac10e9ac3.png)
ymlで設定しておいたpasswordを入れるとアクセスできました。

ターミナルからpythonを実行します。
```
python3 test.py
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/168779/b1111897-b5f0-5400-45a6-6c4089802df2.png)
※venv入れてなかったので後から入れてます。

pythonは動きましたがdebugの仕方がよくわからない。。。
通常のvscode同様lanuch.jsonがあれば出来そうだけど
設定がよくわからない。
デバッガーなしでもブラウザベースでここまで使えるならちょっとした開発なら全然使えそうです。

[Dockerで作る、最強の移動型開発環境](https://qiita.com/bash-dev/items/589bc496cdc06037fd08)
[code-server 構築の茨の道と、その近道](https://qiita.com/cognitom/items/6d8af8a71552ec9c6212)
[自宅サーバーで Docker + Nginx + code-serverを動かそうとした話](https://qiita.com/sskmy1024y/items/8f098f7faa36fc34608c)
[codercom/code-server](https://hub.docker.com/r/codercom/code-server)
[VISUAL STUDIO CODEのCODE SERVERを構築してブラウザからアクセスしてみる](https://sky-joker.tech/2020/04/25/visual-studio-code%E3%81%AEcode-server%E3%82%92%E6%A7%8B%E7%AF%89%E3%81%97%E3%81%A6%E3%83%95%E3%82%99%E3%83%A9%E3%82%A6%E3%82%B5%E3%82%99%E3%81%8B%E3%82%89%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%97/)

## Jupyter Lab
以下の記事を参考に。
言語のお試しであれば間違いなくこれ一択ですかね。
アプリ開発はちょっとよくわからないですが、頑張ればいけるのかもしれないですね。
[17言語をぶち込んだJupyter LabのDockerイメージを作ってみた](https://qiita.com/HeRo/items/61e7f45a5dbb5fd0e4a7)
[HeRoMo/jupyter-langs](https://github.com/HeRoMo/jupyter-langs)
[(自分用) jupyterlabで色々な言語とC#も実行できるようにする](https://qiita.com/mototoke/items/4a64440b190c549d74a4)
[mototoke/jupyter-langs](https://github.com/mototoke/jupyter-langs)

## eclipse-che
うまく構築できなかったので割愛します。
悲しみ。

## 総評
ちょっとしか触っていませんが個人的な操作感としてはcloud9が気に入りました。
code-serverはほぼvscodeなので普段使いと変わらないのですがターミナルのインテリセンスが効かなかったのがちょっとう～んって感じでした。
eclisep-cheは触れませんでしたがプロジェクトのtemplateが使えるみたいなのでけっこう良さそうです。
何れにしても一つのサーバー立てておいてブラウザだけで開発できるのは素晴らしいの一言に尽きますね。
今度何かの機会があれば使ってみようと思いました。

追記：
今のところ、デバッグ出来そうなeclipse-theiaが一番良いかもです。
vscodeのextension互換もあるみたいなのでかなり使いやすそうな印象を受けました。
今のところ、web-ideでpythonのアプリ開発するならeclipse-thieaを選ぶと思います。