BLOG

ブログ

2023/03/29 技術系

AWS EC2のLaravel環境でnpm run devが終わらない

タグ

#AWS #Laravel

この記事を書いた人 F.T

EC2上のLaravelアプリをLaravel Mixでコンパイルした際に起きた問題と対処方法について記載します。
いずれもローカル環境では起きなかった問題で、調査に手間取ってしまいました。
Laravel9からViteがデフォルトのビルドツールとなっていますが、Laravel Mixを使う場面もまだあると思いますので、同じような問題に遭遇した方の助けになれば嬉しいです。

1 環境
2 問題１：コンパイルが95%で止まる
3 問題２：コンパイルが10%で止まる
- 3.1 Swap領域の作成方法
- 3.2 Swap領域の削除

環境

Amazon EC2 t3a.micro
Laravel 9.43.0
Node 16.19.0
npm 8.19.3

諸々の設定が完了し、Gitからソースを取得しnpm run devするだけの状態です。
テスト環境なのでデプロイツールなども使わず手動でパパッとやろう、と軽く考えていたら予想以上に手こずってしまいました…。

問題１：コンパイルが95%で止まる

下記画像のように”emitting (95%)”で止まってしまい、何分待っても終わる気配がありません。

以下の情報を参考に、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();

問題２：コンパイルが10%で止まる

95%で止まることがなくなり安心したのも束の間、今度は10%で固まってしまうようになりました。
固まった時に表示されているモジュール（下記画像ではconsole.js）に問題があるのかと考えましたが、何度やってみても共通しているのは10%で固まってしまうという点だけで、表示されるモジュールはバラバラでした。

色々調べた結果、どうやらメモリ不足が発生していたようでした。
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

株式会社ウイングドアは福岡のシステム開発会社です。
現在、私達と一緒に"楽しく仕事が出来る仲間"として、新卒・中途採用を絶賛募集しています！
ウイングドアの仲間達となら楽しく仕事できるかも？と興味をもった方、
お気軽にお問い合わせ下さい！

一覧へ戻る

ブログ