Bluemix – Eclipseと連携して DevOps開発する方法

Bluemix は、ブラウザ だけでも クラウド上で開発・稼動させることができます。が、やはりしっかり開発する時は、ローカルPCの Eclipse でコーディングしてからクラウドに上げたいですよね。その場合も、コマンドとか使わず開発(Dev)後すぐにサーバーで運用(Ops)できる DevOps 開発ができるということで、やってみました。

➡︎最新の画面イメージでの使い方はこちらをクリック

Eclipseのセットアップ

MergeDocプロジェクト (http://mergedoc.sourceforge.jp/)
0.Eclipse_download

まずは、上のサイトから Eclipseのダウンロードと導入です。
ここでは 「Eclipse 4.5 Mars Pleiades All in One」 をクリックして導入しましょう。Java等のオープンな統合開発環境である Eclipse と周辺オープンソースコードがまとまった 「Preiades」 をダウンロードできます。

64bit PCの場合は、「64 bit / Full Edition / Java」 の [Download]ボタン をクリックして、約1GBのZIPファイルをダウンロードします。ZIPを開き、c: ドライブ直下などに解凍してください (ExplorerでpleiadesディレクトリごとZIPファイル内からDrag&Dropなど)。Macではダウンロードしてアプリケーションから「開く」だけです。

pleiades/eclipse フォルダ下の eclipse.exe を実行すると、以下の画面が表示されます。(ワークスペースを聞かれたら、「../workspace」 のままでOK)
まず、Bluemix環境を取り込むため、メニューの[ヘルプ][Eclipseマーケットプレース]をクリックしてください。

1.Eclipse_market

すると、以下のようなマーケットプレースの画面が表示されますので、上部の[検索]タブの[検索:]のところに「bluemix」と入力し、検索してください。Bluemix関連が表示されますので、「IBM Eclipse Tools for Bluemix (for XX)」の右の[インストール] ボタンをクリックします。全てにチェックしたままで[確認]ボタンをクリックし、次で [使用条件に同意] をチェックし [完了] をクリックすると、Bluemixへの接続環境完了です!

1.Eclipse_market検索

まず、Eclipseのメニューの [ウィンドウ] [パースペクティブ] [パースペクティブを開く] [その他] で [Java EE] を選んで画面構成をJava EE用にしてください。

1.Eclipse_javaEE

BluemixのDevOps環境との連携

次に、Bluemix上に構成されているDevOpsサービス(GIT)に接続し、クラウド上のプログラムをEclipseにコピーします。

まだの人は ⇒このリンク先 を見て Bluemix環境 をセットアップし、以下のGitHubを立ち上げてください。右の緑のボタン [Clone or downlod] をクリックし、表示される小さなアイコン [Copy to clipboad] でURLをコピーしてください。以下のGitHub画面のURLの後ろに 「.git」 が付いた文字列になります。(以前のBluemix画面の、GIT URL に相当)

bluemix2017-github_for-eclipse

Eclipseの [ファイル] メニューで [インポート] [Git] [Gitからプロジェクト] を選択し [次へ]。 [URIの複製] [次へ] で表示された [URI] に、上でコピーしたURLをペーストします。下の [ユーザー:] [パスワード:] は、BluemixのユーザーID/パスワード(IBM ID) を入力して、[次へ]をクリック。(既に「nodejshelloworld」という名称のプロジェクトがEclipse上に表示されている場合は、[リファクタリング]メニューで名前変更しておく)

bluemix2017-eclipse_git3

[master]がチェックされている状態で[次へ]をクリックし、ディレクトリの変更が無ければそのまま[次へ]。上の画面で [セキュア・ストアに保管] にチェックしておくと、ここでBluemixのGitのユーザーID/パスワードをマスター・パスワードに保管したとメッセージが出ます。パスワード回復のための追加の質問と回答を定義しておくと、後でパスワードの回復が可能になります。

[既存プロジェクトとしてインポート] (Import existing Eclipse Projects)を選択し [次へ] でプロジェクトを選択し [完了]。
うまくローカルPCに Bluemixのコードがコピーできれば、以下のように左のプロジェクトのタブに GitHubと同じBluemixサンプルのコードがコピーされています。例えば[public]下の[index.html]をダブルクリックすると、Web画面が表示されます。

bluemix2017-eclipse-html

Eclipseで左の [index.html] を右クリックし [次で開く] [HTMLエディター] をクリックすると、HTMLが編集可能なエディターが立ち上がります。以下のように、19行目の後ろに文字を追加し、以下のように書き換えて保管して(Ctrl+S 実行)みましょう。

  <h1>Hello World! Eclipseより!</h1>

bluemix2017-eclipse-html-edit

BluemixのDevOpsへの同期

保管後、左のプロジェクトのタブでプロジェクト名(この例では「nodejshelloworld [BMXSample master]」) を右クリックし、[チーム] [コミット]をクリックします。

1.Eclipse_team

[変更をコミット] の画面が開くので、[コミット・メッセージ] のところに変更内容のメモを記入し、[コミットおよびプッシュ] ボタンをクリックしてください (ユーザーIDとパスワードを聞かれたらGitHubに表示されているログイン名とそのパスワードを入力)。ローカルのEclipse上でこのコードをコミットした上で、クラウド上のBluemixのDevOpsサービスにプッシュされます。

1.Eclipse_teamCommit

プッシュ結果の確認が表示されたら [OK] をクリックしてください。
GitHubの画面で index.html を表示すると、次のようにEclipseの変更がUploadされ、反映されているはずです!

bluemix2017-github_updated2

また、このようにコミットした内容は、すぐにBluemixサーバーにデプロイされます。Bluemixのダッシュボードのアプリの「概要」から、[アプリの表示] をクリックしたら、以下のように新しい画面に変更されているはすです!

bluemix2017-bluemix-updated

コードのビルド(コンパイル等)やサーバーへのデプロイは、ツールチェーンの中の 「デリバリー・パイプライン (Delivery Pipeline)」 から簡単に手動で実行することもできます。以下のBuild Stage (コンパイル等)の右にある実行アイコン bluemix2017-%e5%ae%9f%e8%a1%8c をクリックすることでビルドができ、Deploy Stageの bluemix2017-%e5%ae%9f%e8%a1%8c をクリックすることでデプロイすることができます。

bluemix2017-pipeline

まさに、開発(Dev)したらすぐにサーバーで運用(Ops)される、「DevOps」が実現されていますね!

開発している時に、GitHubからEclipseにソースコードを [チーム] [プル] で持ってきて編集しようとすると、赤いが表示され競合になっている場合があります。他からもGitHubにソース更新があった場合です。その場合は、「<<<< HEAD」(最後にコミットしたローカルのソース)から始まる部分で、下のリモートのソースと比べてどちらにするか選択し修正してください。その後 [チーム] [索引に追加] してから [コミット] すると、再びリモートのGitHubにプッシュできます。

BluemixがGitHubをラッピングしていた以前のやり方に比べて、随分とシンプルになりました。以下、参考までに以前までの反映のしかたです。

 

 

[以前のBluemixの] DevOpsへの反映の確認

Bluemixの最初の画面である 「ダッシュボード」 から上でEclipseにコピーした 「アプリケーション」 (上の例は BMSample) をクリックしアプリケーションの [概要] 画面で、[コードの編集] をクリックすると、Bluemixでコード編集可能な「Bluemix DevOpsサービス」 が表示されます。

その左側に縦に複数のアイコンが並んでいますが、鉛筆アイコンの下の、分岐矢印の [Git]アイコンをクリックしてください。

2.Bluemix_icon

以下のような画面が表示されますが、これがDevOpsサービスの Git管理画面です。以下のように左側のペインの中の [着信] のところに、Eclipseで書いた変更コメントが表示されているはずです。これがEclipseから届いた変更ですが、他の人も変更しているかもしれないので自動では反映されません。

3つアイコンがあるので、真ん中のマージ矢印の [ブランチのコンテンツをアクティブ・ブランチにマージ] をクリックしてください。

2.Bluemix_DevOps

通常これで、Eclipseから送られた変更を、Bluemix上のGitのアクティブ・ブランチのコードにマージすることができるのですが、[Failed] や [Conflict] といったエラーが起きる時があります。前回、一番上のリンク先の私の手順を踏んだ方はここで以下のようなエラーが起きるはずです。前回のBluemix DevOpsサービス上での変更と、今回の Eclipseからの変更が重複してしまっていてDevOpsサービスが自分で判断できないためです。

2.Bluemix_failed

上の画面の右下の、public/index.html をクリックしてみると、現在のアクティブなストリームのソースコードが表示されます。(以前DevOpsで変更したもの)
Eclipseの方を有効にするために、左下の [着信] のところにある、Eclipseからのコミット・コメントのところを選択してください。以下の右のようにそのソースコードが表示されます。

2.Bluemix_commit

そこで、上の画面の矢印グルグルのアイコン [アクティブ・ブランチを、この参照の状態にリセットします。ステージ済みおよび未ステージの全ての変更を破棄します] をクリックします。書いてある通り、以前のBluemixで変更した、それまでアクティブなブランチを破棄し、この左下に選択された着信の内容でアクティブ・ブランチを上書きします。(さらに反映されない場合は、[プッシュ] [全て強制プッシュ]してください)

1.BMSample

そこで上のダッシュボードに戻り、アプリ名(以下ではBMSample)の下にある [経路:] 右のURLをクリックすると、以下の画面が表示され、Eclipseでの変更が反映されていることが分かります!

2.Bluemix_eclipse_result

Bluemix上のサーバーへのデプロイ

変更してBluemix上にコミットしたコードは、DevOpsサービスの以下の 「Build & Deploy」 機能で即座にビルドされ、デプロイ(サーバー上で稼動)されます。

2.Bluemix_deploy

Eclipseからプッシュ後、この [BUILD & DEPLOY] 画面を見ると、次々と [コミット] [Build成功] [Deploy成功] とステータスが変わり、最後 [ランタイム] が になると稼動と、状況が手に取るように分かります。

まさにこれぞ DevOps !

 

⇒次は、Node.js の Eclipseへの導入と設定

 

 

nikami.org – デジタル時代の自分デジタル化の軌跡