trapコマンドを使ってプロセス終了時に特定のファイルを削除する

特定のプロセスが終了したのを検知して、その時に特定のファイルを削除したいという要件が出てきた。

trapコマンドを使うとスッキリ書けていい感じにできるよと教えてもらったのでメモしておく。

最初に必要になった背景から記載するが、興味ない場合は「2. trapコマンドを使う」までスキップ

目次

背景

MSWをプロダクトに導入した。

Mock Service Worker
Mock Service Worker Seamless API mocking library for browser and Node.

これセットアップのために以下のコマンドを叩く必要があって、そうするとpublicディレクトリ配下にmockServiceWorker.jsというworker起動用のスクリプトが自動生成される。

npx msw init public/ --save

このファイル自体は特に触ることはないんだが、こんな気になる一文が書いてあった

Please do NOT serve this file on production.

publicディレクトリ配下に作られるのに本番環境にserveするなとは…
とか思いつつ、まあ出力先変えられるっぽいしそれで対応するかと思ったんだが、MSW起動時だけそのファイルが作られるようにすればいいよと教えてもらったのでそれを実現したってのが本記事の主旨。

つまり今回やりたいことは以下のようになる

  • npm scriptsでMSWと共に開発サーバーを起動するコマンドを用意する
  • そのコマンド実行時にmockServiceWorker.jsを作成する
  • サーバー起動しているプロセスが終了した時にmockServiceWorker.jsを削除する

問題は最後の工程である。
プロセス終了を検知するってどうやってやるんだ…

この工程をもう少し抽象化すると、「特定のシグナル(今回はプロセス終了)を検知して、特定のコマンドを実行する」である

これを実現するのがtrapコマンドだった

trapコマンドを使う

先述した通り、trapコマンドは特定のシグナルを検知して、特定のコマンドを実行できる。

trapコマンドの主な使い方は以下の通りである

trap [実行したいコマンド] [シグナル]

今回はプロセス終了のシグナルを検知してファイル削除したいので、以下のようなコマンドを作った。

trap 'rm public/mockServiceWorker.js' EXIT

肝心の部分が作れたので、改めて今回欲しかったスクリプトの全体を書くと以下のようになった

"dev": "next dev",
"dev:mock": "NEXT_PUBLIC_USE_MSW=true trap 'rm public/mockServiceWorker.js' EXIT; msw init ./public && next dev",

dev:mockの時には環境変数を設定してサーバーを起動させている。
trapコマンドの部分とその後のスクリプトは連続して実行したいので;で繋いでる。
サーバー起動前にmsw init ./public --saveしている。

これでプロセス終了したらファイルは削除されてクリーンになる。

おまけ

これ書いた後にMSWのissueで同じような悩みのものを見つけた

GitHub
Question: How can I prevent mockServiceWorker.js from being added to build folder? · Issue #291 · ms... Hi. I have initialised the mock service worker for browser integration in my React app and is in the public folder. The file states that it shouldn't be dep...

ここに書いてある方法はprebuildでbuildする前に該当ファイルを削除すればいいよってこと
確かにそれでも良かったなーと思いながら、まあnpm scripts使ってbuildした場合は意味なくなっちゃうし(そんなケースあるか…?)と思ってまあ今回の方法でいいやってなった

あとメンテナーの人がこんな感じで書いてて、んーその温度感ならPlease do NOT serve this file on production.はちょっと語気強くない?wと思ったがまあserveしないに越したことはないな

However, since the worker script is in the public directory, it most likely gets copied to the built version of the application as well. While this has no negative effect on its own (considered you’ve enabled mocking conditionally in your application’s code), it still introduces an unused build file, which may get confusing.

https://github.com/mswjs/msw/issues/291

あと今回のに限らずなんだけど、issueとかのコメントに対して👍はわかるが、👎を見るとなんか悲しくなるw
😕とかならわかるんだけどこの辺もうちょいなんとかならんのかなーと個人的には思うんだが、GitHubの人その他ユーザーは別になんとも思わんのかなー

まとめ

シェルスクリプト普段全然使わないからそもそもどういうのがあるのかすらわからぬ

一覧ざっと見ておくだけでも引き出し増えそうだなーとは思うものの多分無機質であんま頭に入らなさそう

とりあえず使ったものからちゃんと引き出しに入れてこう

この記事が参考になったからコーヒーくらいおごってもいいぜという方は、以下からサポートいただけると次の記事書くモチベになりますのでよろしくお願いします

Buy Me A Coffee

参考

@IT
【 trap 】コマンド――シグナルを受け取った際の動作を設定する 本連載は、Linuxのコマンドについて、基本書式からオプション、具体的な実行例までを紹介していきます。今回は、シグナルを受け取った際の動作を設定、表示する「trap」コ...
Mock Service Worker
Mock Service Worker Seamless API mocking library for browser and Node.
GitHub
Question: How can I prevent mockServiceWorker.js from being added to build folder? · Issue #291 · ms... Hi. I have initialised the mock service worker for browser integration in my React app and is in the public folder. The file states that it shouldn't be dep...
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次