作成したアプリのダウンロード
カスタマイズが完了したら、アプリをダウンロードしましょう。左メニューの「DOWNLOAD」ボタンをクリックして、LINEチャットボットアプリをダウンロードできます。
「FUJITSU Playground Terms of Service」が表示されたら、「I agree with the Terms of Services」チェックボックスをオンにして、「DOWNLOAD」をクリックしてください。
ダウンロードしたLINEChatbot.zipの内容を、任意のフォルダ（ここでは、C:\K5\TEST\LINEChatbot）に展開します。
展開先には、「frontend」フォルダと「backend」のフォルダが作成されます。「frontend」フォルダにSPAに必要なファイル、「backend」フォルダにBFFに必要なファイルが格納されていることを確認してください。
バックエンドのカスタマイズ
ダウンロードしたアプリのバックエンドを修正します。ここでは、自身の端末にインストールしたNode.jsのバージョンの修正、MongoDB接続情報の設定、LINE Messaging APIのアクセストークンとチャネルシークレットの設定、Swaggerの設定の変更を行います。
なお、フロントエンドには修正はありません。
①Node.jsのバージョンの修正（package.json）
自身の端末にインストールしたNode.jsのバージョンを「package.json」に設定します。
C:\K5\TEST\LINEChatbot\backendフォルダに移動し、package.jsonをテキストエディタで開きます。次のコードは、Node.jsのバージョンの指定です。これを自身の端末で使用しているNode.jsのバージョンに修正してください（ここでは、バージョン6.11.2を使用していると想定しています）。
"engines": {
"node": "6.9.4"
},
↓
"engines": {
"node": "6.11.2"
},
ファイルを保存してテキストエディタを終了します。
②MongoDB接続情報の設定（config.js）
MongoDBに接続するために必要なURLを「config.js」ファイルに設定します。config.jsをテキストエディタで開きます。次のコードを以下に示すように修正してください。次のコードのurlの値にMongoDB接続URL、datasourceの各項目にユーザー名、パスワード等を設定します。
module.exports = {
serverPort: process.env.PORT || 3000,
mongodb: { url: "" },
line: { accessToken: "", secret: "" }
datasource: { user: "", password: "", host: "", port: "", database: "" }
};
↓
module.exports = {
serverPort: process.env.PORT || 3000,
mongodb: { url: "＜MongoDB接続URL＞" },
line: { accessToken: "", secret: "" },
datasource: { user: "＜ユーザー名＞", password: "＜パスワード＞", host: "＜ホスト名＞", port: "＜ポート＞", database: "＜データベース名＞" }
};
ファイルを保存してテキストエディタを終了します。
③アクセストークンとチャネルシークレットの設定（config.js）
LINE Messaging APIを利用するために、チャネルシークレットとアクセストークンを「config.js」ファイルに設定します。config.jsをテキストエディタで開いてください。次のコードにあるaccessTokenの値にアクセストークン、secretの値にチャネルシークレットを設定します。
module.exports = {
serverPort: process.env.PORT || 3000,
mongodb: { url: "" }, line: { accessToken: "", secret: "" },
datasource: { user: "", password: "", host: "", port: "", database: "" }
};
↓
module.exports = {
serverPort: process.env.PORT || 3000,
mongodb: { url: "" },
line: { accessToken: "＜アクセストークン＞", secret: "＜チャネルシークレット＞" },
datasource: { user: "", password: "", host: "", port: "", database: "" }
};
ファイルを保存してテキストエディタを終了します。
④Swaggerの設定の変更（swagger.json）
SwaggerはRESTful APIの管理を行うためのフレームワークです。K5 Playgroundでは、BFFが受信可能なリクエストパラメータの定義をSwaggerの設定ファイルに記載します。BFFはSwaggerに書かれたHTTPリクエストのみ受け取れます。
C:\K5\TEST\LUNEChatbot\backend\apiフォルダに移動し、swagger.jsonをテキストエディタで開いてください。次のコードを以下に示すように修正します。
（省略）
"/webhook": {
"post": {
"description": "",
"responses": {
"200": {
"description": ""
}
},
"operationId": "webhookPOST",
"x-swagger-router-controller": "LINEChatbot"
}
}
（省略）
↓
（省略）
"/webhook": {
"post": {
"description": "",
"parameters": [{
"name": "data",
"in": "body",
"schema": {
"type": "string"
}
}],
"responses": {
"200": {
"description": ""
}
},
"operationId": "webhookPOST",
"x-swagger-router-controller": "Chat"
}
}
（省略）
ファイルを保存してテキストエディタを終了します。これでアプリは完成です。
LINEチャットボットアプリをデプロイしよう
作成したLINEチャットボットアプリをK5「CF」にデプロイし、動作を確認してみましょう。デプロイを行う前に、APIエンドポイントの設定とK5「CF」へのログインを行います。
バックエンドのデプロイ
①フォルダの移動
バックエンドアプリのあるC:\K5\TEST\LINEChatbot\backendフォルダに移動します。
> cd C:\K5\TEST\LINEChatbot\backend C:\K5\TEST\LINEChatbot\backend>
②バックエンドアプリのデプロイ
次のようにcf pushコマンドを利用してバックエンドアプリをデプロイします。
> cf push ＜バックエンドアプリ名＞
（省略）
state since cpu memory disk details
#0 running 2018-01-16 01:56:11 PM 0.0% 912K of 256M 1.3M of 1G
ブラウザで、「＜バックエンドアプリのURL＞/docs/」を開くとバックエンドのAPIドキュメントを確認できます。
フロントエンドのデプロイ
①フォルダの移動
フロントエンドアプリのあるC:\K5\TEST\LINEChatbot\frontendフォルダに移動します。
> cd C:\K5\TEST\LINEChatbot\frontend C:\K5\TEST\LINEChatbot\frontend>
②環境変数の設定
フロントエンドアプリが接続するバックエンドアプリのURLを指定します。
setコマンド（Mac/Linuxの場合はexpotコマンド）で環境変数API_URLにバックエンドアプリのURLを設定してください。
C:\K5\TEST\LINEChatbot\frontend> set API_URL=＜バックエンドアプリURL＞
③パッケージのインストール
フロントエンドアプリをビルドするために必要なパッケージをインストールします。
次のコマンドを実行すると、package.jsonに記述されている依存パッケージが自動でインストールされます。
C:\K5\TEST\LINEChatbot\frontend> npm install （省略）
④フロントエンドアプリのビルド
フロントエンドアプリをビルドします。
次のコマンドを実行すると、フロントエンドアプリのビルドが実行されます。ビルドしたアプリは「/public」フォルダに格納されます。
C:\K5\TEST\LINEChatbot\frontend> npm run build （省略）
⑤フォルダの移動
ビルドされたフロントエンドアプリが格納されているC:\K5\TEST\LINEChatbot\frontend\publicフォルダに移動します。
C:\K5\TEST\LINEChatbot\frontend> cd public C:\K5\TEST\LINEChatbot\frontend\public>
⑥フロントエンドアプリのデプロイ
ビルドされたフロントエンドアプリをデプロイします。
C:\K5\TEST\LINEChatbot\frontend\public> cf push ＜フロントエンドアプリ名＞
（省略）
state since cpu memory disk details
#0 running 2018-01-16 02:03:57 PM 0.2% 2.4M of 256M 7.1M of 1G
