HerokuでNode.js(Express)で書いたHello worldプログラムを実行したい！ 

サーバ上で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に登録します。超簡単成功体験。
日本語でしっかり書かれているのは嬉しいです。

https://jp.heroku.com/

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

https://agency-star.co.jp/column/heroku



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

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

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

https://zenn.dev/takeyasu/articles/a5a74cf37b6cc42a214b

こちらのサイトさんの「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とかと同じ位置。

https://creepfablic.site/2019/06/15/heroku-procfile-matome/

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

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


## Herokuと連携する
VSCのターミナル上でHerokuを使っていくので __HerokuCLI__ をインストールしておきます。

https://devcenter.heroku.com/ja/articles/heroku-cli

`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アプリデプロイ大成功！

そうは問屋がおろしません。怒られました。
![7d4c09b48d799cfabc379432fda679b9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2707014/1a5624cc-0f7d-36ae-f29c-ae426454f6d4.png)


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

https://devcenter.heroku.com/ja/articles/getting-started-with-nodejs

https://github.com/heroku/node-js-getting-started

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

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

```
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}`)
```

すると...

![f079794578839b180367a952a3ee9044.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2707014/2298c37e-3060-31f5-a67e-0e5bfc70c9e0.png)

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

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

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