Windows

Windows 11 + Docker / Laravel + Vue.js 環境構築ガイド #6

本記事は Windows 11 + Docker / Laravel + Vue.js 環境構築ガイド #5 の続きです。

本記事では、Docker操作コマンド、トラブルシューティング、バックアップと復元コマンドについて説明します。

6-1. Docker操作コマンド

コンテナ内に入る
docker exec -it laravel-test-web bash

コンテナから出る
exit

環境の再ビルド
docker compose down
docker compose build –no-cache
docker compose up -d

6-2. トラブルシューティング: DBが起動しない

DB コンテナがすぐに終了してしまう場合、データファイルの不整合が疑われます。

# DBデータを削除(初期化されます)
sudo rm -rf /home/linux/projects/laraveltest/docker/db/data

※削除後はバックアップからリストアを行って復元します。

バックアップと復元

7-1. データベース (MySQL)

バックアップ: (Bash)

# プロジェクトフォルダへ移動して実行
cd /home/linux/projects
docker exec laravel-test-db mysqldump -u root -p"admin" laraveltestdb > laraveltestdb.sql

上記を実行すると \\wsl.localhost\Ubuntu\home\linux\projects\laraveltestdb.sql が生成されます。

\wsl.localhost\Ubuntu\home\linux\projects\ laraveltestdb20250101.sql

※windows環境からwls2(ubuntu)環境にsqlを移行する場合、windowsで上記を実行するのではなく、linux(\wsl.localhost\Ubuntu\home\linux\projects)などからubuntuのコマンドで上記を実行する必要があります。

復元: (Bash)

docker exec -i laravel-test-db mysql -u root -p"admin" laraveltestdb < laraveltestdb.sql



7-2. WSL環境全体のバックアップ

Windows PowerShellで実行します。

バックアップ (Export):

  1. Docker と WSL を停止します。
wsl --shutdown

Windows のタスクトレイからも Docker Desktop を終了してください。

  1. Ubuntu のディストリビューション名を確認します。
wsl -l -v
  1. バックアップ作成 (例: C:\backup\ubuntu.tar)
wsl --export Ubuntu C:\backup\ubuntu.tar


復元 (Import):

  1. 既存の Ubuntu を登録解除(削除)します。
wsl --unregister Ubuntu

初回インストール時は以下にデータが保存されますが、以下のデータも削除されます。
C:\Users\user_name\AppData\Local\Packages\CanonicalGroupLimited.Ubuntu_79rhkp1fndgsc\LocalState\ext4.vhdx

  1. インポート (インストール先: C:\wsl\Ubuntu)
wsl --import Ubuntu C:\wsl\Ubuntu C:\backup\ubuntu.tar

以下にインストールされます。
C:\wsl\Ubuntu\ext4.vhdx

  1. デフォルトユーザーを元に戻します。
ubuntu config --default-user linux

次回は、Vue.jsの導入方法について解説します。

木曜日担当:nishida



Windows 11 + Docker / Laravel + Vue.js 環境構築ガイド #5

本記事は Windows 11 + Docker / Laravel + Vue.js 環境構築ガイド #4 の続きです。

開発環境の設定

5-1. Git設定

  1. Windows の Zone.Identifier 削除:

sudo find . -type f -name '*:Zone.Identifier' -exec rm {} \;

  1. .gitignore に不要なファイルを追加します。
  • 以下を .gitignore に追記:

    /docker/db/data

※WSL 上のファイル編集のため、Ubuntuターミナルでプロジェクトへ移動し、VS Code を起動します。

cd ~/projects/laravel_project
code .


左下に [WSL: Ubuntu] と表示された状態でVS Codeが起動できれば成功です。

権限で編集・保存ができない場合は以下を実行:

sudo chown -R $USER:$USER .

  1. Git ユーザー設定(例):
git config --global user.name "山田太郎"
git config --global user.email "yamada@example.com"


5-2. DB接続テスト

  1. .env ファイルを編集し、Docker の DB 設定に合わせます。

DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=laraveltestdb
DB_USERNAME=root
DB_PASSWORD=admin

  1. 接続テスト用ルートを routes/web.phpに追加します。

use Illuminate\Support\Facades\DB;

Route::get('/dbtest', function () {
    try {
        $result = DB::select('SELECT 1');
        return 'DB接続成功!結果: ' . json_encode($result);
    } catch (\Exception $e) {
        return 'DB接続エラー: ' . $e->getMessage();
    }
});

  1. http://localhost:8000/dbtest にアクセスをおこない 「DB接続成功!」と表示されれば OK です。

