Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What are the problem?
@snowdrops89

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

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

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

発端

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

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

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

Herokuのアカウント作成

 日本語だから大丈夫~☆
 とばかりに、必要事項(赤い*が付いてるとこ)を埋める。
 苗字、名前、メールアドレス。普通ですね。
 役職?! てなるけど、「趣味でのご利用」ってのがあるのでそれにする。
 主な開発言語は、なでしこ3は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?

 なんて?!
 ページが見つかりませんってどうゆうことなの?!?!(ToT)
 しかし、再び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なんてしりませんよよよょw
 ふつーに新規作成→フォルダで作ったよwww

作ったフォルダに移動して、そこに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サーバーをお試ししてみます。
 まあ、ほとんどなでしこ3マニュアルのサンプルどうりなんですけれどね。

 ただ、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を開いたら、「こんにちは、なでしこさん!」と表示されたらOK☆

.gitignore

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

 .gitignore
node_modules/

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

package.json

 てことはですよ。package.jsondependenciesに依存関係が定義されてさえすればいいってコト?!
 いやー、コレで、なでしこをどうやって入れたらいいんだ問題は解決ですよ(喜)
 なでしこは、公式ページのインストール方法を見ると、-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に齟齬があるとされてデプロイに失敗してしまいます。
 先の.gitignorepackage-lock.jsonを追加して、Gitの管理対象外にしてしまえば大丈夫。

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

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

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

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

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

Procfile

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

web: cnako3 Hallo.nako3

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

Heroku CLIにログイン

heroku login

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

アプリケーションを作成

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

heroku apps:create (アプリ名)

 すると、URLが表示されるので、とりあえずメモります。メモらなくてもぜんぜんだいじょぶだったんだけど、気持ち的にw
 ナゾ文字の羅列じゃ無くて、ちゃんとアプリ名の入った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 (アプリ名)

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

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)

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

お試し

heroku open

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

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

まとめ

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
3
Help us understand the problem. What are the problem?