Web 開発環境のセットアップ

概説

Web アプリケーションの開発およびテストは、任意の Web ブラウザーでローカル HTML ファイルをプレビューするのと同じくらいに簡単です。
開発者は、任意の IDE、およびニーズに合ったフレームワークを使用できます。

ただし、Web アプリケーションの開発で壁となる可能性があることが 1 つあります。 Web アプリケーションで、同一オリジン・ポリシー違反によるエラーが発生することがあります。 同一オリジン・ポリシーは、Web ブラウザーに課された制限です。 例えば、あるアプリケーションがドメイン example.com でホストされている場合、同じアプリケーションが別のサーバー、つまり MobileFirst Server から使用可能なコンテンツにもアクセスすることは許されません。

Mobile Foundation Web SDK を使用する Web アプリケーションは、サポートされるトポロジーで処理される必要があります。例えば、リバース・プロキシーを使用して、同じ単一オリジンを維持しながら適切なサーバーに要求を内部的にリダイレクトして行います。

ポリシーの要件は、以下のいずれかの方法で満たすことができます。

• MobileFirst Server もホストする同一 WebSphere フル/Liberty プロファイル・アプリケーション・サーバーから Web アプリケーション・リソースを処理します。
• Node.js をプロキシーとして使用し、アプリケーション要求を MobileFirst Server にリダイレクトします。

ジャンプ先

• 前提条件
• WebSphere Liberty プロファイルを使用した Web アプリケーション・リソースの処理
• Node.js の使用
• 次のステップ

前提条件

• Web アプリケーションは、以下のブラウザーのバージョンでサポートされています。 バージョン番号は、それぞれのブラウザーで完全にサポートされる最初のバージョンを示します。

  ブラウザー	Chrome	Safari*	Internet Explorer	Firefox	Android ブラウザー
  サポートされるバージョン	43+	8+	10+	38+	Android 4.3+

  ^* Safari では、プライベート・ブラウズ・モードは SPA (Single-page Application) に対してのみサポートされます。 他のアプリケーションでは予期しない動作を生じる可能性があります。

• 以下のセットアップ手順では、Apache Maven または Node.js が開発者のワークステーションにインストールされていることが必要です。 詳しい手順については、インストール・ガイドを参照してください。

WebSphere Liberty プロファイルを使用した Web アプリケーション・リソースの処理

Web アプリケーションのリソースを処理するには、これらが Maven webapp (.war ファイル) に保管されている必要があります。

Maven webapp アーキタイプの作成

1. コマンド・ライン・ウィンドウから、自分で選択した場所にナビゲートします。

2. 次のコマンドを実行します:

   mvn archetype:generate -DgroupId=MyCompany -DartifactId=MyWebApp -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false
   

   • MyCompany と MyWebApp を独自の値に置き換えます。
   • 値を 1 つずつ入力する場合は、-DinteractiveMode=false フラグを削除します。

Web アプリケーションのリソースでの Maven webapp のビルド

1. 生成された [MyWebApp] →「src」→「Main」→「webapp」フォルダーに Web アプリケーションのリソース (HTML、CSS、JavaScript、イメージ・ファイルなど) を入れます。

   これ以降、webapp フォルダーを Web アプリケーションの開発場所とします。

2. コマンド mvn clean install を実行し、アプリケーションの Web リソースが入った .war ファイルを生成します。
   生成された .war ファイルは、[MyWebApp] →「target」フォルダーで入手できます。

   重要: Web リソースを更新するたびに mvn clean install を実行する必要があります。

アプリケーション・サーバーへの Maven webapp の追加

1. WebSphere Application Server の server.xml ファイルを編集します。
   MobileFirst Developer Kit を使用している場合、ファイルは [MobileFirst Developer Kit] →「mfp-server」→「user」→「servers」→「mfp」フォルダーにあります。 以下の項目を追加します。

   <application name="MyWebApp" location="path-to/MyWebApp.war" type="war"></application>
   

   • name と path-to/MyWebApp.war を独自の値に置き換えます。
   • アプリケーション・サーバーは、server.xml ファイルへの変更を保存後、自動的に再始動されます。

Web アプリケーションのテスト

Web アプリケーションをテストする準備ができたら、次の URL にアクセスします。localhost:9080/MyWebApp - MyWebApp を独自の値に置き換えます。

Node.js の使用

Node.js をリバース・プロキシーとして使用して、Web アプリケーションから MobileFirst Server に要求をトンネリングできます。

1. コマンド・ライン・ウィンドウから、Web アプリケーションのフォルダーにナビゲートし、以下の一連のコマンドを実行します。

   npm init
   npm install --save express
   npm install --save request
   

2. node_modules フォルダーに新規ファイル (例えば、proxy.js など) を作成します。

3. 以下のコードをファイルに追加します。

   var express = require('express');
   var http = require('http');
   var request = require('request');
   
   var app = express();
   var server = http.createServer(app);
   var mfpServer = "http://localhost:9080";
   var port = 9081;
   
   server.listen(port);
   app.use('/myapp', express.static(__dirname + '/'));
   console.log('::: server.js ::: Listening on port ' + port);
   
   // Web server - serves the web application
   app.get('/home', function(req, res) {
        // Website you wish to allow to connect
        res.sendFile(__dirname + '/index.html');
   });
   
   // Reverse proxy, pipes the requests to/from MobileFirst Server
   app.use('/mfp/*', function(req, res) {
        var url = mfpServer + req.originalUrl;
        console.log('::: server.js ::: Passing request to URL: ' + url);
        req.pipe(request[req.method.toLowerCase()](url)).pipe(res);
   });
   

   • port 値を希望する値に置き換えます。
   • /myapp を Web アプリケーションの希望するパス名に置き換えます。
   • /index.html をメイン HTML ファイルの名前に置き換えます。
   • 必要な場合、/mfp/* を Mobile Foundation ランタイムのコンテキスト・ルートで更新します。
4. プロキシーを開始するには、コマンド node proxy.js を実行します。
5. Web アプリケーションをテストする準備ができたら、server-hostname:port/app-name の URL にアクセスします。例えば、http://localhost:9081/myapp などです。
   • server-hostname を独自の値に置き換えます。
   • port を独自の値に置き換えます。
   • app-name を独自の値に置き換えます。

次のステップ

Web アプリケーションで Mobile Foundation 開発を続けるには、Mobile Foundation Web SDK が Web アプリケーションに追加されなければなりません。

• Mobile Foundation SDK を Web アプリケーションに追加する方法を確認します。
• アプリケーション開発については、Mobile Foundation SDK の使用のチュートリアルを参照してください。
• アダプター開発については、アダプターのカテゴリーを参照してください。