作成したアプリのダウンロード～Google Map×世界遺産アプリ
左メニューの「DOWNLOAD」ボタンをクリックして、作成したアプリをダウンロードします。
「FUJITSU Playground Terms of Service」が表示されたら、「I agree with the Terms of Services」チェックボックスをオンにして、「DOWNLOAD」をクリックします。このとき、複数回クリックすると、ダウンロードがうまくいかない場合があるため、注意してください。
ダウンロードしたMap.zipの内容を、任意のフォルダ（ここでは、C:\K5\TEST\Map）に展開します。
展開先には、「frontend」フォルダと「backend」のフォルダが作成されます。「frontend」フォルダにReactとFluxによるSPAに必要なファイル、「backend」フォルダにNode.js製BFFに必要なファイルが格納されていることを確認してください。
アプリのカスタマイズ～Google Map×世界遺産アプリ
次に、ダウンロードしたアプリを修正していきましょう。
フロントエンドでは、あらかじめ取得しておいたGoogle Map APIキーを、APIキーやデータベースへの接続情報を定義する「config.js」ファイルに設定します。
バックエンドでは、Node.jsで開発する際に外部のパッケージとの依存関係を定義している「package.js」に記述されているNode.jsのバージョンを自身の端末にインストールしたNode.jsのバージョンに修正します。
フロントエンドの修正
Google Map APIを利用するために必要なAPIキーを「config.js」ファイルに設定します。
C:\K5\TEST\Map\frontend\appフォルダに移動し、config.jsをテキストエディタで開きます。次のコードの[YOUR_API_KEY]の部分に、「■Google Map APIキーの取得」で取得したAPIキーを設定してください。
key: process.env.GOOGLE_API_KEY || '[YOUR_API_KEY]',
↓
key: process.env.GOOGLE_API_KEY || '＜取得したAPIキー＞',
ファイルを保存してテキストエディタを終了します。
ここでは手順を簡易化するために直接キーを記述していますが、The Twelve-Factor Appの3番の設定（Config）に従って、process.env.GOOGLE_API_KEYを用い、デプロイした環境の環境変数「GOOGLE_API_KEY」にGoogle MapのAPIキーを入力することをお勧めします。余裕のある方はチャレンジしてみてください。
バックエンドの修正
自身の端末にインストールしたNode.jsのバージョンを「package.json」に設定します（Node.jsのインストールについては後述します）。
C:\K5\TEST\Map\backendフォルダに移動し、package.jsonをテキストエディタで開きます。次のコードは、Node.jsのバージョンの指定です。これを自身の端末で使用しているNode.jsのバージョンに修正してください（ここでは、バージョン6.11.2を使用していると想定しています）。
"engines": {
"node": "6.9.4"
},
↓
"engines": {
"node": "6.11.2"
},
ファイルを保存してテキストエディタを終了します。これでアプリは完成です。
完成したアプリは、Cloud FoundryなどのPaaS基盤にデプロイすることで、すぐさま確認することができます。富士通が提供するCloud FoundryベースのPaaS基盤K5 「CF」を利用したデプロイ方法は記事の後半で記述します。
