SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
アイデアをすぐ形に! K5 Playgroundで開発するクラウドネイティブな最新Webアプリ連載記事一覧

もっと読む

この記事の著者

西岡 結人(富士通株式会社)(ニシオカ ユイト)

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

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

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10658 2018/02/28 17:21

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング