herokuリリースエラー解決集

# はじめに
みなさんこんにちは！
今回はサンプルアプリケーション "webheroku" を使用して、一緒にエラーを解決しながらherokuリリースを自分の手で完了してみましょう！
成功体験を通してリリースできるようになるのが目標！

# 前提として～事前準備～
### ★Github student & Heroku連携
https://docs.google.com/presentation/d/1QgQs2rhZ_qoeXsj7VXZIwiy21iigI9tyVRWbfR2bbYc/edit#slide=id.g294d516660b_0_21

herokuリリースにはGithub student & Herokua連携が必須です。
リリースを始める前に、こちらの手続きを完了させましょう！

### ★zipファイルの解凍
今回使用するアプリケーションのzipファイルはこちら！
https://geeksalonmanage.slack.com/files/U05Q8FNG0A0/F07CYJ88RN0/webrender.zip
解凍して使ってね！

### ★GoogleAuthenticatoのインストール
スマホにインストールしておきましょう！ログインの際必要になる可能性があり！

# いよいよリリーススタート！
### 記事を参考にリリースを進めていこう！
•  Windows
 　 https://qiita.com/Manateee/private/291f610c67ecb51556ac
• Mac
　  https://qiita.com/natsu0627pooh/private/db6d989a6018eabc7d0a

  「heroku CLI で heroku にログインする」ここまでは基本的に問題なく進行できるでしょう。
  その後の動きで１点目の注意点があります。下記に記載します。

# 注意点1 
ターミナルにて
```terminal
heroku create 好きなアプリの名前
```
を記入後、ダッシュボード→setteingから、Add Buildpackを押し、nodejs(※使ってる人のみ)とrubyを追加する部分があるかと思います。
まずはここまで、上記の記事で進めていきましょう。
### その際、Buildpacks内は必ず、上からheroku/node.js、heroku/rubyになるように注意してください！
※じゃないとエラー出ちゃうよ！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788703/0e4689ad-0be2-f6e9-4479-5f4ce0ba4a63.png)
このようになっていれば問題ありません。
その後に鬼門が待っています。ここからはこの記事で一緒にやっていきましょう。

# 鬼門 push
### 多くの人が詰むポイントの一つが今からやるpushのフェーズ。エラーが多発しますので、適切な対処法を知ることが大切です。ここからはこの記事で一緒に進めましょう。
ターミナルに順番に実行していきましょう。

```terminal
git init
```
↑新しい本の書き始め。まだ何も書かれてない真新しい本(リポジトリ)を作成するよ。
```terminal
git remote
```
↑これは本の出版社を決めてる感じ。どこに本(コード)を送るか(公開するか)を指定するよ。
```terminal
git add -A
```
↑本に書かれたすべての章やページ(ファイルや変更)を編集者(Git)に送ってる！これにより編集者はどの部分が新しく追加/削除されたのかを把握できます。
```terminal
git commit -m "Release to heroku"
```
↑これは本の一部を完成させ、それを編集者に送るような感じ!"Release to heroku"これはその変更の要約や説明を表していて、これによりほかの人々が何を変更したのか理解できるよ。
#### ここで初めてgitを使ってコミットした人は、githubに登録したemailとusernameの入力を求められる場合があります！ログをよく見ましょう！
その後、以下のコマンドでデプロイします。
```terminal
git push heroku master
```
↑これは書き終えた本を出版社(ここではherokuというプラットフォーム)に送ります！
エラーが出るのはこのpushの部分です！書き終えた本を出版社に送ろうとしたら問題が起きて送れなかったり、問題があって出版社から突き返される感じですね。

いよいよ下記からエラーについて見ていきます！

### エラー１ Build failed Mulutiple lokfiles foud
![スクリーンショット 2024-07-20 003428.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788703/84c7f18b-ab02-dd9d-89e1-2f1941535cfe.png)
<details><summary>解決法はコチラ</summary>

このエラーはロックファイルが複数存在しているため発生しています。
ログを見ると、
```terminal
- package-lock.json
- yarn.lock
- pnpm-lock.yaml
```
が書かれていますね。lockファイルは1つにしろってことなので、3つのうち不要な2つを削除しましょう！今回不要なのは、
```terminal
- package-lock.json
- yarn.lock
```
この２つなのでvscodeで右クリック→削除しちゃいましょう。
削除したら改めてpushしてみましょう！
```terminal
 git add -A
 git commit -m "lockfile削除done"
 git push heroku master
```
</details>

### エラー２ The Ruby version you are trying to install does not exist on this stack
![スクリーンショット 2024-07-20 003933.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788703/90167d17-c993-eb67-0318-dd6557a7232d.png)

 <details><summary>解決法はコチラ</summary>

手順１：コマンドプロンプトで以下を実行

