古いバージョンのNodeやRubyで作ったアプリをherokuでデプロイする際の設定

## この記事の内容
### 起きたこと
herokuを使って講座で作成したWebアプリをデプロイしようしたところ、なにやらたくさんエラーが起こりました。
おきたエラーの詳細はエラー詳細に記載しています。

### 前提（バージョンなど）
- Ruby：2.7.7
- Rails：6.0.6.1
- Node.js：14.15.0
- Windows11でUbuntu(WSL2)を導入

### 原因
- Rubyのバージョンがherokuの最新バージョンに対応していなかった
- Nodeのバージョンがherokuが標準で使用するバージョンと異なっていた
- buildpackを導入していなかった


## エラー詳細1
### エラーメッセージ
```
!
!     The Ruby version you are trying to install does not exist on this stack.
!     
!     You are trying to install ruby-2.7.7 on heroku-22.
!     
!     Ruby ruby-2.7.7 is present on the following stacks:
!     
!     - heroku-20
!     
!     Heroku recommends you use the latest supported Ruby version listed here:
!     https://devcenter.heroku.com/articles/ruby-support#supported-runtimes
!     
!     For more information on syntax for declaring a Ruby version see:
!     https://devcenter.heroku.com/articles/ruby-versions
!
!     Push rejected, failed to compile Ruby app.
!     Push failed
```
### 原因
使っているRubyのバージョンが古い（デイトラよ…アップデートしてくれ…）

### 推測の根拠
エラー文の下記の記述
```
Ruby ruby-2.7.7 is present on the following stacks:
     - heroku-20
```

### 対応
heroku20へのダウングレードするために下記のコマンドをUbuntsで実行
```
heroku stack:set heroku-20 -a heroku上で設定したアプリ名
```

### 結果

```
Setting stack to heroku-20... done
```
が表示される

## エラー詳細2
### エラーメッセージ
```
File "/app/.node-gyp/20.9.0/include/node/common.gypi", line 1
     nerate ',
             ^
SyntaxError: EOL while scanning string literal
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 
```
### 原因
Node.jsのバージョンが原因と推測。
具体的には開発環境のバージョンは14、herokuは指定しない限り20。
おそらくバージョンの違いによりnode.jsに依存しているnode-sassの挙動がおかしくなり、syntax errorが出たものと思われる。

#### 推測の根拠
エラー名で検索したところ、下記のような記事に当たる。
https://github.com/datamllab/rlcard-showdown/issues/50
https://github.com/tensorflow/tfjs/issues/7902

### 対応
package.jsonにnode.jsのバージョンを指定
```
{
  "name": "******",
  "private": true,
  "engines": {           //ここを追記
    "node": "14.x"       //ここを追記
  },                     //ここを追記
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.3.0",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0"
}

```


### 結果
別のエラーメッセージが出るようになる

## エラー詳細3
### エラーメッセージ
```
The engine "node" is incompatible with this module. Expected version "14.x". Got "20.9.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
```
### 原因
buildpack がインストールされていない

#### 推測の根拠
下記記事を参考にbuildpack を確認したところ、インストールされていないことが判明
https://devcenter.heroku.com/ja/articles/nodejs-support#specifying-a-node-js-version

### 対応
下記のコマンドを実行し、buildpack をインストール

```
heroku buildpacks:add heroku/nodejs --app heroku上で設定したアプリ名
```

### 結果
Buildは完了するが、releaseでエラーが発生する

## エラー詳細4
### エラーメッセージ
```
heroku /bin/sh: 1: bundle: not found
```
### 原因
適切なbundleがインストールされていない

#### 推測の根拠
下記の記事を確認
https://devcenter.heroku.com/ja/articles/bundler-version#why-can-t-the-bundler-version-be-configured

### 対応
下記をUbuntsで実行
```
heroku buildpacks:add heroku/nodejs --index 1 --app heroku上で設定したアプリ名
heroku buildpacks:add heroku/ruby --index 2 --app heroku上で設定したアプリ名
```

### 注意点
herokuの以下の公式ドキュメントにあるように、第一言語​の buildpack は、常にリストの最後にする必要があるようです。
https://devcenter.heroku.com/ja/articles/using-multiple-buildpacks-for-an-app
> アプリの第一言語​の buildpack は、常にリストの最後の​ buildpack にしてください。これにより、別の言語のデフォルト値でなく、その第一言語のデフォルト値が必ず適用されるようになり、Heroku でアプリの第一言語を正しく検出することができます。

実際にこれを守らずにデプロイしようとしたところ、
` The engine "node" is incompatible with this module. Expected version "14.x". Got "20.9.0"`
のエラーが発生しました。

buildpackのリストは以下のコマンドで確認できます。
```
heroku buildpacks -a heroku上で設定したアプリ名
```

順番を並び替えるためには、以下のコマンドで一度全て削除して、正しい順番で入れ直すのがわかりやすそうです。
```
heroku buildpacks:clear
```

### 結果
無事デプロイが完了しました！