fluid_27’s blog

勉強した内容をアウトプットするためのブログ

HerokuにアップしたLaravel + tailwindアプリの画面崩れを修正

Laravelで新規アプリを作成しており、いったんherokuでデプロイし、画面を確認したところcssが崩れていました。

原因はtailwind.cssのバージョンが上がった事。

ローカルで作成している段階では

$ npm run dev もしくは

$ npm run watch

すれば解決するのですが、herokuでも同様に解決しようと

$ heroku run npm run dev

とすると、npmコマンドがそもそも使えない。という事態だったので、npmを使えるようにするところから、$ npm run devをするまでの流れをまとめました。

 

 

そもそも、npmとは

npmとNode Packaged Modules(ノードパッケージドモジュールズ)の略で、Node.jsのライブラリやパッケージを管理することができるツール。

管理ファイルであるpackage.jsonにインストールしたいパッケージを記述しておくことで「npm install」が実行されるときに指定のものをインストールしてくれる。

 

 

npm runコマンド

npm scriptsと呼ばれるタスク実行機能を呼び出すコマンド。
機能は、package.json内に書かれたシェルスクリプトを実行すること。

{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"@tailwindcss/forms": "^0.4.0",
"alpinejs": "^3.4.2",
"autoprefixer": "^10.1.0",
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.2.1",
"postcss-import": "^14.0.1",
"tailwindcss": "^3.0.0"
}
}

上記のようなpackage.jsonがあった場合、

$ npm run dev とすると

 npm run develeopment が実行され、

$ npm run build とすると

 npm run production が実行される。

という事ですね。

 

Herokuでnpmを使えるようにする

HerokuのビルドパックにNode.jsを追加する必要があり、今回はコンソールで追加しました。(HerokuのページからGUIで追加する事もできます)

$ heroku buildpacks:add heroku/nodejs

 

そして、package.jsonが作成されてないのであれば

$ npm init

$ npm install

をする必要があるのですが(詳細は、下記の参考サイト参照)、今回はローカルで開発したアプリをHerokuにpushするので流れなので、これらは実行せずに改めて

$ git push heroku main

でherokuにプッシュし、

$ heroku run npm run dev

実行してみました。

 

が、

$ heroku run npm run dev                  

 

Running npm run dev on ⬢ limitless-fjord-21567... up, run.6630 (Free)

> dev

> npm run development

 

> development

> mix

 

sh: 1: mix: not found

というエラーが。

色々とググっていると、下記サイトに解決方法が書いてありました。

https://jun-app.com/articles/laravel-mixx-heroku-fail

HerokuではNODE_ENVがproductionとして定義されていると、インストールおよび​ビルドステップ​を実行した後、アプリケーションをデプロイする前に、​devDependencies​ に宣言されているパッケージを取り除いてしまうそうです。

 

解決法

これも上記ページに書いてありましたが、

package.jsonの内容を編集し、

devDependencies => dependencies

と書き換えました。

 

また、自分の場合必要なかったかもしれませんが、上記サイトに載っていた通り

npm run prod => npm run build

に変更し、デプロイした時にLaravel Mixを叩いて、ビルドするようにしました。

 

これで、エラーが出ずに

$ heroku run npm run dev

を実行し、tailwindのcssがちゃんと反映されているのを確認できました。

 

余談

初学者として、用語の整理をしておきます。

 

Laravel Mixとは

フロントエンドのアセットをコンパイル、バンドルしてくれるツール

webpackのAPIラッパー。

 

webpackとは

webpackにはいろんな機能があるが、一番基本的な機能はjsの結合処理。いわゆるモジュールバンドラ。

 

package.jsonとwebpack.mix.js

Laravelをインストールすると、

package.jsonとwebpack.mix.jsが用意されている。

package.jsonには

Laravel Mix自体やその他必要なパッケージが記述済み。

また、package.jsonのscriptsにはwebpackを実行するためのスクリプトも記述されている。

webpack.mix.jsは、

webpack設定ファイル(webpack.config.js)のラッパー。

ここにコンパイル対象ファイルやバンドル対象ファイルなど設定を記述していく。

 

npm install

npm install コマンドを実行すると、package.jsonに記述されているパッケージが一括でインストールされる。

 

参考:

https://tofusystem.work/programming-lesson/howto-heroku-npm-install/

フロントエンド開発の3ステップ(npmことはじめ) - Qiita

Laravel mixのアセットがherokuで動かない時の対処法

webpackをかんたんに使う(Zero Configulation) - Qiita

npm入門 - Qiita