[{"data":1,"prerenderedAt":558},["ShallowReactive",2],{"article-laravel-mixx-heroku-fail":3},{"id":4,"title":5,"body":6,"category":541,"createdAt":543,"description":5,"extension":544,"index":545,"meta":546,"navigation":547,"path":548,"publish":547,"seo":549,"series":545,"seriesTitle":545,"stem":550,"tag":551,"thumbnail":556,"updatedAt":545,"__hash__":557},"articles\u002Farticles\u002Flaravel-mixx-heroku-fail.md","Laravel mixのアセットがherokuで動かない時の対処法",{"type":7,"value":8,"toc":532},"minimark",[9,13,16,19,24,32,35,38,42,56,61,64,67,71,86,107,120,131,135,142,152,342,345,492,501,504,507,520,528],[10,11,12],"p",{},"こんにちはjunです。最近よくLaravelの開発を行っていて、プロトタイプとかをherokuにあげるのですがLaravel mixのアセットが動かない（main.jsが404）でちょっと困ったので、今回はその対処法を書きたいと思います。",[10,14,15],{},"Laravel\bmixの説明を軽くするので、さっさと解決策みたいひとは「ビルドアセットをgitignoreしていた」から参照してください。なお使用環境は以下の通りです。",[10,17,18],{},"Laravel 6\nPHP 7.4\nNode.js 12.21（開発）\nNode.js 14.16（heroku）",[20,21,23],"h2",{"id":22},"laravel-mixって","Laravel Mixって？",[10,25,26,27,31],{},"Laravel MixはLaravelが公式に出している、JS・CSSのアセットコンパイラとモジュールバンドラです。",[28,29,30],"code",{},"resource","配下のjsやsassをコンパイルしたり、バンドルするwebpackの設定がすでにLaraveに最適化されています。webpackをほとんど触らずともvue、react、sass、そのほかjsライブラリをもちいた開発ができます。",[10,33,34],{},"resource 配下のアセットはLaravel Mixによってpublic配下に自動的に吐かれるようになっています。開発時にはnpm run watchをしていますが、よく見るとpublic配下に開発用ビルドしたアセットファイルが逐一置かれています。",[10,36,37],{},"大体のLaraveフロントエンドではこのMixを用いて開発していることが多いと思います。しかしherokuや本番環境にあげた時にちょっと問題がおきました。",[20,39,41],{"id":40},"mainjs-is-not-found","main.js is not found",[10,43,44,45,47,48,51,52,55],{},"Laravel Mixでフロントを構築して、ある程度バック含めて完成したのでherokuにデプロイしてみました。ビルドは普通に成功し、満を辞して目的の画面をみても",[28,46,41],{},"となってしましました。",[28,49,50],{},"main.js","にはビルドしたvue.jsのプロジェクトがあるはずなのにと思い、サーバーに入って",[28,53,54],{},"public\u002Fjs","配下をみてみたところ、何もありませんでした。",[57,58,60],"h3",{"id":59},"原因その１ビルドアセットをgitignoreしていた","原因その１：ビルドアセットをgitignoreしていた",[10,62,63],{},"ビルドされたアセットはpublic配下に置かれますが、ファイル量が膨大だったり、開発モードと本番モードが混じる可能性があること、あとどうせコロコロ変わるのでバージョン管理から外そうと思い、public\u002Fjsとpublic\u002Fcssはバージョン管理から外していました。",[10,65,66],{},"herokuは基本的にgitを用いてデプロイします。管理対象外のファイルはもちろんherokuサーバー上にないので、アセットがあるはずもありません。であればherokuにデプロイした時にLaravel Mixを叩いて、ビルドすれば解決します。",[57,68,70],{"id":69},"原因その２laravel-mixがdevdependencies","原因その２：Laravel MixがdevDependencies",[10,72,73,74,77,78,81,82,85],{},"Herokuでは",[28,75,76],{},"NODE_ENV","が",[28,79,80],{},"production","（本番環境）で定義されていると、",[28,83,84],{},"devDependencies","がプリーニングされてしまい、ビルドがうまく走りません。",[87,88,92,93,96],"div",{"className":89},[90,91],"alert","alert-success","\nデフォルトでは、Heroku は ​package.json​ の ​dependencies​ および ​devDependencies​ に記載されているすべての依存関係をインストールします。\n",[10,94,95],{},"インストールおよび​ビルドステップ​を実行した後、 Heroku はアプリケーションをデプロイする前に、​devDependencies​ に宣言されているパッケージを取り除きます。",[10,97,98],{},[99,100,101],"small",{},[102,103,104],"a",{"href":104,"rel":105},"https:\u002F\u002Fdevcenter.heroku.com\u002Fja\u002Farticles\u002Fnodejs-support#skip-pruning",[106],"nofollow",[10,108,109,110,115,116,119],{},"インストールおよび​",[102,111,114],{"href":112,"rel":113},"https:\u002F\u002Fdevcenter.heroku.com\u002Farticles\u002Fnodejs-support#heroku-specific-build-steps",[106],"ビルドステップ","​を実行した後、 Heroku はアプリケーションをデプロイする前に、",[28,117,118],{},"​devDependencies​"," に宣言されているパッケージを取り除きます。",[10,121,122,123,126,127,130],{},"対策としては",[28,124,125],{},"package.json","をいじって",[28,128,129],{},"dependencies","に移動します。デフォルトでLaravel Mixはdevの方にインストールされます。それを移動してプッシュすればひとまずLaravel Mixのビルドがうまくいきます。",[57,132,134],{"id":133},"原因その３npm-run-productionを動かすように設定","原因その３：npm run productionを動かすように設定",[10,136,137,138,141],{},"その２に加えて、今度はherokuデプロイの際にLaravel Mixのビルドスクリプトがキックされるように設定します。herokuはNode.jsのプロジェクトがあり、そのスクリプトに",[28,139,140],{},"npm run build","がある場合はそれを実行してくれます。",[10,143,144,145,147,148,151],{},"初期の",[28,146,125],{},"のスクリプトは",[28,149,150],{},"build","がないので、mixが実行されません。",[153,154,160],"pre",{"className":155,"code":156,"filename":157,"language":158,"meta":159,"style":159},"language-json shiki shiki-themes material-theme-ocean","\"scripts\": {\n    \"dev\": \"npm run development\",\n    \"development\": \"cross-env NODE_ENV=development node_modules\u002Fwebpack\u002Fbin\u002Fwebpack.js --progress --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js\",\n    \"watch\": \"npm run development -- --watch\",\n    \"watch-poll\": \"npm run watch -- --watch-poll\",\n    \"hot\": \"cross-env NODE_ENV=development node_modules\u002Fwebpack-dev-server\u002Fbin\u002Fwebpack-dev-server.js --inline --hot --disable-host-check --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js\",\n    \"prod\": \"npm run production\",\n    \"production\": \"cross-env NODE_ENV=production node_modules\u002Fwebpack\u002Fbin\u002Fwebpack.js --no-progress --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js\"\n},\n","pakage.json","json","",[28,161,162,184,210,231,252,273,294,315,334],{"__ignoreMap":159},[163,164,167,171,175,177,181],"span",{"class":165,"line":166},"line",1,[163,168,170],{"class":169},"sAklC","\"",[163,172,174],{"class":173},"sfyAc","scripts",[163,176,170],{"class":169},[163,178,180],{"class":179},"s0W1g",": ",[163,182,183],{"class":169},"{\n",[163,185,187,190,194,196,199,202,205,207],{"class":165,"line":186},2,[163,188,189],{"class":169},"    \"",[163,191,193],{"class":192},"sJ14y","dev",[163,195,170],{"class":169},[163,197,198],{"class":169},":",[163,200,201],{"class":169}," \"",[163,203,204],{"class":173},"npm run development",[163,206,170],{"class":169},[163,208,209],{"class":169},",\n",[163,211,213,215,218,220,222,224,227,229],{"class":165,"line":212},3,[163,214,189],{"class":169},[163,216,217],{"class":192},"development",[163,219,170],{"class":169},[163,221,198],{"class":169},[163,223,201],{"class":169},[163,225,226],{"class":173},"cross-env NODE_ENV=development node_modules\u002Fwebpack\u002Fbin\u002Fwebpack.js --progress --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js",[163,228,170],{"class":169},[163,230,209],{"class":169},[163,232,234,236,239,241,243,245,248,250],{"class":165,"line":233},4,[163,235,189],{"class":169},[163,237,238],{"class":192},"watch",[163,240,170],{"class":169},[163,242,198],{"class":169},[163,244,201],{"class":169},[163,246,247],{"class":173},"npm run development -- --watch",[163,249,170],{"class":169},[163,251,209],{"class":169},[163,253,255,257,260,262,264,266,269,271],{"class":165,"line":254},5,[163,256,189],{"class":169},[163,258,259],{"class":192},"watch-poll",[163,261,170],{"class":169},[163,263,198],{"class":169},[163,265,201],{"class":169},[163,267,268],{"class":173},"npm run watch -- --watch-poll",[163,270,170],{"class":169},[163,272,209],{"class":169},[163,274,276,278,281,283,285,287,290,292],{"class":165,"line":275},6,[163,277,189],{"class":169},[163,279,280],{"class":192},"hot",[163,282,170],{"class":169},[163,284,198],{"class":169},[163,286,201],{"class":169},[163,288,289],{"class":173},"cross-env NODE_ENV=development node_modules\u002Fwebpack-dev-server\u002Fbin\u002Fwebpack-dev-server.js --inline --hot --disable-host-check --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js",[163,291,170],{"class":169},[163,293,209],{"class":169},[163,295,297,299,302,304,306,308,311,313],{"class":165,"line":296},7,[163,298,189],{"class":169},[163,300,301],{"class":192},"prod",[163,303,170],{"class":169},[163,305,198],{"class":169},[163,307,201],{"class":169},[163,309,310],{"class":173},"npm run production",[163,312,170],{"class":169},[163,314,209],{"class":169},[163,316,318,320,322,324,326,328,331],{"class":165,"line":317},8,[163,319,189],{"class":169},[163,321,80],{"class":192},[163,323,170],{"class":169},[163,325,198],{"class":169},[163,327,201],{"class":169},[163,329,330],{"class":173},"cross-env NODE_ENV=production node_modules\u002Fwebpack\u002Fbin\u002Fwebpack.js --no-progress --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js",[163,332,333],{"class":169},"\"\n",[163,335,337,340],{"class":165,"line":336},9,[163,338,339],{"class":169},"}",[163,341,209],{"class":179},[10,343,344],{},"ちょうどprodというのがあるのでbuildに変えてやりましょう。",[153,346,348],{"className":155,"code":347,"filename":157,"language":158,"meta":159,"style":159},"\"scripts\": {\n    \"dev\": \"npm run development\",\n    \"development\": \"cross-env NODE_ENV=development node_modules\u002Fwebpack\u002Fbin\u002Fwebpack.js --progress --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js\",\n    \"watch\": \"npm run development -- --watch\",\n    \"watch-poll\": \"npm run watch -- --watch-poll\",\n    \"hot\": \"cross-env NODE_ENV=development node_modules\u002Fwebpack-dev-server\u002Fbin\u002Fwebpack-dev-server.js --inline --hot --disable-host-check --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js\",\n    \"build\": \"npm run production\",\n    \"production\": \"cross-env NODE_ENV=production node_modules\u002Fwebpack\u002Fbin\u002Fwebpack.js --no-progress --config=node_modules\u002Flaravel-mix\u002Fsetup\u002Fwebpack.config.js\"\n},\n",[28,349,350,362,380,398,416,434,452,470,486],{"__ignoreMap":159},[163,351,352,354,356,358,360],{"class":165,"line":166},[163,353,170],{"class":169},[163,355,174],{"class":173},[163,357,170],{"class":169},[163,359,180],{"class":179},[163,361,183],{"class":169},[163,363,364,366,368,370,372,374,376,378],{"class":165,"line":186},[163,365,189],{"class":169},[163,367,193],{"class":192},[163,369,170],{"class":169},[163,371,198],{"class":169},[163,373,201],{"class":169},[163,375,204],{"class":173},[163,377,170],{"class":169},[163,379,209],{"class":169},[163,381,382,384,386,388,390,392,394,396],{"class":165,"line":212},[163,383,189],{"class":169},[163,385,217],{"class":192},[163,387,170],{"class":169},[163,389,198],{"class":169},[163,391,201],{"class":169},[163,393,226],{"class":173},[163,395,170],{"class":169},[163,397,209],{"class":169},[163,399,400,402,404,406,408,410,412,414],{"class":165,"line":233},[163,401,189],{"class":169},[163,403,238],{"class":192},[163,405,170],{"class":169},[163,407,198],{"class":169},[163,409,201],{"class":169},[163,411,247],{"class":173},[163,413,170],{"class":169},[163,415,209],{"class":169},[163,417,418,420,422,424,426,428,430,432],{"class":165,"line":254},[163,419,189],{"class":169},[163,421,259],{"class":192},[163,423,170],{"class":169},[163,425,198],{"class":169},[163,427,201],{"class":169},[163,429,268],{"class":173},[163,431,170],{"class":169},[163,433,209],{"class":169},[163,435,436,438,440,442,444,446,448,450],{"class":165,"line":275},[163,437,189],{"class":169},[163,439,280],{"class":192},[163,441,170],{"class":169},[163,443,198],{"class":169},[163,445,201],{"class":169},[163,447,289],{"class":173},[163,449,170],{"class":169},[163,451,209],{"class":169},[163,453,454,456,458,460,462,464,466,468],{"class":165,"line":296},[163,455,189],{"class":169},[163,457,150],{"class":192},[163,459,170],{"class":169},[163,461,198],{"class":169},[163,463,201],{"class":169},[163,465,310],{"class":173},[163,467,170],{"class":169},[163,469,209],{"class":169},[163,471,472,474,476,478,480,482,484],{"class":165,"line":317},[163,473,189],{"class":169},[163,475,80],{"class":192},[163,477,170],{"class":169},[163,479,198],{"class":169},[163,481,201],{"class":169},[163,483,330],{"class":173},[163,485,333],{"class":169},[163,487,488,490],{"class":165,"line":336},[163,489,339],{"class":169},[163,491,209],{"class":179},[10,493,494,495,497,498,500],{},"こうすれば",[28,496,140],{}," が ",[28,499,310],{}," を実行して本番用のアセットを作ってくれます。これで解決です。",[20,502,503],{"id":503},"ビルドアセットがうまく出力されない時に考えるべきこと",[10,505,506],{},"今回はいくつかのファイルをビルドする必要があり、デプロイ作業が自動で行われる状況でした。開発環境ではアセットがあるのに、本番だとなくなっているという場合は以下のことを考えましょう。",[508,509,510,514,517],"ul",{},[511,512,513],"li",{},"ファイルはある？（サーバーに入ってlsしてチェック）",[511,515,516],{},"ビルドに必要なモジュールがインストールされているか？",[511,518,519],{},"ビルドスクリプトはキックされているか？",[10,521,522,523,527],{},"大体こうゆうときはビルドがうまくいっていないので、そこからチェックしていくといいです。ちなみに私が検索した時のワードは ",[524,525,526],"strong",{},"「heroku laravel mix ビルド」"," でした。それではまた。",[529,530,531],"style",{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":159,"searchDepth":212,"depth":212,"links":533},[534,535,540],{"id":22,"depth":186,"text":23},{"id":40,"depth":186,"text":41,"children":536},[537,538,539],{"id":59,"depth":212,"text":60},{"id":69,"depth":212,"text":70},{"id":133,"depth":212,"text":134},{"id":503,"depth":186,"text":503},[542],"devstack","2021-03-27","md",null,{},true,"\u002Farticles\u002Flaravel-mixx-heroku-fail",{"title":5,"description":5},"articles\u002Flaravel-mixx-heroku-fail",[552,553,554,555],"js","webpack","laravel","infrastructure","_mix\u002F8_laravel-icon.3f70de72f3.jpg","zvECdzfredOonr51btVrUrKqFCKw247gmW-jXba47XU",1782886885013]