【Webpack】ビルド時のKilledエラー解決方法 swapfile

※本サイトにはプロモーション・広告が含まれています。

(最終更新月:2021年6月)

「Webサーバー上でWebpackをビルドすると「Killed」されてしまい先に進めない!!」

というエラーは僕だけでしょうか?

DjangoとReactでWebアプリ作成を試みているのですが、ビルドがうまくいかずプロダクトとしてうまくいきませんでした

試行錯誤の結果、解決方法が見つかりましたので、備忘録も兼ねて記事とします

同じように困っている方の役に立てば幸いです

筆者プロフィール

筆者プロフィールアイコン

【現職】プロダクトマネージャー

【副業】ブログ(月間17万PV)/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

「Killed」の原因

ズバリ、メモリー不足にありました

私は、DigitalOceanというクラウドサーバーサービスを利用しているのですが、あまりスペックの高くない最安値のシステムを導入しているため、起きてしまったようです

最安値月約500円のクラウドサービス「DigitalOcean」についてはこちら↓

解決策

ハードディスク上にSwapfileを作成

することでコストをかけずに、解決することができました

Swapfileとは

Swapfileは、ハードディスク上に存在し、メモリから一時的に仕事を請け負うことができるスペース、になります

メモリでの作業がいっぱいになってしまった際など、Swapfileというスペースを一時的に使うことでより多くの仕事ができるようになります

下記より、Linux Ubuntuのハードディスク上でSwapfileを作成する方法を一挙に解説していきます!

まずは確認しよう

swapfileの有無

swapfileが設定されていれば何かしらのOUTPUTがあります

$ swapon --show

何も出てこないければswapfileとして使われているスペースはないということになります

メモリーを調べる

$ free -h

【OUTPUT】

          total        used        free      shared  buff/cache   available
Mem: 981Mi 298Mi 468Mi 66Mi 214Mi 468Mi
Swap: 0B 0B 0B

最後の行、Swapは0になっていますね!

余っているスペースの確認

$ df -h

【OUTPUT】

Filesystem      Size  Used Avail Use% Mounted on
 udev            474M     0  474M   0% /dev
 tmpfs            99M   50M   49M  51% /run
 /dev/vda1        25G   12G   13G  48% /
 tmpfs           491M   16K  491M   1% /dev/shm
 tmpfs           5.0M     0  5.0M   0% /run/lock
 tmpfs           491M     0  491M   0% /sys/fs/cgroup
 /dev/vda15      105M  9.2M   96M   9% /boot/efi
 tmpfs            99M     0   99M   0% /run/user/0
 /dev/loop7       71M   71M     0 100% /snap/lxd/19647
 /dev/loop6       68M   68M     0 100% /snap/lxd/20326
 /dev/loop4       56M   56M     0 100% /snap/core18/2066
 /dev/loop5       33M   33M     0 100% /snap/snapd/12159
 /dev/loop2       56M   56M     0 100% /snap/core18/2074
 /dev/loop8       33M   33M     0 100% /snap/snapd/12398

この中で、/devに注目しましょう

/dev/vda1を見てみると、Sizeが25G、Usedが12G、Availが13Gになっているのがわかるでしょうか?

Filesystem      Size  Used Avail Use% Mounted on 
/dev/vda1        25G   12G   13G  48% /

Availが空きスペースなので13Gあることがわかります

大体1-2Gで良いかと思いますので、今回は2GのSwapfileを作ることにします

スペースを切り取り、swapfileへ

$ fallocate -l 2G /swapfile

ファイル権限の確認と変更

権限の確認をします

$ ls -lh /swapfile

【OUTPUT】

-rw-r--r-- 1 root root 2.0G Jul  1 09:33 /swapfile

下記に変更しましょう!

$ chmod 600 /swapfile

最終チェック↓

$ ls -lh /swapfile

【OUTPUT】

-rw------- 1 root root 2.0G Jul 1 09:33 /swapfile

変更完了です

swapスペースとして登録

$ mkswap /swapfile

【OUTPUT】

Setting up swapspace version 1, size = 2 GiB (2147479552 bytes)
 no label, UUID=0504794a-1c02-484c-9437-664b945639a2
$ swapon /swapfile

確認しよう

完了しているか確認します

$ swapon --show

【OUTPUT】

NAME      TYPE SIZE USED PRIO
 /swapfile file   2G   0B   -2

最初に実行したときは何も出てきませんでしたが、今回は出てきましたね!

$ free -h

【OUTPUT】

          total        used        free      shared  buff/cache   available
 Mem:          981Mi       295Mi       465Mi        66Mi       220Mi       468Mi
 Swap:         2.0Gi          0B       2.0Gi

最後の行でSwap 2ギガ、となっているのが確認できます

swapfileの設定変更

設定ファイル「/etc/fstab」を編集していきます

まずは念のためコピーします

$ cp /etc/fstab /etc/fstab.bak

必要な記述をしていきます

$ echo '/swapfile none swap sw 0 0' | sudo tee - /etc/fstab

swappinessの変更

確認

$ cat /proc/sys/vm/swappiness

【OUTPUT】

60

60→10へ変更する

$ sysctl vm.swappiness=10

【OUTPUT】

vm.swappiness = 10
$ nano /etc/sysctl.conf

一番下に追記します↓

vm.swappiness = 10

vfs_cache_pressureの変更

確認

$ cat /proc/sys/vm/vfs_cache_pressure

【OUTPUT】

100

100→50へ変更する

$ sysctl vm.vfs_cache_pressure=50

【OUTPUT】

vm.vfs_cache_pressure = 50
$ nano /etc/sysctl.conf

一番下に追記します↓

vm.vfs_cache_pressure = 50

以上となります

$ npm run build

などのビルドコマンドでいかがでしょうか??

当ブログは、「Webアプリを公開したい!」という方へ、DjangoをベースとしたWebアプリの作成方法、Webサーバーへの公開方法などを解説した記事をたくさんご用意しています

下記にて興味のあるものがございましたらぜひご覧ください!

Webサーバーの基本
Webサーバーとはなにか?仕組みや構築方法を知りたいですか?当ページでは、Webサーバーについて初心者向けに基本を解説している記事をまとめています。

最後までご覧頂きありがとうございました!!!

タイトルとURLをコピーしました