## 模块 1: 准备运行环境

在本模块中，我们将启动 IDE，安装 Laravel 相关软件包，并导入数据，从而准备实验运行环境。

### 步骤 1. 在 IDE 中打开终端

+ 点击[VS Code](${LAB:HTTPS_REVERSE_PROXY_URL}?next=${LAB:"/vscode/?folder=/root/Mshop"|urlencode} "VS Code")在新的浏览器窗口中打开此实验的 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`。请先设置相应的权限，然后再执行该脚本，此过程大约需要一分钟。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=zh`。

  ```bash
  sed -i 's/^APP_LOCALE=en$/APP_LOCALE=zh/' .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
  ```

+ 在 VS Code 中将会弹出一个窗口，提示“Your application running on port 8000 is available. See all forwarded ports”，请点击“Open in Browser”。

  ![204_1_port_8000.png 85%](https://lab-static.pingcap.com/images/2026/2/5/4f681e3a7458c7631f2187c53100aa127e5bcaf4.png)

+ 接下来进入下一个模块。