npm において、vite: command not found となり、開発サーバを立てられず何もできない問題が起こる

この記事を作った動機 Linux 環境にて簡単に Web アプリを作ろうとしたところ、以下のようになって開発サーバを立ち上げられない事態になり、開発が続行できなくなったということがあって、だいぶ時間を溶かしたので記録を取る。 npm create vite@latest # ... # npx でも症状は同じ npm run dev # npm notice run rss-listing@0.0.0 dev # npm notice run vite # sh: 行 1: vite: command not found 簡単な結論 npm を使ったプロジェクトを立ち上げる際は、フォルダのパスに特殊文字が含まれていないか注意する。:がパスに含まれていた場合、npm はそれを自動的にエスケープするなどの処理をせずに、PATHを登録してしまう。npm の機構によって動的にPATHが正しく登録できないと、npm でインストールされたパッケージのバイナリやスクリプトが必要なタイミングで実行できず、開発を続行できない。BASH の PATH の解釈が不正なところで途切れて、npm の動作に必要なバイナリやスクリプトへのパスが通らず、動作が破綻する。問題の具体例は以下のとおりである。 問題のパスの例 # /home/useName/work/free/2026-08-18-09:16:14-1787012174/ProjectName/node_modules/.bin 問題のパスが npm(npx) によって、PATH に登録される例 # /home/useName/work/free/2026-08-18-09:16:14-1787012174/ProjectName/node_modules/.bin:/home/linuxbrew/.linuxbrew/bin:/home/linuxbrew/.linuxbrew/sbin:/opt/miniconda3/condabin:/usr/local/bin # 実際にはもっと長く続くが例として途中でちょん切っている。 BASH での解釈のされ方の例 # /home/useName/work/free/2026-08-18-09 # 意図しないところでパスがちょん切れる # 16 # 意図しないところでパスがちょん切れる # 14-1787012174/ProjectName/node_modules/.bin # /home/linuxbrew/.linuxbrew/bin # /home/linuxbrew/.linuxbrew/sbin # /opt/miniconda3/condabin # /usr/local/bin # ... なおこのような問題は、Windows など最初から、":" の文字がフォルダ名などに特殊文字として登録できないファイルシステムを使う環境では起こらないかもしれない。私が、普段の環境で使っているのは、Ext4 というファイルシステムであり、":“がファイル名やフォルダ名に含めることができ、問題が起こったものだと思われる。npm 関連のリポジトリにこれについて Issue を作ったり Pull Request を作るべきかは謎であるが、私はその点に関して自信は何もないので、結局何もしないだろう。 ...

2026年8月18日

http-server と SSL、CORS

この記事を作った動機 単にいちいちどうやって開発用に、http-server(npm経由) 上で SSL(HTTPS) を利用できるのかとか、とにかくCORSをどうにかしたいとき、忘れたときにいちいち調べるのはめんどいので、記録するだけ。 必要なもの http-server (via npm) mkcert まとめ http-server --cors --ssl --key ~/path/to/key/key.pem --cert ~/path/to/cert/cert.pem 個別のメモ書き CORSを何とかする http-server --cors SSL を何とかする mkcert -install # mkcertを初めて使うときのみ mkcert [開発用サーバのIP or localhost とか] http-server --ssl --key ~/path/to/key/key.pem --cert ~/path/to/cert/cert.pem 参考にしたサイトとか macos - enable CORS for local http server - Stack Overflow https://stackoverflow.com/questions/63297822/enable-cors-for-local-http-server (2025年6月13日) http-serverによるローカル HTTPS server 構築 (5分でできる) #Node.js - Qiita https://qiita.com/hbjpn/items/925c8012cd93d9165be6 (2025年6月13日)

2025年6月13日