はじめに
みなさんこんにちは！
今回はサンプルアプリケーション "webheroku" を使用して、一緒にエラーを解決しながらherokuリリースを自分の手で完了してみましょう！
成功体験を通してリリースできるようになるのが目標！
前提として～事前準備～
★Github student & Heroku連携
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
ターミナルにて
heroku create 好きなアプリの名前
を記入後、ダッシュボード→setteingから、Add Buildpackを押し、nodejs(※使ってる人のみ)とrubyを追加する部分があるかと思います。
まずはここまで、上記の記事で進めていきましょう。
その際、Buildpacks内は必ず、上からheroku/node.js、heroku/rubyになるように注意してください！
※じゃないとエラー出ちゃうよ！
このようになっていれば問題ありません。
その後に鬼門が待っています。ここからはこの記事で一緒にやっていきましょう。
鬼門 push
多くの人が詰むポイントの一つが今からやるpushのフェーズ。エラーが多発しますので、適切な対処法を知ることが大切です。ここからはこの記事で一緒に進めましょう。
ターミナルに順番に実行していきましょう。
git init
↑新しい本の書き始め。まだ何も書かれてない真新しい本(リポジトリ)を作成するよ。
git remote
↑これは本の出版社を決めてる感じ。どこに本(コード)を送るか(公開するか)を指定するよ。
git add -A
↑本に書かれたすべての章やページ(ファイルや変更)を編集者(Git)に送ってる！これにより編集者はどの部分が新しく追加/削除されたのかを把握できます。
git commit -m "Release to heroku"
↑これは本の一部を完成させ、それを編集者に送るような感じ!"Release to heroku"これはその変更の要約や説明を表していて、これによりほかの人々が何を変更したのか理解できるよ。
ここで初めてgitを使ってコミットした人は、githubに登録したemailとusernameの入力を求められる場合があります！ログをよく見ましょう！
その後、以下のコマンドでデプロイします。
git push heroku master
↑これは書き終えた本を出版社(ここではherokuというプラットフォーム)に送ります！
エラーが出るのはこのpushの部分です！書き終えた本を出版社に送ろうとしたら問題が起きて送れなかったり、問題があって出版社から突き返される感じですね。
いよいよ下記からエラーについて見ていきます！
エラー１ Build failed Mulutiple lokfiles foud
解決法はコチラ
このエラーはロックファイルが複数存在しているため発生しています。
ログを見ると、
- package-lock.json
- yarn.lock
- pnpm-lock.yaml
が書かれていますね。lockファイルは1つにしろってことなので、3つのうち不要な2つを削除しましょう！今回不要なのは、
- package-lock.json
- yarn.lock
この２つなのでvscodeで右クリック→削除しちゃいましょう。
削除したら改めてpushしてみましょう！
git add -A
git commit -m "lockfile削除done"
git push heroku master
エラー２ The Ruby version you are trying to install does not exist on this stack
解決法はコチラ
手順１：コマンドプロンプトで以下を実行
heroku stack:set <stackname>
stacknameはRuby ruby-3.〇.〇 is present on the following stacks:のエラーの後ろに書かれているものを実行して下さい。
当記事のエラー文の場合、stacknameはheroku-20になるためコマンドは以下のようになります。
heroku stack:set heroku-20
完了したら再度
git push heroku master
エラー3 Faild to install gems via Bundler.
解決法はコチラ
原因を探しましょう！ ログを見るとこのように出力されていますね。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 しかサポートしていないこと、みたいですね。
エラー文の中に
remote: `bundle lock --add-platform x86_64-linux` and try again.
なので、ここに書いてあるとおりに以下を実行してみましょう！
bundle lock --add-platform x86_64-linux
このコマンドによってGemfile.lockが変更されたので、ステージングしましょう。
git add .
次に、ステージしたGemfile.lockをコミットする。
git commit -m "Gemfile.lock fix"
最後に、herokuへプッシュ！
git push heroku master
エラー4 Error: error:0308010C:digital envelope routines::unsupported
このエラーは注意が必要！発生した場合はよく確認して取り組んでください！
どうやらNodeのバージョンが悪さをしてるらしい。。
まず、以下のコマンドで自分のnodeとnpmのバージョンを確認しましょう。さとこのはこんな感じでした。
node -v
v16.20.0
npm -v
8.19.4
バージョンによって解決法が変わります！！
解決方法1 Nodeのバージョンが16.〇.〇の場合
解決方法1 Nodeのバージョンが16.〇.〇の場合
package.jsonファイルを編集する。以下を付け加える。このとき、先程確認したnodeとnpmのバージョンを指定する。
"engines": {
"node": "16.20.0",
"npm": "8.19.4"
}
これを下記のように追記しよう。enginesのすぐ上の } に" , "を付けないとエラーが出るよ！
{
"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"
}
}
変更したファイルをステージングする。
git add .
ステージングされたファイルをコミットして、、
git commit -m "package.json fix"
最後に、herokuへプッシュ！
git push heroku master
解決方法2 Nodeのバージョンが16.〇.〇 " 以外 " の場合
解決方法2 Nodeのバージョンが16.〇.〇 " 以外 " の場合
この場合はnodeのバージョンを下げて対応してみましょう。どうやらnodeのバージョンが16系の者しか対応してないようです。
ますはnodeバージョン16系をインストールしましょう。
brew install node@16
現在紐づいているインストール済みのバージョンを解除。
brew unlink node
使用したいバージョンを紐付ける。今回は、16系にしたいので、以下のコマンドを実行しましょう。
brew link --overwrite node@16
すると、以下のように出力されたので、言われたとおりにechoを実行しましょう。
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
以下の通り実行しましょう！これは、人によって違う可能性があるので自分のターミナルからコピーして実行するのがオススメ！
echo 'export PATH="/opt/homebrew/opt/node@16/bin:$PATH"' >> ~/.zshrc
もう一度以下を実行してみましょう！nodeのバージョンが16系に下がっているはず！
brew link --overwrite node@16
バージョンがちゃんと下がっているのか確認しましょう。
node -v
v16.20.2
16系に下がっていますね！もう一度herokuにプッシュしてみましょう！
git push heroku master
エラー5 ERROR in ./app/javascript/packs/application.js
解決法はコチラ
多くの人がrails6を使用していますが、どうやらrails6とbabelは相性が悪いようです。。そのため修正を加えてあげましょう。
下記２つのコード、それぞれ別の位置に記述されています！上の画像を確認してください！
@babel/plugin-proposal-private-methods
@babel/plugin-proposal-private-property-in-object
@babel/plugin-transform-private-methods
@babel/plugin-transform-private-property-in-object
その後はお決まりの流れです。
git add .
git commit -m "fix babel error"
git push heroku master
ERROR自体は2つ出ていますが、これを実行することでどちらも解消されます！
エラーが発生せずpushが完了するとこんな感じになります！
Macの場合はいかが出力されればOK！※さとこはwindowsなので画像なし
remote: Verifying deploy... done.
これに出会えたらpushのフェーズは終了です！
そしたら一旦リリース記事に戻り、以下２つの工程をして、戻ってきてください！
★工程1
Win : Heroku上で画像投稿機能(cloudinary)を登録しよう
Mac : 手順7：画像投稿機能などをherokuで使えるようにしよう
★工程2
Win : データベースの作成！
Mac : 手順8：herokuでDBを作成する
※DB作成は " 必ず " 一番安いDBを選択して作成して下さい！請求来ちゃうよ！
鬼門2 heroku上でマイグレート
ターミナルで以下を実行します。
heroku run rails db:migrate
実行後、1行目に以下のように表示されたらマイグレートは成功です！
Running rails db:migrate on ⬢ release-test... up, run.3599 (Eco)
マイグレートがうまくいくと、こんな感じの出力になります！
＄ 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) =======================
上手くいかない場合は、
heroku run rails db:migrate:status
をして、マイグレーションファイルが全てupなっているか確認しましょう。
downになっている項目がある可能性あり。
また、seedファイルを作成している人は、以下を実行しましょう。
rails db:seed
お疲れ様でした！ここまでアプリの公開は終了しています！
では最後にアクセスしてして終わりましょう！
heroku open
無事に表示されたでしょうか？？されればデプロイ完了です！！リリース終了！もしされなければ少し戻ってみましょう！
おわりに
リリースは1回したら終わりじゃありません！変更を反映させなきゃいけないからね。再デプロイに関してはリリース記事を見ましょう！
また、herokuはご存じの通り、1年以内にリリースしたプロダクトを削除しなくちゃいけません！やり方に関しては下記にリンクを参照してください
以上なります！