結論

Heroku？なにそれおいしいの？状態からでも結構簡単にWEBアプリをデプロイできました。
実際に手を動かす時間よりは調べている時間の方が長かったかも。

環境

Win10+VSC@1.68
Node.js@16.14.2+Express@4.18.1

やろうとしたこと

Herokuサービス上でNode.js(Express)プログラムを動かす

やったこと

まずは小さな小さな成功体験から。

Herokuに登録します。超簡単成功体験。
日本語でしっかり書かれているのは嬉しいです。

Herokuとは何か？については端折ります。
ざっくり言うとWEBアプリを動かせるサーバ環境を提供しているサービス。
無料で登録できてサーバを起動している時間(Dyno)の無料枠が550時間、クレカ情報を登録すればさらに拡張されて1000時間になるらしい。
AWSも無料で使える枠がありますが12か月間かつ750時間上限。内容も違うところがありますが自分のやりたい事はHerokuで事足りそう。

プログラムのデプロイはGitHubとの連携でできる模様。
ローカルからリモートリポジトリにプッシュした後Herokuと連携させるのかな？

実行するプログラムの準備

サーバにアクセスしたらHelloWorldを返してくれるプログラムを準備します。

こちらのサイトさんの「Helloworldの作成」からスタートを参考に書いていってみます。

const express = require('express')
const app = express()

const PORT = 3000

app.get('/', (req, res)=>{ res.send('HELLO WORLD!!'); });

app.listen(PORT)
console.log(`Express Server Listen START at port=${PORT}`)

ローカル環境下で REST Client を使ってGETリクエストが返ってくることを確認します。

GET  http://localhost:3000 HTTP/1.1
HTTP/1.1 200 OK

HELLO WORLD!!

ちゃんとリクエストが通るご様子。

次にHerokuサーバーに配置する起動用ファイル「 Procfile 」を作成します。
拡張子とかは必要なく「Procfile」この名前。ちゃんと Pを大文字にすること。
ファイルの配置場所はルート直下。package.jsonとかと同じ位置。

中身については書かれたプログラムの言語によって違うみたい。
今回はNode.jsなので「web: node index」と記載。
あとpackage.jsonにも「"homepage": "/","」を先頭行に追加しておいてやります。

ここまでやったらコミットとGitHubのリモートにプッシュしておきます。

Herokuと連携する

VSCのターミナル上でHerokuを使っていくので HerokuCLI をインストールしておきます。

heroku loginでHerokuにログインした後heroku createでHeroku上にアプリを作成できます。
createの後に名前を付ける事も可。空欄だったら自動で名前が付きます。

次に
heroku buildpacks:set heroku/nodejs
を実行します。

ビルドパックというのは一連のソースコードを実行可能状態にまとめる(ビルド)する時に必要になるもの、というざっくり理解で良さそう。
プログラムが何の言語で書かれているかによってheroku/nodejsの部分が変わります。

実行すると
Run git push heroku ほにゃらら to create a new release using this buildpack.
と出てきます。

gitコマンド部分が紫色でハイライトされているので、そのコマンドを実行。
git push heroku [ほにゃらら(ブランチ名)]

これでアプリを実行する準備が整いました。
heroku open
でアプリを動かしてやります。

HerokuでWEBアプリデプロイ大成功！

そうは問屋がおろしません。怒られました。

とりあえずアプリの中身を見直します。
Heroku公式のスターターガイドにサンプルアプリの記述があるので拝借します。
下記の「アプリを準備する」に記載のもの。

色々自分の書いたプログラムと違いますが、ポート番号を設定するところからいじってみます。
こいつを追加して
const PORT = process.env.PORT || 5000

ついでに実際に使われているポートを調べるためにポートナンバーを表示させるようにします。
res.send(`HELLO WORLD!! PORT NUMBER is ${PORT}`)

index.js

const express = require('express')
const app = express()
const PORT = process.env.PORT || 5000

app.get('/', function (req, res, next) {
  res.send(`HELLO WORLD!! PORT NUMBER is ${PORT}`)
})

app.listen(PORT)
console.log(`Express Server Listen START at port=${PORT}`)

すると...

成功しました！
Herokuアプリはポートナンバーを動的に生成するようで、process.env.PORTこれで値をとれるんですね。
とれなかったらその後続けてある数字(ここでは5000)のポートをlistenするって事らしい。
ローカル環境だと5000でlistenしてました。

まとめ

Herokuサービス上でNode.jsで書かれたプログラムを動かすことができました。
一回やってみればこんなもんか、という楽勝感 is ある…！

WEBアプリの勉強を始めたばっかりでずっとローカルで動かしてたけど、サーバ上で動かしてみたい！無料で！って人は気楽にチャレンジしてみるといいかも。