```terminal
heroku stack:set <stackname>
```
stacknameはRuby ruby-3.〇.〇 is present on the following stacks:のエラーの後ろに書かれているものを実行して下さい。

当記事のエラー文の場合、stacknameはheroku-20になるためコマンドは以下のようになります。
```terminal
heroku stack:set heroku-20
```
完了したら再度
```terminal
 git push heroku master
```
</details>

### エラー3 Faild to install gems via Bundler.
![スクリーンショット 2024-07-20 004341.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788703/f8b1094b-b777-0219-10f3-d0fe247ef908.png)
<details><summary>解決法はコチラ</summary>
原因を探しましょう！
ログを見るとこのように出力されていますね。

```terminal
remote:     Your bundle only supports platforms ["arm64-darwin-22"] but your local platform
remote:     is x86_64-linux. Add the current platform to the lockfile with
remote:     `bundle lock --add-platform x86_64-linux` and try again.
```
原因は、ローカル環境が x86_64-linux であるのにも関わらず、bundle は arm64-darwin-22 しかサポートしていないこと、みたいですね。
エラー文の中に
```terminal
remote:        `bundle lock --add-platform x86_64-linux` and try again.
```
なので、ここに書いてあるとおりに以下を実行してみましょう！
```terminal
bundle lock --add-platform x86_64-linux
```
このコマンドによってGemfile.lockが変更されたので、ステージングしましょう。
```terminal
git add .
```
次に、ステージしたGemfile.lockをコミットする。
```terminal
git commit -m "Gemfile.lock fix"
```
最後に、herokuへプッシュ！
```terminal
git push heroku master
```
</details>

### エラー4 Error: error:0308010C:digital envelope routines::unsupported
#### このエラーは注意が必要！発生した場合はよく確認して取り組んでください！
![スクリーンショット 2024-07-20 005752.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788703/cc977886-fd44-7dcd-5ce5-d3e89d34e849.png)
どうやらNodeのバージョンが悪さをしてるらしい。。

まず、以下のコマンドで自分のnodeとnpmのバージョンを確認しましょう。さとこのはこんな感じでした。

```terminal
node -v
v16.20.0

npm -v
8.19.4
```
バージョンによって解決法が変わります！！
<details><summary>解決方法1 Nodeのバージョンが16.〇.〇の場合</summary>

#### 解決方法1 Nodeのバージョンが16.〇.〇の場合
package.jsonファイルを編集する。以下を付け加える。このとき、先程確認したnodeとnpmのバージョンを指定する。
```package.json
"engines": {
    "node": "16.20.0",
    "npm": "8.19.4"
  }
```
これを下記のように追記しよう。enginesのすぐ上の　}　に" , "を付けないとエラーが出るよ！
```package.json
{
  "name": "webrender",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.4.3",
    "turbolinks": "^5.2.0",
    "webpack": "4.46.0",
    "webpack-cli": "3.3.12"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@babel/plugin-proposal-private-methods": "^7.18.6",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
    "babel-loader": "^8.2.2",
    "webpack-dev-server": "3"
  },
  "engines": {
    "node": "16.20.0",
    "npm": "8.19.4"
  }
}

```
変更したファイルをステージングする。
```terminal
git add .
```
ステージングされたファイルをコミットして、、
```terminal
git commit -m "package.json fix"
```
最後に、herokuへプッシュ！
```terminal
git push heroku master
```
</details>

<details><summary>解決方法2 Nodeのバージョンが16.〇.〇 " 以外 " の場合</summary>

#### 解決方法2 Nodeのバージョンが16.〇.〇 " 以外 " の場合
この場合はnodeのバージョンを下げて対応してみましょう。どうやらnodeのバージョンが16系の者しか対応してないようです。
ますはnodeバージョン16系をインストールしましょう。

```terminal
brew install node@16
```
現在紐づいているインストール済みのバージョンを解除。
```terminal
brew unlink node
```
使用したいバージョンを紐付ける。今回は、16系にしたいので、以下のコマンドを実行しましょう。
```terminal
brew link --overwrite node@16
```
すると、以下のように出力されたので、言われたとおりにechoを実行しましょう。
```terminal
Linking /opt/homebrew/Cellar/node@16/16.20.2... 1864 symlinks created.

If you need to have this software first in your PATH instead consider running:
  echo 'export PATH="/opt/homebrew/opt/node@16/bin:$PATH"' >> ~/.zshrc
```
以下の通り実行しましょう！これは、人によって違う可能性があるので自分のターミナルからコピーして実行するのがオススメ！
```terminal
echo 'export PATH="/opt/homebrew/opt/node@16/bin:$PATH"' >> ~/.zshrc
```
もう一度以下を実行してみましょう！nodeのバージョンが16系に下がっているはず！
```terminal
brew link --overwrite node@16
```
バージョンがちゃんと下がっているのか確認しましょう。
```terminal
node -v
v16.20.2
```
16系に下がっていますね！もう一度herokuにプッシュしてみましょう！
```terminal
git push heroku master
```
</details>

