初めに
Railsを使ってWebアプリの開発を進めていましたが、Herokuにデプロイする際につまづいた箇所が何箇所かあったので、備忘録としてこちらにまとめておきます。
デプロイの流れはこちらのページを参考に進めました。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgwJTkwJUU1JTg4JTlEJUU1JUJGJTgzJUU4JTgwJTg1JUU1JTkwJTkxJUUzJTgxJTkxJUUzJTgwJTkxcmFpbHMlRTMlODIlQTIlRTMlODMlOTclRTMlODMlQUElRTMlODIlOTJoZXJva3UlRTMlODIlOTIlRTQlQkQlQkYlRTMlODElQTMlRTMlODElQTYlRTclQTIlQkElRTUlQUUlOUYlRTMlODElQUIlRTMlODMlODclRTMlODMlOTclRTMlODMlQUQlRTMlODIlQTQlRTMlODElOTklRTMlODIlOEIlRTYlOTYlQjklRTYlQjMlOTUlRTMlODAlOTAlRTYlQjElQkElRTUlQUUlOUElRTclODklODglRTMlODAlOTEmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWFjOGU1YzI1MjZjM2I5Yjc0MWE2NDhjY2FmMmRhMzk3&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrYXp1a2ltYXRzdW1vdG8mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTQ0MjNjMjgxODBmZDc3ZTViZTYxNzMxNTNkNDNiMDBl&blend-x=142&blend-y=436&blend-mode=normal&txt64=aW4gR3JhZmZpdHnmoKrlvI_kvJrnpL4&txt-width=770&txt-clip=end%2Cellipsis&txt-color=%23212121&txt-font=Hiragino%20Sans%20W6&txt-size=36&txt-x=156&txt-y=536&s=95b5486fbf63c48dae4664474d7b1b15)
つまづき① デプロイ時に必要なパッケージがない問題
内容
エラー文はこちらでした。
Precompiling assets failed / Error: Cannot find package '@babel/plugin-proposal-private-property-in-object'
@babel/plugin-proposal-private-property-in-object
というパッケージがないようです。
package.jsonには記載がなければ新たにインストールするだけなのですが、しっかりとインストールされているようだったので困りました。
解決策
解決のためにはbabel.config.js
を修正する必要がありました。
babel.config.jsには以下のように利用しているプラグインを記載している箇所があります。
[
'@babel/plugin-proposal-private-methods',
{
loose: true
}
],
[
'@babel/plugin-proposal-private-property-in-object',
{
loose: true
}
],
このproposal
の部分をtransform
に変更する必要がありました。
[
// proposalをtransformに変更
'@babel/plugin-transform-private-methods',
{
loose: true
}
],
[
// proposalをtransformに変更
'@babel/plugin-transform-private-property-in-object',
{
loose: true
}
],
babel.config.js
を変更して再度デプロイを行ったところ無事通りました。
こちらの記事を参考にさせていただきました。ありがとうございます。
https://mrradiology.hatenablog.jp/entry/2023/09/29/122815
つまづき② データベースがない問題
内容
無事デプロイが完了したのですが、URLを開くとこんな表示でした。
We’re sorry, but something went wrong.
If you are the application owner check the logs for more information.`
ログを確認するとどうやらデータベースがないから接続ができないよとのこと。
ActiveRecord::ConnectionNotEstablished: connection to server on socket "/var/run/postgresql/.s.PGSQL.5432"
failed: No such file or directory (ActiveRecord::ConnectionNotEstablished)
解決策
HerokuのResourcesからデータベースのアドオンを追加する必要がありました。
画像のFind more add-ons
からHeroku Postgres
を検索し、追加します。
![スクリーンショット 2024-04-19 9.39.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/338946/d0df5b5c-bb48-f836-d6d4-08479405d6f0.png)
データベースへのリンクがHerokuの環境変数に自動的に発行されるので、urlをdatabase.yml
に追加しましょう。
production:
<<: *default
adapter: postgresql
encoding: unicode
pool: 5
# この行を追加
url: <%= ENV['DATABASE_URL'] %>
その後、マイグレーションもお忘れなく。
heroku run rails db:migrate
再度デプロイすると無事、アプリが起動しました。
デプロイしてみると意外と手こずるものですね…
日々精進したいと思います。