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 アーキタイプの作成

コマンド・ライン・ウィンドウから、自分で選択した場所にナビゲートします。
次のコマンドを実行します:
```
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 の使用のチュートリアルを参照してください。
アダプター開発については、アダプターのカテゴリーを参照してください。

▲

Last modified on May 13, 2020