なでしこさんのプログラムをherokuで動かしたい！

　ドシロウトがherokuのアカウント取得してGitとHeroku CLIをインストールして、デプロイするまで。
　あるいは、なでしこ３のプログラムがherokuで動いたぁ～♪　という話。

※なでしこ３を作業フォルダへインストールすることとpackage.jsonについて、わりと重要な追記をしています。(2021/9/15)

発端

　前回の記事で、なでしこさんでLINE Bot作れるようにしたいなぁっていうことを書いたんですけど、ローカルやGoogle Colab上で作れたとしても、どっかにホスト出来なきゃダメですよねー。
　まあ、Node.jsが使えて、なでしこ３がインストール出来るサーバーがあれば、無問題なわけですが、流行りはサーバーレスだからね。よくわかりませんが；
　LINE Messaging APIご本家のチュートリアルではheroku押しみたいなので（？）herokuがいいかなとゆう。だけど、herokuでなでしこさんは動かせるのかな？　ってことでやってみた！

アカウントの作成とインストール

　そもそもherokuって何よ？　とゆう説明はありません（できません；）
　なでしこ３のPC版(cnako3)は入っている前提です。（当然Node.jsも）

Herokuのアカウント作成

　日本語だから大丈夫～☆
　とばかりに、必要事項（赤い*が付いてるとこ）を埋める。
　苗字、名前、メールアドレス。普通ですね。
　役職？！　てなるけど、「趣味でのご利用」ってのがあるのでそれにする。
　主な開発言語は、なでしこ３はNode.jsで動いてますから、「Node.js」を選択ですね。
　そして、「私はロボットじゃありません」にチェックして、「無料アカウント作成」

　すると、herokuさんからメールが来るんですけど・・・英語じゃん！( ；∀；)
　でっでもまあ、よくあるやつですよ。URLをクリックして、本人確認する的な。
　クリックすると、パスワードの入力画面になります。アルファベット、数字、記号全部が含まれてないとダメだからめんどくさい（なんて言ってちゃ今の時代ダメですね。スミマセン＞＜）
　パスワードを入力して、無事アカウント取れました。・・・が！

Page Not Found

Our apologies, but we couldn't find that page. 
Is it possible that you found a bad link?

　なんて？！
　ページが見つかりませんってどうゆうことなの？！？！（ＴｏＴ）
　しかし、再びherokuさんのログイン画面を開いてメールとパスワード入力したら、ふつーにログイン出来ました！　一安心☆

　でも、また英語だ・・・英語のページだ・・・利用規約っぽい。Google翻訳さん助けて！
　・・・・・・Accept。
　で、ようやく「Welcome to Heroku」な画面となりました。
　ここで、新しいアプリを作成したり出来るみたいだね。でででも英語だ・・・ツラい・・・

Gitのインストール

　英語のページですけど簡単です！

Heroku CLIのインストール

　日本語ページがあるので安心です☆

　ていうか、このHeroku スターターガイドはかなり親切なので、このとうりに学んでいけば、基本的な使い方はバッチリ（たぶんね）
　herokuさん、ドキュメントは日本語あるのに、操作画面は日本語化出来ないんですかね・・・

アップデート

　やらなくても出来るんだけど、何かやるたびに

»   Warning: heroku update available from 7.53.0 to 7.59.0.

　なんてのが表示されてウザい親切に教えて下さるので、アップデート。

heroku update

　こんだけ！

heroku -v

　してみると、

heroku/7.59.0 win32-x64 node-v12.21.0

　アップデートされた！
(2021/9.15追記)

ローカルでの準備

　とりあえず分かりやすく、デスクトップに「nako3」フォルダを作って、そこで作業することにします。
　えっ、mkdirなんてしりませんよよよょｗ
　ふつーに新規作成→フォルダで作ったよｗｗｗ

作ったフォルダに移動して、そこにpackage.jsonを作る。

cd desktop/nako3
npm init -y

　こんなのできました。

package.json

