ブログ
![](https://wingdoor.co.jp/wp-content/themes/wingdoorco/img/blog/img_fv_pc.png)
![](https://wingdoor.co.jp/wp-content/themes/wingdoorco/img/blog/img_fv_sp.png)
AWS EC2のLaravel環境でnpm run devが終わらない
EC2上のLaravelアプリをLaravel Mixでコンパイルした際に起きた問題と対処方法について記載します。
いずれもローカル環境では起きなかった問題で、調査に手間取ってしまいました。
Laravel9からViteがデフォルトのビルドツールとなっていますが、Laravel Mixを使う場面もまだあると思いますので、同じような問題に遭遇した方の助けになれば嬉しいです。
環境
- Amazon EC2 t3a.micro
- Laravel 9.43.0
- Node 16.19.0
- npm 8.19.3
諸々の設定が完了し、Gitからソースを取得しnpm run dev
するだけの状態です。
テスト環境なのでデプロイツールなども使わず手動でパパッとやろう、と軽く考えていたら予想以上に手こずってしまいました…。
問題1:コンパイルが95%で止まる
下記画像のように”emitting (95%)”で止まってしまい、何分待っても終わる気配がありません。
![](https://wingdoor.co.jp/wp-content/uploads/2023/02/laravel-mix-95.png)
以下の情報を参考に、webpack.mix.js
にsetPublicPath
を設定することで解消しました。
Stuck at 95% Emitting
https://github.com/laravel-mix/laravel-mix/issues/1126#issuecomment-325581328
const mix = require('laravel-mix');
const webpack = require('./webpack.config');
mix.webpackConfig(Object.assign(webpack))
.setPublicPath('public') // この設定を追加
.js('resources/js/app.js', 'public/js')
.vue();
問題2:コンパイルが10%で止まる
95%で止まることがなくなり安心したのも束の間、今度は10%で固まってしまうようになりました。
固まった時に表示されているモジュール(下記画像ではconsole.js)に問題があるのかと考えましたが、何度やってみても共通しているのは10%で固まってしまうという点だけで、表示されるモジュールはバラバラでした。
![](https://wingdoor.co.jp/wp-content/uploads/2023/02/laravel-mix-10.png)
色々調べた結果、どうやらメモリ不足が発生していたようでした。
t3a.microのメモリは1GBですのでメモリが不足しやすく、対処法としてSwap領域を作成したところ無事コンパイルが完了するようになりました。
Swap領域とは
https://wa3.i-3-i.info/word1721.html
Swap領域の作成方法
以下、rootユーザーで実行します。
メモリの確認
Swapは0Bです。
# free -h
total used free shared buff/cache available
Mem: 943M 79M 704M 6.6M 159M 724M
Swap: 0B 0B 0B
Swapファイル作成
今回は1GBを確保します。
# dd if=/dev/zero of=/swapfile bs=1M count=1024
1024+0 レコード入力
1024+0 レコード出力
1073741824 バイト (1.1 GB) コピーされました、 6.76136 秒、 159 MB/秒
# chmod 600 /swapfile
Swap領域の割り当て、有効化
# mkswap /swapfile
スワップ空間バージョン 1 を設定します。サイズ = 1024 MiB (1073737728 バイト)
ラベルはありません, UUID=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
# swapon /swapfile
自動割り当て設定
/etc/fstab
を編集して、インスタンスを再起動した際に自動でSwap領域が割り当てられるように設定します。
#
UUID=OOOOOOOO-OOOO-OOOO-OOOO-OOOOOOOOOOOO / xfs defaults,noatimme 1 1
/swapfile swap swap defaults 0 0 # 末尾にこの1行を追加
インスタンスを再起動して、メモリが確保されていれば完了です。
# reboot
# free -h
total used free shared buff/cache available
Mem: 943M 755M 67M 292K 120M 58M
Swap: 1.0G 5.0M 1.0G
スワップファイルを使用して、Amazon EC2 インスタンスのスワップ領域として機能するようにメモリを割り当てるにはどうすればよいですか?
https://aws.amazon.com/jp/premiumsupport/knowledge-center/ec2-memory-swap-file/
Swap領域の削除
以下の手順ですぐ削除もできますので、一時的にメモリを増やしたい場合にも使えます。
- 自動割り当ての設定を削除
#
UUID=OOOOOOOO-OOOO-OOOO-OOOO-OOOOOOOOOOOO / xfs defaults,noatimme 1 1
- Swapの無効化
# swapoff /swapfile
# swapon -s
何も表示されないことを確認する
- Swapファイルを削除・インスタンス再起動
# rm /swapfile
# reboot
株式会社ウイングドアは福岡のシステム開発会社です。
現在、私達と一緒に"楽しく仕事が出来る仲間"として、新卒・中途採用を絶賛募集しています!
ウイングドアの仲間達となら楽しく仕事できるかも?と興味をもった方、
お気軽にお問い合わせ下さい!