### エラー5 ERROR in ./app/javascript/packs/application.js 
![スクリーンショット 2024-07-20 010414.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788703/772ad031-ce22-5691-cbe5-b0cc0ca24536.png)
<details><summary>解決法はコチラ</summary>
多くの人がrails6を使用していますが、どうやらrails6とbabelは相性が悪いようです。。そのため修正を加えてあげましょう。

![スクリーンショット 2024-07-20 010813.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788703/1780a14f-51a8-0e88-5405-9168dcd57567.png)
下記２つのコード、それぞれ別の位置に記述されています！上の画像を確認してください！

```babel.config.js(修正前)
@babel/plugin-proposal-private-methods
@babel/plugin-proposal-private-property-in-object
```
```babel.config.js(修正後)
@babel/plugin-transform-private-methods
@babel/plugin-transform-private-property-in-object
```
その後はお決まりの流れです。
```terminal
git add .　
git commit -m "fix babel error"
git push heroku master
```
ERROR自体は2つ出ていますが、これを実行することでどちらも解消されます！
</details>

### エラーが発生せずpushが完了するとこんな感じになります！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788703/96737a52-9fb7-2e7a-cacc-a78305ca1ccf.png)
#### Macの場合はいかが出力されればOK！※さとこはwindowsなので画像なし
```terminal
remote: Verifying deploy... done.
```
これに出会えたらpushのフェーズは終了です！
そしたら一旦リリース記事に戻り、以下２つの工程をして、戻ってきてください！

##### ★工程1
Win : Heroku上で画像投稿機能(cloudinary)を登録しよう
Mac : 手順7：画像投稿機能などをherokuで使えるようにしよう

##### ★工程2
Win : データベースの作成！
Mac : 手順8：herokuでDBを作成する
#### ※DB作成は " 必ず " 一番安いDBを選択して作成して下さい！請求来ちゃうよ！



# 鬼門2 heroku上でマイグレート


ターミナルで以下を実行します。
```terminal
heroku run rails db:migrate
```
実行後、1行目に以下のように表示されたらマイグレートは成功です！
```terminal
Running rails db:migrate on ⬢ release-test... up, run.3599 (Eco)
```


マイグレートがうまくいくと、こんな感じの出力になります！
```terminal
＄ C:\webrender>heroku run rails db:migrate
Running rails db:migrate on ⬢ satoko... up, run.2168
I, [2024-07-19T16:56:47.739009 #2]  INFO -- : Migrating to CreateTweets (20240717150057)
== 20240717150057 CreateTweets: migrating =====================================
-- create_table(:tweets)
   -> 0.0137s
== 20240717150057 CreateTweets: migrated (0.0138s) ============================

I, [2024-07-19T16:56:47.761315 #2]  INFO -- : Migrating to DeviseCreateUsers (20240717155618)
== 20240717155618 DeviseCreateUsers: migrating ================================
-- create_table(:users)
   -> 0.0215s
-- add_index(:users, :email, {:unique=>true})
   -> 0.0151s
-- add_index(:users, :reset_password_token, {:unique=>true})
   -> 0.0031s
== 20240717155618 DeviseCreateUsers: migrated (0.0399s) =======================

I, [2024-07-19T16:56:47.805113 #2]  INFO -- : Migrating to AddUserIdToTweets (20240717161811)
== 20240717161811 AddUserIdToTweets: migrating ================================
-- add_column(:tweets, :user_id, :integer)
   -> 0.0022s
== 20240717161811 AddUserIdToTweets: migrated (0.0023s) =======================
```
</details>

上手くいかない場合は、
```terminal
heroku run rails db:migrate:status
```
をして、マイグレーションファイルが全てupなっているか確認しましょう。
downになっている項目がある可能性あり。


また、seedファイルを作成している人は、以下を実行しましょう。
```terminal
rails db:seed
```

### お疲れ様でした！ここまでアプリの公開は終了しています！
### では最後にアクセスしてして終わりましょう！
```terminal
heroku open
```

#### 無事に表示されたでしょうか？？されればデプロイ完了です！！リリース終了！もしされなければ少し戻ってみましょう！



# おわりに
##### リリースは1回したら終わりじゃありません！変更を反映させなきゃいけないからね。再デプロイに関してはリリース記事を見ましょう！
##### また、herokuはご存じの通り、1年以内にリリースしたプロダクトを削除しなくちゃいけません！やり方に関しては下記にリンクを参照してください
https://qiita.com/GeekSalon/private/e8bd8f764cfd85b0cddd

以上なります！