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

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

    mvn archetype:generate -DgroupId=MyCompany -DartifactId=MyWebApp -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false
    
    • MyCompanyMyWebApp を独自の値に置き換えます。
    • 値を 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>
    
    • namepath-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 アプリケーションに追加されなければなりません。

Last modified on November 15, 2017