読者です 読者をやめる 読者になる 読者になる

TechBox

スタートアップで働くRails&機械学習エンジニアのブログ。時々GT-Rと旅行。

ブラウザで動くIDE Eclipse Che のインストール

f:id:daisuke-jp:20160909163444j:plain

Eclipseが次世代のIDEとしてEclipse Cheをリリースしました。 AceやCloud9のように完全にブラウザで完結します。 ブラウザでコーディングをして、そのままテスト稼働が可能なツールです。 実際の所、たまに変な動作をしたりするので…って所はありますが、 ペアプログラミングを行ったりする時には重宝しそうな気がします。

前置き

なぜこれをしたくなったかなど、私見です。 読み飛ばして頂いても全く問題ないです。

Google cloud platform や AWSが当たり前になってきて、サーバーはクラウド化、 GitHubなんかも当たり前に使われてきて、ソース管理もクラウド化、 スゲーどこでもコーディング出来んじゃんって思ってたけど、よくよく考えれば PCは依存するよねって常々思ってて。 確かに仮想デスクトップとか使えばって意見も凄く分かるけど、 やっぱりどうせならブラウザで動くと格好良いんだな。

って事で探してて、最近気になったのが「Eclipse Che

JavaでもPHPでもRailsでもGoでもスグに開発環境を使えるって優れもの。 ブラウザで動作するIDEで、凄く未来を感じる次世代のツール。 これを今回は立ち上げて行きます。

Linuxに1から構築したりするのが結構大変だったので、 動作させるまでがメチャクチャ簡単な手法で立ち上げたいと思います。

動作環境

  • VMware workstation
  • VMware ESXi
  • VirtualBox
  • AWS
  • GCP

基本的にどれでも大丈夫ですが、今回はESXiを使ってます。

導入

仮想マシン導入

まずは仮想環境にEclipse Cheの仮想マシンを導入していきます。 仮想基盤は導入済みが前提です。 まだな方は、「Virtual Box インストール」で検索して下さい。

  1. bitnamiからイメージのダウンロード
    まずはbitnamiのEclipse Cheページにアクセスします。 ※始めて使う人はユーザー登録を求められるので、新規で作成もしくはSSOでログインして下さい。

  2. OVAダウンロード
    画面したの方のVirtual Machinesから、ovaをダウンロードをします。 f:id:daisuke-jp:20160909151443p:plain

  3. ESXi(仮想環境)にデプロイ
    ESXiにvSphere Clientでログインし、「ファイル」⇒「OVFテンプレートのデプロイ」をして、終わるまで待ちます。
    f:id:daisuke-jp:20160909152017p:plain
    仮想マシンの設定等は割愛しますが、各環境にあった設定を選択して下さい。 後は起動したら導入は完了です。 f:id:daisuke-jp:20160909154306p:plain

設定

導入して、全てデフォルトでOKって事であれば、この章は必要ありません。 DHCP環境なのであれば、自動でIPアドレスも取得出来ているはずです。

  1. Ubuntuのパスワード変更
    コンソールからログインします。 初期ユーザーとパスワードは、
    ユーザー :bitnami
    パスワード:bitnami
    です。 初期ログイン後、既存パスワードを聞かれるので、bitnamiと入力し、 その後に新しいパスワードを入力して下さい。 仮に失敗した場合は、以下手順にて変更します。
passwd
(current)UNIX password:bitnami
Enter new UNIX password:<new password>
Retype new UNIX password:<new password>
  1. IPアドレスの設定
    IPアドレスを変更したい場合は本手順を実行します。必要なければ次に進みます。
    基本的にUbuntuと一緒なので、
    sudo vi /etc/network/interfaces
    を実行します。
    以下の通り編集します。 ※IPアドレス等は各環境に合わせて変更して下さい。
auto lo
iface lo inet loopback
# The primary network interface
auto eth0
iface eth0 inet static # DHCPでDHCP取得。staticで手動設定
address 192.168.1.10 # IP アドレス
netmask 255.255.255.0 # ネットマスク
gateway 192.168.1.254 # デフォルトゲートウェイ

DNSも変更するのであれば、
sudo vi /etc/resolv.conf
を実行します。

nameserver 192.168.1.254

※IPアドレス等は各環境に合わせて変更して下さい。

最後に
sudo service networking restart
をして、設定を適用して下さい。  

  1. Eclipse Cheのパスワード変更
    仮想マシンのパスワードとは別で、Eclipse Che自体のパスワードの変更もします。 ちなみに初期は
    ユーザー :user
    パスワード:bitnami
    なので、userのパスワードを変更していきます。 コンソールで以下を実行します。
    sudo /opt/bitnami/apps/eclipseche/bnconfig --userpassword <password>

操作方法

  1. トップページを開く
    DHCPで取得しているIPか、先の手順で設定したIPアドレスをブラウザで開きます。
    f:id:daisuke-jp:20160909160429p:plain

2.ダッシュボードにアクセス
「Access data for Eclipse Che」⇒「Login」を押すと、ログインポップアップが表示されるので、 先に変更した内容を入力し、ダッシュボードを表示します。 f:id:daisuke-jp:20160909160825p:plain

  1. ワークスペースを作成する。
    「Dashbord」⇒「Create Workspace」を実行し、とりあえずテンプレートからプロジェクトを作成します。
    f:id:daisuke-jp:20160909161241p:plain
  2. Select Source…元となるワークスペースを選択します。GitHubからインポートなんかもできますが、
    とりあえず新規で作成します。
  3. Select Stack…所謂ひな形です。構築したい言語を選択して下さい。今回はRailsで。
  4. Name…この環境の名前です。
  5. RAM…使用させるメモリのMAX量を指定します。
  6. Template…プロジェクトのテンプレートを用意してくれます。とりあえずweb-rails-simpleを選択

うまく作成されると、念願のIDE画面が表示されます。 f:id:daisuke-jp:20160909161957p:plain 画面上半分がコーディングする画面で、下半分がTerminalです。 bundle installとかの指示はこの下の画面で実行可能です。

ちなみに、デフォルトではプロジェクトのディレクトリにいないので、
cd <projectname>
で移動してからコマンドを実行して下さい。

  1. プログラムの実行方法 ターミナルからrails sとかやっても、実行結果どうやってみんの?ってなると思います。 これはコマンドではなく、メニューから行う形になってます。 コーディング部分の上にあるこのメニュー
    f:id:daisuke-jp:20160909162509p:plain
    から「プロジェクト名:run」を選んで、右の再生マークを押すと、rails s -b 0.0.0.0と同じ動きをしてくれます。

すると、下半分の画面にログが出るのですが、最初の方の行にpreview : http://IPアドレス:ポート番号が表示されているかと思います。
これを開くと、実行結果が表示されます。

最後に

まだまだな部分もありますが、なかなか将来の可能性を感じる動きをしてくれます。 ブラウザで開発を行うようになれば、ソースコードをPCに入れて持ち歩かれる事もなくなりますし、 開発環境の統一や、アウトソーシングした時の管理も行いやすくなると思います。

なにより、ブラウザで全て完結するっていうのが気持ち良いですね。