Voiceflow SDKを使ったバックエンドスクリプトを、
- なるべくお手軽に使える
- コーディングやバックエンドの知識がないユーザでもあまり意識せずに使える
ようにして配布したいなぁと思ったとき、一番最初に思いついたのがHerokuでした。ただ、Heroku、ほんとごくごくたまにしか使わないので、使うときに大体覚えてなくて毎回ググってる気がします・・・
ということで今更感満載ですが、自分用のメモ。
アプリ作成
サンプルということで、expressでhello worldを作ります。
$ mkdir heroku-hello-world && cd heroku-hello-world $ npm init $ npm install express -save
index.js作成
const express = require('express'); const app = express(); app.set('port', (process.env.PORT || 3000)); app.get('/', function(request, response) { response.send('Hello World!\n'); }); app.listen(app.get('port'), function() { console.log("Node app is running at localhost:" + app.get('port')); });
テスト
$ node index.js Node app is running at localhost:3000
$ curl localhost:3000 Hello World!
確認できたらCtrl+Cで止めます
herokuデプロイ
まずgitで初期化。.gitignore作るのにgiboが便利です。
$ git init
$ gibo dump macOS Node > .gitignore
起動時の実行コマンドを指定するProcfileを作成します
web: node index.js
heroku loginでherokuにログイン、適当にキーを叩くとブラウザでログイン画面が出ます。
$ heroku login heroku: Press any key to open up the browser to login or q to exit:
ログインが成功したらターミナルに戻って、ログイン済みになっていることを確認します。
Logging in... done Logged in as foobar@example.com $
herokuにpushしていきましょう。まず、コミット。
$ git add . $ git commit -m "initial commit"
heroku createでheroku側にアプリを作成します。これでアプリケーションのURLおよびgitのリモートレポジトリが発行されます。
$ heroku create
Creating app... done, ⬢ foo-bar-hogehoge-12345
https://foo-bar-hogehoge-12345.herokuapp.com/ | https://git.heroku.com/foo-bar-hogehoge-12345.git
heroku appsで確認することもできます。
$ heroku apps
=== foobar@example.com
foo-bar-hogehoge-12345
$ heroku info --app foo-bar-hogehoge-12345 === foo-bar-hogehoge-12345 Auto Cert Mgmt: false Dynos: Git URL: https://git.heroku.com/foo-bar-hogehoge-12345.git Owner: foobar@example.com Region: us Repo Size: 0 B Slug Size: 0 B Stack: heroku-20 Web URL: https://foo-bar-hogehoge-12345.herokuapp.com/
git remoteでリモートレポジトリが作成されていることも確認できますね
$ git remote -v heroku https://git.heroku.com/foo-bar-hogehoge-12345.git (fetch) heroku https://git.heroku.com/foo-bar-hogehoge-12345.git (push)
この状態でURLにアクセスしてみると、以下のような画面が表示されます。
ではアプリをデプロイしましょう。Herokuにpushします。
$ git push heroku master
ビルドしているログなどが流れます。
Enumerating objects: 8, done. Counting objects: 100% (8/8), done. Delta compression using up to 8 threads Compressing objects: 100% (7/7), done. Writing objects: 100% (8/8), 6.66 KiB | 3.33 MiB/s, done. Total 8 (delta 0), reused 0 (delta 0), pack-reused 0 remote: Compressing source files... done. remote: Building source: remote: remote: -----> Building on the Heroku-20 stack remote: -----> Determining which buildpack to use for this app remote: -----> Node.js app detected remote: remote: -----> Creating runtime environment remote: remote: NPM_CONFIG_LOGLEVEL=error remote: NODE_VERBOSE=false remote: NODE_ENV=production remote: NODE_MODULES_CACHE=true remote: remote: -----> Installing binaries remote: engines.node (package.json): unspecified remote: engines.npm (package.json): unspecified (use default) remote: remote: Resolving node version 14.x... remote: Downloading and installing node 14.17.2... remote: Using default npm version: 6.14.13 remote: remote: -----> Installing dependencies remote: Installing node modules remote: added 50 packages in 1.105s remote: remote: -----> Build remote: remote: -----> Caching build remote: - node_modules remote: remote: -----> Pruning devDependencies remote: audited 50 packages in 0.74s remote: found 0 vulnerabilities remote: remote: remote: -----> Build succeeded! remote: -----> Discovering process types remote: Procfile declares types -> web remote: remote: -----> Compressing... remote: Done: 33.1M remote: -----> Launching... remote: Released v3 remote: https://foo-bar-hogehoge-12345.herokuapp.com/ deployed to Heroku remote: remote: Verifying deploy... done. To https://git.heroku.com/foo-bar-hogehoge-12345.git * [new branch] master -> master
できました。アプリのURLにアクセスして動くことを確認しましょう。
$ curl https://foo-bar-hogehoge-12345.herokuapp.com/ Hello World!
heroku openを使うと、ブラウザが自動的に起動して、アプリURLが開きますので、こちらでもOK。
$ heroku open
herokuの管理画面を見ると、デプロイの履歴などがわかります。
Github・Herokuの連携
最初の例では、Herokuのgitレポジトリを使いました。今度はGithubのレポジトリとHerokuを連携させてみます。
Githubにレポジトリ作成。今回はghコマンドを使います。すでにリポジトリが存在する場合、昔はgh repo createできなかったけど今はできますね。
$ gh repo create ? Repository name heroku-hello-world ? Repository description ? Visibility Public ? This will add an "origin" git remote to your local repository. Continue? Yes ✓ Created repository kun432/heroku-hello-world on GitHub ✓ Added remote https://github.com/kun432/heroku-hello-world.git
リモートレポジトリが追加されています。
$ git remote -v heroku https://git.heroku.com/historic-great-basin-52215.git (fetch) heroku https://git.heroku.com/historic-great-basin-52215.git (push) origin https://github.com/kun432/heroku-hello-world.git (fetch) origin https://github.com/kun432/heroku-hello-world.git (push)
GitHubにpushしておきます。空のレポジトリだとHeroku連携できないので先に。
$ git push origin master
Herokuの管理画面からGitHub連携設定を行います。。"Deploy"をクリック。
Deployment methodで"GitHub"を選択して、"Connect to GitHub"をクリック。
Herokuからレポジトリへのアクセスを許可します。"Authorize heroku"をクリック。
Herokuに戻ってきたら、レポジトリを検索して”Connect”をクリック。
接続ができたら、デプロイするブランチを選択。今回は"master"で。"Enable Automatic Deploys"をクリック。ちなみに、手動でデプロイする場合は一番下です。
ではコミットしてpushしてみましょう。index.jsを少しいじってcommit&push。
app.get('/', function(request, response) { response.send('Hello Hello Hello World!!!\n'); });
$ git add . $ git commit -m "出力を修正" $ git push origin master
Heroku管理画面のActivitiesが増えていますね。
heroku openでブラウザ起動して確認します。
$ heroku open
更新が反映されていますね！
Herokuボタン
さらにかんたんにするために、Herokuボタンを作って、公開レポジトリをワンクリックでデプロイさせてみましょう。
レポジトリ直下にapp.jsonを作成。"logo"でロゴ画像で表示できるので、レポジトリに含めておいてください。今回は「いらすとや」様のものを使用させていただきました。
{ "name": "heroku-hello-world", "description": "Heroku練習用です。", "repository": "https://github.com/kun432/heroku-hello-world", "logo": "https://raw.githubusercontent.com/kun432/heroku-hello-world/master/logo.png", "keywords": [ "heroku", "node.js", "express", "hello world"] }
README.mdにボタンを追加します。
[](https://heroku.com/deploy)
GitHubにコミットをpush。
$ git push origin master
GitHubのレポジトリページから”Deploy to Heroku”をクリック。事前に最初に作ったアプリを削除しておくとわかりやすいです。
アプリの名前は空白にしておくと適当な名前になるので、今回はそれで。"Deploy App"をクリック。
レポジトリからソースが取得されてビルドが始まります。
"Deploy to Heroku"にチェックが入ればOK。"View"をクリックしてみましょう。
ちゃんとデプロイされていますね！
ちなみにこの状態では、GitHubと連携はされていません。単にcloneして引っ張ってきて動かしたのと同じ状態です。これで一旦お試しして、良さげならforkしてGitHub連携するのが良さげかなと思います。
まとめ
もうこれで忘れないはず・・・
さて、Voiceflow SDKのコード書くぞー
今回のサンプルはこちら。Herokuボタンも試してみてください。