※) 2年近く経過してかなり状況が変わったので、記事の終わりに追記しました。
2年近く VPS を維持してきました (Ubuntu 16.04 LTS 32bit 2GB RAM : 980yen/month)。
- Node.js で CLI ツール作る
- Web API や Web UI のお試しコードを書く
- 未知の言語のコンパイラや REPL を使ってみる
などの用途に。
昨年末 Codenvy を触ってみて、もう VPS 常時起動なんかやめて必要時に Cloud IDE 使えばいいんじゃないかと思い始めました。
未知の言語用環境構築は依存ライブラリのバージョンとかでハマることも多く自由度の高い VPS の方が重宝します*1が、Node.js や Web 開発は標準的な構成で使うためクラウドで提供されている環境で十分な気がします。
有象無象の Cloud IDE から今回は、新興の Codenvy、老舗の Codeanywhere、昨年登場した AWS Cloud9 の3つを無料枠の範囲で試してみました。
Node.js の CLI ツールや Web API の簡単なクライアント画面のコードを Bitbucket のリポジトリに置いて、
- 環境構築
- ソースコードの取得
- ソースコードの修正
- 実行確認
- ソースコードのコミット
という小さな開発プロセスを回してみました。
結果表を先に示します。以下の比較はあくまで無料の範囲内 (AWS 以外) ということにご注意ください。
| Codenvy | Codeanywhere | AWS Cloud9 | |
|---|---|---|---|
| ターミナル | ○ | ○ | ○ |
| VCS 連携 | ○ | ○ | ○ |
| コンテナ | Docker | OpenVZ | EC2 |
| コンテナ : Git リポジトリ(※1) | 1 : |
1 : |
1 : n |
| PaaS 連携 | Heroku | DigitalOcean | AWS |
| プロジェクトテンプレート(※2) | ○ | |
○ |
| ライブラリ・ツールの追加 | ○ | ○ | ○ |
| パッケージ管理システム | APT | APT | Yum |
| 独立タブによるプレビュー | ○ | ○ | ○ |
| インスタンスの休止 | 10分 | ? | 任意 |
| 作業フォルダの維持 | × | ○ | ○ |
| iOS / Android アプリ | × | ○ | × |
| iPad での作業 | △ | ○ | △ |
(※1 追記) 執筆時点では、1:1 と思っていましたが、terminal から リポジトリを追加できますので訂正します。
(※2 追記) 執筆時点では、Codeanywhere にテンプレートがないと勘違いしていました。訂正します。
なお コードエディタ の詳細な機能比較はやっておらず、ファーストインプレッションのみです。
Codenvy
Java / C++ / C# / Python / PHP / Node.js などのプラットフォームを選択してプロジェクトを構築できます。Node.js のテンプレートを選んでスタートしました。
ターミナル
Docker コンテナに ssh してターミナルが利用できます。コンソールで日本語も表示 OK です。
BitBucket 連携
git clone は Bitbucket の OAuth 認証で行けました。コンテナには docker が使われており、git のリポジトリ単位でコンテナがデプロイされます。
/projects 配下に一つだけ git リポジトリが取得されている状態になります。後から git clone で別のリポジトリを clone して開発することも可能です。
git config で user.name や user.mail を設定していてもなぜか git commit 時にエラーになってしまいます。
git config --global -l してもちゃんと設定されてるのに？？ と思って、Profile -> Preferences を見ると Git -> Committer の設定画面で Name: と Email: を設定する必要がありました。ターミナルで .gitconfig 設定してもダメみたいです。
ツール・ライブラリのインストール
Node.js / npm はデフォルトで導入されています。 sudo apt-get install xxx で パッケージをインストールできました(パスワード不要)。Debian 系のようです。
コードエディタ
Eclipse Che でモダンで高機能な感じです。
実行確認
タスクランナーには Gulp を使っていますが、Node.js 環境だからか普通に実行できました。
VPS では gulp-webserver で HTML や JavaScript のアセットの更新を Watch して LiveReload してました。localhost ではなく 0.0.0.0 などのアドレスで起動するという方法でローカルのブラウザから確認していました。Docker のコンテナは 10.xx.xx.xx のようなローカル IP アドレスしか見えないため、この方法は使えません。
Codenvy の IDE では、HTML ファイルをプレビューする機能があるのでそれを使うことは可能です。ブラウザの独立したタブとして起動するので、DevTools で JavaScript のデバッグをすることもできます。LiveReload のような手放し感がないので今ひとつですが。
インスタンスの休止
無料枠だと10分でタイムアウトするので、Web で調べ物をしているうちにストップしていたりします。インストールしたツール類は残っていますが、node_modules とか作業ディレクトリは毎回クリーンされてしまうので、毎回 npm install が必要です。コードベースが大きいとツラいですね。もしかしたらオプションがあるのかもしれませんが。
iPad での作業
iPad の Chrome / Safari でも Codenvy はそこそこ動きますが、ターミナルでコマンドヒストリが呼び出せないのと、ソフトウェアキーボードでは Ctrl キーが打てないのがツラい感じでした。物理キーボードでも Ctrl キーやカーソルキーを認識しません。コマンドをがしがし打てないですが、なんとかなるレベルではあります。
その他
Heroku 連携機能があって、ブラウザだけで開発とデプロイが可能です。
Codeanywhere
老舗と言っていい Cloud IDE で、iPad / Android のアプリまで提供されているのがすごいです。Codenvy のようなターゲットプラットフォーム毎のテンプレートのようなものはありません。
ちゃんとありました。
ターミナル
普通に使えますが、日本語は文字化けしました。あと、プロジェクトのアイコンを右クリックして出現するスペシャルなコンテキストメニューからしか起動できないため、iPad では起動できません(これが一番痛い)
BitBucket 連携
Codenvy と同様、コンテナに一つの Git リポジトリが展開されます。Git の環境は git コマンドで通常通り設定可能です。複数のリポジトリを clone して開発することも可能です。
ツール・ライブラリのインストール
sudo apt-get で パスワードなしでインストールできました。
コードエディタ
Eclipse Che より機能は劣る感じがしますが、動作が軽く Horizontal / Vertical に画面を分割できるし、中々使いやすい感じです。VS Code や Atom のように JSON を編集して設定します。
実行確認
gulp タスクの実行、ページのプレビューなどは Codenvy と同様に可能です。
インスタンスの休止
一定時間でリサイクルされますが、node_modules や作業フォルダはそのまま残っていますので、毎回、npm install とかする必要はありません。コンテナのロゴなどは特に表示されませんが、公式サイトによれば、OpenVZ が使われているようです。
iPad での作業
iPad の Chrome / Safari でもほぼデスクトップと同様に使えますが、iOS では、上記のようにターミナルの起動ができません。プレビューもスペシャルなコンテキストメニューで行うのですが、iPad ではファイル単位で呼び出せません。
専用アプリを使うとターミナルやプレビューは可能ですが、フルスクリーン画面しかなく IDE のような使い勝手ではありません。Split View にも未対応で、iPad の機能を活かしきれていない感じです。アプリで物理キーボード使っても Ctrl キーとか効きません。この辺はもう少し頑張ってほしいところです。ていうか、アプリ頑張るのではなく Web IDE でスペシャルなコンテキストメニューじゃなく通常のメニューから使えるようにしてくれるだけでいいのですが・・・。
現状、アプリを使わざるを得ず、IDE のメリットが享受できない感じがあります。
その他
DigitalOcean と連携できる模様です。
IDE だけなら Codenvy の方が使いやすい感じですが、作業フォルダが残るところとか、モバイルアプリがあったりと普段使いなら Codeanywhere の方が現実的な気がします。
AWS Cloud9
AWS に買収された Cloud IDE。サーバーレスアーキテクチャな Lambda の開発プラットフォームとして昨年末の AWS re:invent で発表されました。オリジナルの Cloud9 もありますが、Lambda にも興味ありということで、この際 AWS アカウントを作成し IMA コンソールでユーザを追加。
Codenvy 同様プラットフォームごとのテンプレートが用意されています。
ターミナル
普通に使えます。
BitBucket 連携
Codenvy / Codeanywhere は Git リポジトリ単位のプロジェクトでしたが、Cloud9 のコンテナは EC2 そのものです。ですので、一つのコンテナに複数のプロジェクトを構築できます。
ツール・ライブラリのインストール
node と npm は最初から入ってました。
sudo apt-get でパッケージをインストールしようとしたらエラーが出て yum 使えと popup が出ました。Redhat 系のようですね。 sudo yum install xx で パスワードなしで導入できました。
コードエディタ
Ace Editor が使われており、モダンテキストエディタそのものです。Sublime Mode などのプリセットが用意されています。
実行確認
gulp タスクは当然実行可能。プレビューは IDE 内のタブとして起動します。そのままでは DevTools でデバッグできませんが、アドレスバーの横に Pop Out Into New Window というツールチップの出るボタンがあり、クリックすると新しいタブとして開くことができます。
インスタンスの休止
課金怖いので30分で休止するようにしています。作業フォルダや node_modules がリサイクルされることはありません。
iPad での作業
ターミナルでの Ctrl キーはやはり入力できませんでした。コマンドヒストリは使えます。なんとか作業はできるレベルだと思います。
その他
EC2 の VPS を WebUI で使える感じです。Lambda の開発も試してみたいところです。 ちなみに、Cloud9 自体は GWT*2 で作られているようです。
まとめ
ソースコードが、GitHub や BitBucket にあればすぐに取得して開発・実行環境を構築できる Cloud IDE。それぞれ、テンプレートからプロジェクトを生成できたり、PaaS と連携できたり、iOS / Android 端末でも使えたり・・。当然ローカルの開発環境の方が生産性は格段にいいですが環境構築が簡単で iPad とか Chromebook さえあればどこでも開発できるユビキタスな感じは Cloud IDE の魅力ですね。 VPS は解約しました。iPad からも Prompt 2 とかを削除。 普段使いで PC では Codenvy、iPad では Codeanywhere 、AWS の機能を使いたい時は Cloud9 のように使い分けようかと思います。
2019.10.30 追記)
投稿してから2年近くたちますが、Codenvy は RedHat に買収され、OpenShift ベースに移行、Codeanywhere は無料枠無くなりました。AWS Cloud 9 は現役です。
VS Code ベースの Web IDE Theia がホットですね。
