新しいPCにLaravel環境を構築した手順のメモ（Docer、Ubnatsu、WSL）

2025.07.01

ノートPCでのLaravel開発がスペック不足になり、作業に支障がでるほど重たくなってきた。

そこで最近全く使っていなかったゲーミングPCで作業をしようと思い、環境を再構築したのだが、エラートとの戦いで丸一日かかってしまった。

今後も同じことが起きると思うので、自分用に環境移行のメモを残しておく。

※ちなみに、各環境は2025/07/01時点の最新のものとなる。

Table of Contents

①Docker、Ubnatsu、WSLを新しいPCでインストール

自分が使っている環境は下記の通りだ。

  • Docker Desktop
  • WSL2（Ubuntu）
  • 必要であれば VS Code + WSL拡張

これらをインストールしてtest-projectを作成し、laravelが今の環境でも問題なく動くかをチェックするところからスタートしよう。

もし、この時点でエラーが出る場合は、再インストールしてもいいだろう。

②資材をGitからクローン

旧PCでとっておいたgitのバックアップを新PCに移す

git clone https://github.com/<ユーザー>/<プロジェクト>.git

新PCでは<プロジェクト>のフォルダは作らず、そのままクローンしてOK
<プロジェクト>というフォルダはクローン時に自動で作られるからだ。

③プロジェクトが無事に入ったら、次にコマンドでncvを生成

cd プロジェクト名

cp .env.example .env

生成した.env は下記がコメントアウトされているので、旧PCの値と同じにすること（もしくはdocker-compose.ymlを参照）

DB_CONNECTION=mysql
DB_HOST=mysql
DB_DATABASE=プロジェクト名
DB_USERNAME=sail
DB_PASSWORD=password

これが間違っているとエラーが出るので要注意。

④sail コマンド等を入れる

pckage.jsonなどをクローンすれば、JSなど必要なファイルをコマンドを打つだけで自動で読み取ってインストールしてくれる。

しかし、docker-compose.yml などだけでは sailコマンドやnode.jsなどは自動でインストールされない。

つまり、mode.jsやsailコマンドなどは自分で別途ダウンロードが必要になる

alias sail='[ -f vendor/bin/sail ] && bash vendor/bin/sail'
echo "alias sail='[ -f vendor/bin/sail ] && bash vendor/bin/sail'" >> ~/.bashrc
source ~/.bashrc

Laravel公式の Docker 環境ツールで、sail コマンドで各種操作ができる。

さらにnode.jsもインストールする

# Ubuntu（WSL）に登録されているソフトの最新情報を取得
sudo apt update
# Node.js と npm（Node Package Manager）を Ubuntu にインストール

sudo apt install nodejs npm
# Git に入っている package.json を元に、必要な JavaScript ライブラリをインストール

npm install
Vite（または Laravel Mix）を使って、JS や CSS を本番用にビルド

npm run build

⑤npm run dev エラー対処（パーミッション）

これで動くと思いきや、カキのパーミッションエラーが発生した。

EACCES: permission denied, open ‘/var/www/html/node_modules/.vite-temp/…’

原因は：node_modules/.vite-temp に書き込み権限がないからだ（前PCで作成されたまま）。

node_modules の所有者が root などになっていると発生するようだ。

下記のコマンドを打って権限を解決しよう

sudo chown -R $USER:$USER node_modules
rm -rf node_modules/.vite-temp
mkdir -p node_modules/.vite-temp
sudo chown -R $USER:$USER node_modules/.vite-temp
⑥Vite の HMR 表示エラー

これは個人的なエラーだ。

vite.config.js の HMR 設定にIPアドレスが指定されていたため、localhostでの表示がバグってしまった。

理由としては、localホストだとスマホ端末での表示が確認できなかったので、IPを指定していた

export default defineConfig({
  plugins: [laravel({
    input: ['resources/css/app.css', 'resources/js/app.ts'],
    refresh: true,
  })],
  server: {
    host: '0.0.0.0',
    hmr: {
　　　// host: '192.111.11.1',←これが原因（旧PCのIP）
      host: 'localhost', // ← PCに合わせて変更
    },
  },
});

あとはいつも通り、sail npm run dev　で動くはずだ。とりあえず、移植が成功し、今のところ問題なく動いている。

ちなみに、「Dockerfile.save」という謎ファイルが自動生成されるが、これは一時的に生成される記録用ファイルみたいなものなので、削除してOKだ。

ローカルへの移行だけでも一苦労だったので、本番環境への移行の時は、今回以上のトラブルが発生する覚悟はしておいたほうがいいかもしれない。

関連記事

PIC UP