次回は、 Docker操作コマンドについて解説します。

木曜日担当:nishida



Windows 11 + Docker / Laravel + Vue.js 環境構築ガイド #4

本記事は Windows 11 + Docker / Laravel + Vue.js 環境構築ガイド #3 の続きです。

4-1. Laravelのインストール

  1. コンテナ内に入り、Laravel をインストールします。
docker exec -it laravel-test-web bash
composer create-project laravel/laravel="8.*" .
#laravel10の場合、PHP8.2が必要
composer create-project laravel/laravel="10.*" .
  1. Docker コンテナの Bash モードを終了します。
exit

4-2. ファイルの移動

Laravel プロジェクトは \\wsl.localhost\Ubuntu\home\linux\projects\laravel_project\html 内に生成されるため、html 内の全ファイルを 1 階層上(プロジェクトルート)に移動します。

# ファイルを1階層上へ移動
sudo mv /home/linux/projects/laravel_project/html/* /home/linux/projects/laravel_project/

# ドットファイル(.envなど)も移動
sudo mv /home/linux/projects/laravel_project/html/.* /home/linux/projects/laravel_project/ 2>/dev/null

4-3. 権限とログ設定

storage ディレクトリへの書き込み権限エラー (Permission denied) 対策です。

sudo chmod -R 777 storage bootstrap/cache

ブラウザで http://localhost:8000/ にアクセスし、Laravel の初期画面が表示されることを確認します。

次回は、 開発環境の設定方法を解説します。

木曜日担当:nishida



Windows 11 + Docker / Laravel + Vue.js 環境構築ガイド #3

本記事は Windows 11 + Docker / Laravel + Vue.js 環境構築ガイド #2 の続きです。

Laravelプロジェクトの基盤構築

3-1. ディレクトリ作成

エクスプローラーのアドレスバーに \\wsl.localhost\Ubuntu と入力し、Linuxファイルシステムにアクセスします。
以下の階層を作成します。
home/linux/projects/laravel_project

3-2. パーミッション設定 (重要)

Dockerがファイルを書き込めるように、所有権を変更します。Ubuntuターミナル (Bash)で以下を実行します。

# プロジェクトディレクトリへ移動
cd ~/projects/laravel_project

# 所有権を現在のユーザーに変更
sudo chown -R $USER:$USER .

3-3. Dockerコンテナの起動

プロジェクトディレクトリ ~/projects/laravel_project に、本番環境と同じセットアップのDocker設定ファイル(docker-compose.yml 等)の配置をおこない、コンテナを起動します。

sudo docker compose up -d

3-4. ツール類の配置 (Adminer)

簡易的なDB管理ツール adminer.php を使用する場合は配置します。

配置場所: \\wsl.localhost\Ubuntu\home\linux\projects\laravel_project\public\adminer.php

アクセス: http://localhost:8000/adminer.php

ログイン情報例:

System: MySQL
Server: db
Username: root
Password: admin
Database: laraveltestdb

次回は、 Laravelのインストール方法を解説します。

木曜日担当:nishida



Windows 11 + Docker / Laravel + Vue.js 環境構築ガイド #2

本記事は Windows 11 + Docker / Laravel + Vue.js 環境構築ガイド #1 の続きです。

WSL2 (Ubuntu) のセットアップ

Linux 環境の構築を行います。

WSLの更新とUbuntuの導入
PowerShellを管理者権限で開き、以下のコマンドでWSLのカーネルを更新します。

wsl --update



次に、Microsoft Store アプリを開き、「Ubuntu」を検索してインストールします。

初期設定

インストール完了後、Ubuntu アプリを起動します。
コンソールが開くので、username と passwordを設定します。
設定後、Windowsターミナルでタブを開く際に、PowerShell やコマンドプロンプト以外に Ubuntuの選択肢が追加されているか確認します。

Docker Desktopの設定

Docker Desktopを起動します。
Settings (歯車アイコン) > Resources > WSL integration を開きます。
「Enable integration with my default WSL distro」にチェックが入っているか確認し、UbuntuのスイッチをONにします。

次回は、 Laravelプロジェクトの基盤構築の手順を解説します。


木曜日担当:nishida




アプリ関連ニュース

お問い合わせはこちら

お問い合わせ・ご相談はお電話、またはお問い合わせフォームよりお受け付けいたしております。

tel. 06-6454-8833(平日 10:00~17:00)

お問い合わせフォーム