{
  "name": "nako3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

　nameは自動でフォルダ名が入って作られますが、好きに変えてだいじょぶっぽい。
　licenseは、変えたければ変える。

用意するファイル

テストプログラム

　とりあえず、Expressサーバーをお試ししてみます。
　まあ、ほとんどなでしこ３マニュアルのサンプルどうりなんですけれどね。

　ただ、Herokuさんのポートは、こっちの決め打ちではなく、あちらさんで設定しているPORTという環境変数を読んで上げなきゃいけないようで、PORT=「PORT」の環境変数取得で取得し、一応、手元でお試しする時のために、取得出来なかったらPORT＝8888みたいにしています。

Hallo.nako3

!「plugin_express.js」を取り込む。
PORT=「PORT」の環境変数取得。
もし、(PORT＝null)または(PORT＝空)ならば、PORT＝8888。
PORTでWEBサーバ起動した時には
　　「{PORT}でサーバ起動しました」と表示。
　　# ルーティング設定。
　　「/」へWEBサーバGETした時には
　　　　# サーバからWEBブラウザへ出力
　　　　「<h1>こんにちは、なでしこさん！</h1>」をWEBサーバ出力。
　　ここまで
ここまで

動作確認

cnako3 Hallo.nako3

　を実行して、

* [WEBサーバ(なでしこ+Express)] (debug)
| 以下のURLで起動しました。
+- [URL] http://localhost:8888
8888でサーバ起動しました
[GET] /

　て出て、ブラウザでhttp://localhost:8888を開いたら、「こんにちは、なでしこさん！」と表示されたらＯＫ☆

.gitignore

　gitの管理対象外にするファイルだそうです。
　npmでインストールしたパッケージは、package.jsonのdependenciesで依存関係が定義されていて、それを参照して必要なライブラリがダウンロードされるんで、ライブラリの実体はいらないんだって（！）
　のでnode_modulesは管理対象外にしていい、っていうかしろってことラシイ。

　.gitignore

node_modules/

　他にはlog​ファイルとか​tmp​ディレクトリとかを指定したりするそうです。
　フォルダを指定する時は、(ディレクトリ)/。ファイルには正規表現も使えるっぽい。

package.json

　てことはですよ。package.jsonのdependenciesに依存関係が定義されてさえすればいいってコト？！
　いやー、コレで、なでしこをどうやって入れたらいいんだ問題は解決ですよ（喜）
　なでしこは、公式ページのインストール方法を見ると、-gを付けてグローバルインストールすることになっています。だから自分とこの環境ではどっからでも使えるんだけど、アップロードして使うには、他のモジュール同様作業フォルダに入れてやらなきゃダメなんじゃ？　って思ってたんです。
　でも、-gを外して特定のフォルダにインストールしようとすると、エラーなって失敗しちゃいます。
　--prefixでフォルダ指定して入れることは出来るんだけど、そうすると、package.jsonに入りません。ツラい・・・
　と、無知ゆえに色々悩んで色々変なことやらかしましたけどね、もしかして、手作業でdependencies追加するだけで良くね？　ってコトに気が付いたので追記します。

  "dependencies": {
    "nadesiko3": "^3.2.25"　　// バージョン3.2.25は、2021/9/6現在です
  }

　で、こうなりました。

package.json

{
  "name": "nako3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "nadesiko3": "^3.2.25"
  }
}

　「"license": "ISC"」の後に「,」を追加するの忘れず！
　JSONさんが間違ってるよ！　とエラーになってしまいます（しまいました；）
　そのせいで、やっぱダメかも？　と、ムダに時間を費やしてしまったのは内緒；；；

わりと重要な追記(2021/9/15)

①　この方法でやると、その後別なモジュールを追加してpackage-lock.jsonが出来ると、package.jsonとpackage-lock.jsonに齟齬があるとされてデプロイに失敗してしまいます。
　先の.gitignoreにpackage-lock.jsonを追加して、Gitの管理対象外にしてしまえば大丈夫。

②　npm install nadesiko3ではエラー出て、なでしこ３を作業フォルダへはインストール出来ないって書いたんですが、何かWARNが出るものの、ふつーにインストール出来たっぽい？！　なに～？！？！Σ（゜д゜；
（前やった時はなにゆえ出来なかったのか・・・ちゃんとエラーの中身読ま（め）ない人はダメだね(´・ω・｀;）

　この場合は、package.json作る手順の後に、作業フォルダへなでしこ３をインストールするだけ。

cd desktop/nako3
npm init -y
npm install nadesiko3　　//ここね

　これなら、package.jsonを触る必要も無くて、package-lock.jsonも正しく作成されるし、無問題です！　うーん、やっぱりコレが正しい道なんじゃないの？

　でもなでしこさん、25MB弱もあるけど実際はいらないよね・・・（Herokuさんでは実体がいらないしローカルではグローバルインストールされてるんだもん）
　いらねって人や、やっぱりなでしこ３のインストールうまくいかないんですけど？！　って場合は①の方法をお試し下さいｗ

Procfile

　アプリの起動時に実行するコマンドを明示的に宣言するファイルです。
　<process type>: <command>と言う書式で、「アプリに Web サーバーが含まれている場合は、その Web サーバーをアプリの ​web​ プロセスとして宣言する必要があります」とゆうことなので、process typeはweb。
　web: の後に、動作確認の時のとうりを記載すればＯＫ。

web: cnako3 Hallo.nako3

できたので、いよいよデプロイ！

Heroku CLIにログイン

heroku login

　英語なんて知らねーよと、読まずにぼーっとしてたらダメです。
　なんか止まってると思ったら、キー押せと書いてあったｗ
　キーを押すとブラウザが開くので、Loginボタンを押します。
　メアドとかパスワードとか入れる画面になった場合は入れます。

アプリケーションを作成

　これは、herokuさんのページからでも出来ることだろうけど、基本GUIがいい人だけど、英語なんだもん；
　どっちみち英語なら、こっちの方が早いってゆうか？

heroku apps:create (アプリ名)

　すると、URLが表示されるので、とりあえずメモります。メモらなくてもぜんぜんだいじょぶだったんだけど、気持ち的にｗ
　ナゾ文字の羅列じゃ無くて、ちゃんとアプリ名の入ったURLなんですね。
　無料なのに、しゅごい！

https://(アプリ名).herokuapp.com/ | https://git.heroku.com/(アプリ名).git

　アプリ名・・・とりあえずnadesiko3にしたら、しゅっと通ったんですがね、後から知った所によると、他の人が使ってるアプリ名は使えないんだって。
　まあ、URLがナゾの番号じゃなくて、ちゃんとアプリ名になってるのだから、むべなるかなですが・・・ワタシなんかがnadesiko3を使ってしまって、なんかすまない（汗）

デプロイ

heroku.bat

git init
git add .
git commit -m "(コメント)"
git push -u heroku master

　この一連は、バッチファイルにしておくと超ラクです♪

エラー出る場合

fatal: 'heroku' does not appear to be a git repository
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

　新しくアプリを作成したら、その名前のリモートがアプリに合わせて設定されるって書いてあるんだけど、どうも出来てないコトがあるみたいなんだよね。

git remote -v

　してみて、何も出なかったら、手動で追加します。

heroku git:remote -a （アプリ名）

　以下のように表示されたらＯＫ☆

set git remote heroku to https://git.heroku.com/(アプリ名).git

　もっぺんgit remote -vして、確認してみます。

heroku  https://git.heroku.com/(アプリ名).git (fetch)
heroku  https://git.heroku.com/(アプリ名).git (push)

　こう表示されたらＯＫ☆
　今度はgit push -u heroku master出来る筈。

お試し

heroku open

　ブラウザが開いて、「こんにちは、なでしこさん！」と表示されます☆
　できた！！　やったね！！！

※「dyno 時間を節約するため、30 分間何も操作が行われないと、無料アプリケーションは自動的にスリープモードに切り替わります」・・・とゆうことで、復帰して表示されるまで、少々時間が掛かる場合があります。

まとめ

　herokuで、ちゃんとなでしこ３のプログラムを動かせることが分かりました。
　LINE Botを始め、色々楽しめそうじゃないですか♪
　がんばる！

　・・・ところでherokuってなんて読むんですかね。「へろく」？
　でも、「へーろく」って読まさるよね～ｗ
　だって、herokuにログインするとユーザー名が表示される右上のメニューアイコン、完全に忍者ですよね？　忍者平六さんですよね？？？
　とゆうわけで、ワタシは平六さんって呼んでいますｗｗｗ