サーバ上でWEBアプリ動かしてみようかな！できればMySQLとかのDBとも連携もしたい！
と思ったのでそれらを使えるサーバにデプロイする事にしました。
AmazonのAWSも無料で使えるので検討しましたが、無料期間が限定(12か月)されているのと利用できるサーバ時間の長さでまずはHerokuを使ってみる事に。
結論
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アプリの勉強を始めたばっかりでずっとローカルで動かしてたけど、サーバ上で動かしてみたい！無料で！って人は気楽にチャレンジしてみるといいかも。