29
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-09-25

2019/03/30 コメント追加 やっぱりgitpodに乗り換えましたw
2019/03/13 コメント追加 Coderに乗り換えました

前置き

わたくし公私共に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のニュースを見たので、環境構築してみました。

gitpod@Chromebook C101PA
P_20190407_203655.jpg

手順

なにかマシンを用意する

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

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

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

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 すると無事動作していることが分かり、おぉぉーとなります。で、このままだと認証が無いので認証を追加、、しようとしたのですが、ここにもある通り、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を利用する、というのも結構良いとは思います(かなり便利なので契約してしまいました)。なんだかんだいってサーバーをそれなりにセキュアに保ったり、ポートの設定したりするのは面倒なので、気持ちよく契約してしまうのもおすすめです。

29
29
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
29
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?