アイデアをすぐ形に！ K5 Playgroundで開発するクラウドネイティブな最新Webアプリ（AD）

60分でLINEチャットボットアプリを作ろう～K5 Playgroundのテンプレートで本格アプリ開発

アイデアをすぐ形に！ K5 Playgroundで開発するクラウドネイティブな最新Webアプリ第4回

西岡結人（富士通株式会社）[著]

2018/02/23 14:00

ポスト

作成したアプリのダウンロード

　カスタマイズが完了したら、アプリをダウンロードしましょう。左メニューの「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

次のページ
LINEチャットボットアプリを確認しよう

この記事は参考になりましたか？

印刷用を表示

ポスト

アイデアをすぐ形に！ K5 Playgroundで開発するクラウドネイティブな最新Webアプリ連載記事一覧: 本当に「優れたUX」を目指そう～AI技術やA/Bテストでフロントエンドを改善し続ける方法

Webアプリは会話するスピードで開発しよう～ReactやBFFで高速にプロトタイピングする...

60分でLINEチャットボットアプリを作ろう～K5 Playgroundのテンプレートで本...

もっと読む

この記事の著者: 西岡結人（富士通株式会社）（ニシオカユイト）

　大阪府出身。基幹系業務アプリの開発を経験後、2016年に富士通株式会社に出向。現在は同社クラウドサービスK5の拡販用資材等の開発に従事。週末は外でフットサルや家でゴロゴロ読書や映画鑑賞。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事