ブラウザで動く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に１から構築したりするのが結構大変だったので、 動作させるまでがメチャクチャ簡単な手法で立ち上げたいと思います。

動作環境

  • 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に入れて持ち歩かれる事もなくなりますし、 開発環境の統一や、アウトソーシングした時の管理も行いやすくなると思います。

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

このブログの人気の投稿

AnacondaとPythonのインストール（python2とpython3の共存）とDjango

イメージ
個人的にdjangoとnumpyなどPythonを使う機会があり、 折角なのでローカル開発環境としてのAnacondaのインストール方法をまとめました。 僕の環境がGCPのSDKが入っている関係で、Python2とPython3の共存が必要ので、その辺りもあります。 前提 Windows（Macと手順のベースは変わらないですが、コマンドに若干再有り） pythonコマンドだとPython2が動作し、python3だとPython3が動作します 手順 Anacondaのインストーラーをダウンロードしインストール ※ Python2と3を共存させる場合、インストーラーでPathは通さない。 Pathを通す インストールディレクトリ\Anaconda3 インストールディレクトリ\Anaconda3\Scripts インストールディレクトリ\Anaconda3\Library\bin Anaconda3内のシンボリックリンクを作成する それぞれAnaconda3内にあるexeです。 元のexeがある場所にそれぞれに3を付けたシンボリックリンクを作成します。 ショートカットだと上手く動作しなかったので、シンボリックリンクとしました。 python.exe -> python3.exe anaconda.exe -> anaconda3.exe anaconda-script.py -> anaconda3-script.py conda.exe -> conda3.exe conda-script.py -> conda3-script.py easy_install.exe -> easy_install3.exe easy_install-script.py -> easy_install3-script.py pip.exe -> pip3.exe pip-script.py ->pip3-script.py spyder.exe -> spyder3.exe spyder-script.py -> spyder3-script.py 動作確認 コマンドプロンプトでpythonとpython3で
続きを読む

PyCharmでAnaconda(Python)とDjangoの開発環境を構築する 　その２

イメージ
PyCharmのGUIのみでAnacondaの仮想環境と、Djangoの開発環境を作っていきます。 前提として、 Anacondaはインストール済み 例題のプロジェクト名は skyline 例題のアプリ名は gtr 例題の仮想環境名は nissan と想定します。 Anacondaのインストールはこちらをご覧下さい。  www.techbox.jp PyCharmを起動して、[Create New Project]を選択します。 左のツリーから[Django]を選択し、[Location]にプロジェクトの保存先を指定します。 末尾が ～\untitled になっているので、作成するプロジェクトの名前に変更します。 [interpreter]の右の歯車をクリックし[Create conda env]を選択します。 ここから新規でAnacondaの仮想環境の作成が行えます。 [Name]に仮想環境名を入力します。ここでは nissan そうすると、[Location]にはAnacondaの仮想環境保存先が指定され、末尾が[Name]で指定したディレクトリになるハズです。 最後に使用するPythonのバージョンを指定します。 OKを押すとAnacondaの仮想環境の作成が始まるので、しばらく待ちます。 終わったらロケーションに設定したディレクトリに nissan フォルダが作成されています。 New Project画面に戻るので、[More Settings]をクリックし、設定画面を表示します。 [Template language]に Django [Application name]に gtr を設定し、[Enable Django admin]はお好みでチェックを入れます。   ここで注意点ですが、プロジェクト名とアプリケーション名は同一の物は設定できません。 これらの名称の関係性としては、作成後のフォルダ構成を見れば分かりますが、 以下の様な形で作成されます。 skyline/ ├ gtr/ │ ├ migrations/ │ ├ _init_.py │ ├ admin.py │ ├ apps.py │ ├ models.py │ ├ tests.py
続きを読む

PyCharmでAnaconda(Python)とDjangoの開発環境を構築する 　その１

イメージ
今回はPyCharmでPythonとDJangoの開発環境を作っていきたいと思います。 Pycharmはデフォルト設定とプロジェクト設定、２パターンの設定方法があります。 今回は、 既に作成した仮想環境を、Pycharmデフォルトの設定にする 方法を行っていきます。 プロジェクト単位での設定と、完全にGUIで構築する手順はその２で記載します。 Anaconda、Djangoインストールと仮想環境構築 以下のリンクに沿って実行して下さい。 www.techbox.jp Pycharmを起動し、スタート画面で右下の [configure]>[settings] をクリック 左のツリーから[Project Interpreter]を選択し、 右側上部のコンボボックスに、手順1で作成した仮想環境のpython.exeがリストアップされる事を確認し、選択します。 選択すると仮想環境にインストールされているパッケージの一覧が表示されます。 ここでDjangoがインストールされている事がわかります。 [Apply]を押し、設定を保存します。 以上でデフォルトの設定が完了しました。 後はCreate new projectやGitからリポジトリを取ってきて、 今回の設定をベースに立ち上げる事が可能です。 今回はAnacondaの仮想環境を手動で作成し、Pycharmのデフォルト設定のみを設定する方法でした。 その２では、仮想環境の構築、Djangoのインストール、新しいプロジェクトの立ち上げまでをPycharmのGUIのみで行う手順を書こうと思います。 実際の所、次の手順で立ち上げる事の方が多いような気がします。
続きを読む