Laravelで新規アプリを作成しており、いったんherokuでデプロイし、画面を確認したところcssが崩れていました。
原因はtailwind.cssのバージョンが上がった事。
ローカルで作成している段階では
$ npm run dev もしくは
$ npm run watch
すれば解決するのですが、herokuでも同様に解決しようと
$ heroku run npm run dev
とすると、npmコマンドがそもそも使えない。という事態だったので、npmを使えるようにするところから、$ npm run devをするまでの流れをまとめました。
- そもそも、npmとは
- npm runコマンド
- Herokuでnpmを使えるようにする
- 解決法
- 余談
- Laravel Mixとは
- webpackとは
- package.jsonとwebpack.mix.js
- npm install
そもそも、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","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で動かない時の対処法