はじめに
Laravel + Vue (Vite) をVPS上で開発しているのですが、これまで修正のたびにこんな手順を踏んでいました。
- ターミナルを開く
- SSHでVPSにログイン
- プロジェクトのディレクトリに移動
-
npm run devなどを実行
正直、めんどくさい。
「ローカルで保存したら勝手に反映されてほしい」し、「ビルドもボタン一発で終わらせたい」。
今日、PhpStormの機能をフル活用してこの苦行から卒業したので、その設定方法と**ドハマリしたポイント（パス設定や権限周り）**を共有します。
解決策の全体像
開発プロセスを以下の2つに分けました。
-
npm run dev(開発サーバー)
→ PM2 を使ってVPS上で常時起動させっぱなしにする。 -
npm run build(本番用ビルド)
→ PhpStormの「External Tools」 を使い、ボタン1つ（またはショートカット）で実行する。
1. 開発サーバーは PM2 で放置する
npm run dev はファイルの変更を監視してくれるものなので、そもそも毎回止めたり動かしたりする必要がありませんでした。
VPS上で pm2 を使って永続化します。
# プロジェクトへ移動
cd /var/www/html/my-project
# PM2で起動（名前をつけておくと管理しやすい）
pm2 start npm --name "vite-server" -- run dev
# サーバー再起動時も自動起動するように保存
pm2 save
pm2 startup
これで、PCを閉じようが何をしようが、Viteはずっと裏で働き続けてくれます。
2. ビルドは PhpStorm からワンクリックで
npm run build は常時起動する必要がないので、PhpStormの Remote SSH External Tools を使います。
設定手順
-
Settings>Tools>Remote SSH External Toolsを開く。 -
+ボタンで新規作成。 - 以下のように設定する。
-
Program:
npmのフルパス (後述) -
Arguments:
run build - Working directory: プロジェクトのフルパス
-
Program:
これで、メニューやショートカットキーから一発でVPS上のビルドが走るようになりました。
💀 ドハマリしたポイント（ここが重要）
設定自体は簡単そうに見えますが、いくつかエラーに遭遇しました。
トラップ1：ディレクトリが見つからない (No such file or directory)
原因： 思い込みでパスを入力していた。
VPSの構成によっては /var/www/プロジェクト名 ではなく /var/www/html/プロジェクト名 だったりします。
解決策：
横着せずにSSHターミナルで pwd を叩いて、正しいパスをコピペする。
トラップ2：npmが見つからない (env: npm: No such file)
原因： PhpStormからSSH接続する際、.bashrc などの環境変数が読み込まれず、npm コマンドへのパスが通っていない。特に NVM を使っている場合は要注意。
解決策：
Programの欄に npm とだけ書くのではなく、フルパスを書く。
ターミナルで以下を実行して調べる。
which npm
# 結果例: /home/user/.nvm/versions/node/v16.20.2/bin/npm
また、設定欄では ~ (チルダ) が使えないことがあるので、必ず /home/ユーザー名/... から記述すること。
トラップ3：権限エラー (EACCES: permission denied)
原因： 過去に sudo npm run build などをしてしまい、public/build フォルダの所有者が root になっていた。
PhpStormからは一般ユーザーとして接続しているため、上書きできずにエラーになった。
解決策：
chown コマンドで所有権を自分に戻す。
# -R で再帰的にディレクトリ内すべての権限を変更
sudo chown -R ユーザー名:ユーザー名 /var/www/html/プロジェクト名
まとめ
- 常時動くもの（Viteサーバ）は PM2 に任せる。
- たまに動かすもの（Build）は PhpStorm External Tools に登録する。
-
パスは絶対パス (
which npm,pwd) を調べて設定する。 -
権限エラー が出たら
chownを疑う。
これで「黒い画面」を開く回数が劇的に減り、開発に集中できるようになりました！