Web 開発環境のセットアップ
improve this page | report issue概説
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 にリダイレクトします。
ジャンプ先
前提条件
-
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 アーキタイプの作成
- コマンド・ライン・ウィンドウから、自分で選択した場所にナビゲートします。
-
次のコマンドを実行します:
mvn archetype:generate -DgroupId=MyCompany -DartifactId=MyWebApp -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false
- MyCompany と MyWebApp を独自の値に置き換えます。
- 値を 1 つずつ入力する場合は、
-DinteractiveMode=false
フラグを削除します。
Web アプリケーションのリソースでの Maven webapp のビルド
-
生成された [MyWebApp] →「src」→「Main」→「webapp」フォルダーに Web アプリケーションのリソース (HTML、CSS、JavaScript、イメージ・ファイルなど) を入れます。
これ以降、webapp フォルダーを Web アプリケーションの開発場所とします。
-
コマンド
mvn clean install
を実行し、アプリケーションの Web リソースが入った .war ファイルを生成します。
生成された .war ファイルは、[MyWebApp] →「target」フォルダーで入手できます。重要: Web リソースを更新するたびに
mvn clean install
を実行する必要があります。
アプリケーション・サーバーへの Maven webapp の追加
-
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 に要求をトンネリングできます。
-
コマンド・ライン・ウィンドウから、Web アプリケーションのフォルダーにナビゲートし、以下の一連のコマンドを実行します。
npm init npm install --save express npm install --save request
- node_modules フォルダーに新規ファイル (例えば、proxy.js など) を作成します。
-
以下のコードをファイルに追加します。
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 ランタイムのコンテキスト・ルートで更新します。
- プロキシーを開始するには、コマンド
node proxy.js
を実行します。 - 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 の使用のチュートリアルを参照してください。
- アダプター開発については、アダプターのカテゴリーを参照してください。