## モジュール 1: 環境の準備 このモジュールでは、IDEを起動し、Laravel関連のパッケージをインストールし、データをインポートしてハンズオン環境を準備します。 ### 手順 1. IDEの起動とIDE内ターミナルのオープン + [VS Code](${LAB:HTTPS_REVERSE_PROXY_URL}?next=${LAB:"/vscode/?folder=/root/Mshop"|urlencode} "VS Code") をクリックして、ラボ用IDEをブラウザで開きます。Web版VS Codeが完全に起動するまで約10秒ほどかかる場合があります。 + VS Code内で、 `≡`, `Terminal`、 そして `New Terminal` の順にクリックし、新しいターミナルを開きます。 ![204_1_1_2.png 85%](https://lab-static.pingcap.com/images/2026/2/6/ebe3aa625b02e3b8196d26caad77982a84d74dc3.png) ### 手順 2. Laravelに必要な`.env`ファイルを確認する + プロジェクトの `.env` ファイルの内容 (21 行目 ~ 26 行目) を調べると、現在の Laravel アプリケーションが MySQL データベースに接続されており、TiDB Cloudクラスター構成が現時点ではコメント アウトされていることがわかります。 ![204_1_mshop_env.png 30%](https://lab-static.pingcap.com/images/2026/2/6/7df7a2204611cec003d4ca647e162cb3ca2ef79b.png) ```output ... # local mysql DB_CONNECTION=mysql DB_PORT=3306 DB_HOST=mysql DB_USERNAME=lab DB_PASSWORD=labpass DB_DATABASE=shop ... ``` ### 手順 3. Laravel関連のパッケージをインストールし、データをインポートする + 以下のスクリプトをコピーし、VS Code ターミナルに貼り付けて実行すると、Laravel 関連パッケージがインストールされます。データのインポートとアプリケーションの起動を行うスクリプトは `prepare.sh` です。適切な権限を設定してからスクリプトを実行してください。この処理には約 1 分かかります。VS Code に「See text and images copied to the clipboard」というウィンドウが表示されるので、「Allow」をクリックしてください。 ![204_1_env.png 45%](https://lab-static.pingcap.com/images/2026/2/4/d75efd5c0d0364c66065e70c17e9443bd05e5d11.png) ```bash chmod +x prepare.sh ./prepare.sh ``` ```output Starting deployment process... ------------------------------------------------------------ [INFO] Executing: composer install ... ... [SUCCESS] Command completed successfully. ------------------------------------------------------------ [INFO] Executing: php artisan migrate ... INFO Preparing database. Creating migration table ............................................................................ 51.27ms DONE INFO Running migrations. 0001_01_01_000000_create_users_table ............................................................... 252.69ms DONE 0001_01_01_000001_create_cache_table ................................................................ 90.42ms DONE 0001_01_01_000002_create_jobs_table ................................................................ 190.90ms DONE 2025_12_20_112907_create_transactions_table ........................................................ 119.62ms DONE 2025_12_20_120002_create_products_table ............................................................. 82.09ms DONE 2026_01_03_040247_create_product_type_table ......................................................... 46.06ms DONE 2026_01_03_040331_create_pay_types_table ............................................................ 44.52ms DONE [SUCCESS] Command completed successfully. ------------------------------------------------------------ [INFO] Executing: mysql -u lab -plabpass -P3306 shop < initshop.sql ... [SUCCESS] Command completed successfully. ------------------------------------------------------------ [INFO] Executing: composer require intervention/image:^2 ... ... >>> All tasks completed successfully! <<< ``` ### 手順 4. Laravelアプリケーションを起動する + Laravel アプリケーションのインターフェースのテキストを日本語にしたい場合は、VS Code ターミナルで次のコマンドを実行して、`.env` ファイル内の `APP_LOCALE=en` を `APP_LOCALE=ja` に変更します。 ```bash sed -i 's/^APP_LOCALE=en$/APP_LOCALE=ja/' .env ``` + VS Code ターミナルで、コマンド `composer run dev` を実行して、Laravel アプリケーションを起動します。 ```bash composer run dev ``` ```output > Composer\Config::disableProcessTimeout > @php artisan serve --host=0.0.0.0 INFO Server running on [http://0.0.0.0:8000]. Press Ctrl+C to stop the server ``` + 「Your application running on port 8000 is available.」というポップアップ ウィンドウが表示されます。「Open in Browser」をクリックします。 ![204_1_port_8000.png 85%](https://lab-static.pingcap.com/images/2026/2/5/4f681e3a7458c7631f2187c53100aa127e5bcaf4.png) + 次のモジュールに進みましょう。