HerokuでSPAアプリ作っててビルドしたjsとcssをコミットしたくない話
全体の構成として、バックエンドとログインせずに歩き回れるフロントはLaravelで、
ログイン後の画面についてはVueでSPAみたいな挙動をさせるWebアプリを作っていたときのことです。
デフォルトのLaravelプロジェクトって、.gitignoreにpublic/jsとpublic/cssが入ってないんですよ。
くっついてるVueのコンポーネントを書き換えていて、ちまちまビルドしたりすると、
当然public/jsやpublic/cssの下にファイルが作られます。
それをGitにコミットしてHerokuにデプロイとかしていて、まあ動くわけなんですけど、
ビルド前のリソースに変更がなくてもビルドするたびに差分がでてしまうんです。
これはちょっとイケてないぞ、ということで、
.gitignoreにpublic/jsとpublic/cssあたりを足しつつ、
なおかつHeroku上でｄWebpackでビルドをよしなにやってくれないかと調べてみました。
Herokuでwebpackでビルドする
herokuの環境変数
まず、デフォルトではnpmのconfigが production 扱いでインストールされてしまうため、
devDependencyでnpmとnode_modulesがインストールさせるために環境変数を足します。
heroku config:set NPM_CONFIG_PRODUCTION=false
package.jsonを書き足す
herokuでデプロイした時に、npm run prodを実行させるため、
下記の heroku-postbuild の行を、 package.json のscriptに書き足してください。
"scripts": {
〜省略〜
"heroku-postbuild": "npm run prod"
},
node.jsがbuild packsになければ足しておく
herokuのダッシュボードのbuild packsにnode.jsがあるかどうか確認。
なければ足しておいてください。
コミットする
必要なら、.gitignore に public/js と pubblic/css の行を書き足すなどして、
それらのファイルをコミットしないようにしてください。
この状態でコミットしてデプロイすると、heroku-postbuildが実行されるようになります。
Laravelのプロジェクトでいうと、laravel-mixから.jsのコンパイルがなされるようになる、はずです。