---
# System prepended metadata

title: '使用 Docker 部署專案的學習筆記04：<br>使用 Docker Compose 建立環境（下） (MySQL-MariaDB, PHP-Apache, Apache, phpMyAdmin)'
tags: [ubuntu, phpmyadmin, apache, 後端, 佈署, vue, MariaDB, 筆記, docker-compose, laravel, Docker, 前端, php]

---

# 使用 Docker 部署專案的學習筆記04：<br>使用 Docker Compose 建立環境（下） (MySQL-MariaDB, PHP-Apache, Apache, phpMyAdmin)

## 部署架構與步驟

### 1. 將 Laravel 和 Vue 的專案內容匯入個別資料夾

- 目錄結構：

  ```
  /docker/controller  # Laravel 專案放置資料夾
  /docker/web         # Vue 專案放置資料夾
  ```

- 匯入專案到對應資料夾：
  - 將 Laravel 專案內容放入 `docker/controller` 資料夾。
  - 將 Vue 專案內容放入 `docker/web` 資料夾。
  
  :::info
  可以git clone或ftp直接匯入
  Laravel要確定有`compose.json`這個檔案（composre安裝用），git的話記得要cp .env
  Vue可以build後直接匯入整包`/dist`目錄即可
  
  ### **匯完記得改權限755，會經常覆蓋的檔案可以改757或777**
  :::

### 2. 修改 Laravel 的 `.env` 檔與 `config/cors.php`
- **修改 `.env` 檔**：
  - 設定資料庫連線資訊，例如：
    ```php
    DB_CONNECTION=mysql        # 資料庫連線類型，這裡使用 MySQL。
    DB_HOST=db                 # 資料庫伺服器的主機名或 IP，Docker 中設為 "db"（對應 docker-compose 的服務名稱）。
    DB_PORT=3306               # 資料庫伺服器的連接埠，MySQL/MariaDB 默認為 3306。
    DB_DATABASE=要連結的資料庫名稱       # 使用的資料庫名稱。
    DB_USERNAME=登入的使用者名稱         # 連接資料庫的使用者名稱。
    DB_PASSWORD=登入的使用者密碼         # 連接資料庫的使用者密碼。
    ```
  - API_URL要記得改成後端的IP:port，例如：192.168.1.123:8081
  - 設定其他相關環境變數，例如 APP_KEY、API_URL 等。

- **修改 `config/cors.php` 檔**：
這個檔案是Laravel內建的CORS檔，有需要跨域請求就要設定。
專案使用版本是Laravel8已經有內建了，以下有些是沒有內建的，需要另外安裝。

  - 允許 Vue 前端進行跨域請求，修改 `allowed_origins` 項目：
    ```php
    'allowed_origins' => ['http://192.168.1.123:8083'], // Vue 前端的開發伺服器
    ```
### 3. 修改 Laravel 的目錄權限

為了讓 Apache 可以正常讀寫 Laravel 專案中的檔案，特別是 `storage` 和 `bootstrap/cache` 這兩個資料夾，我們需要調整它們的擁有者和權限。

執行以下命令，修改擁有者為 Apache 執行的使用者（通常是 `www-data` 或 `apache`）：

```bash
// 需要給 Apache 使用的帳號（通常是 www-data）讀取和寫入的權限，這樣 Laravel 才能正常寫入日誌檔案，記錄應用程式的運行狀況和錯誤訊息。
sudo chown -R www-data:www-data /path/to/your/laravel_project/storage    

// 放cache檔的地方，需要給 Apache 使用的帳號寫入權限，這樣 Laravel 才能夠創建和更新這些快取檔案
sudo chown -R www-data:www-data /path/to/your/laravel_project/bootstrap/cache
```

### ４. 調整 Vue 的 API 設定（以axios為例）

我的專案api是單獨放一個js檔做設定，所以只要改設定檔就好
主要是資料寫入`header`用以傳輸（比如說`Authorization token`）
還有`withXSRFToken`和`withCredentials`要設置，用來處理CORS



- 在 `src` 中找到 API 請求的設定檔，並確認與 Laravel 的 API 溝通正常。
- 需要加入如下內容到 `api.js` 或類似的 API 設定檔：
  ```js

  // 設定預設的 HTTP 標頭
  axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
  axios.defaults.headers.common["Authorization"] = "AUTH TOKEN";
  axios.defaults.withXSRFToken = true;
  axios.defaults.withCredentials = true;

  // 設定後端 API 基礎路徑
  const adminApi = axios.create({
    baseURL: "http://192.168.10.51:8085/api/admin/",
  });

  export default adminApi;
  ```
- 說明：
  - 設定 `Authorization` 標頭，讓每次請求都帶上驗證 token。
  - 使用 `withCredentials` 和 `withXSRFToken` 保持跨域請求的安全性。
    :::info
    `Authorization`和`withCredentials`是因為我有裝Laravel sanctum，官網要求要開；否則這兩個項目可以視情況決定要不要啟用。
    如果不啟用的話`apache.config`和`laravel cors.php`的設定要記得一並拿掉。
    :::
  - 將 `baseURL` 設定為你的後端 API 路徑，確保所有 API 請求指向正確的伺服器。

    :::danger
    確保設定的IP和Laravel的路由要一致，特別是`http`和`https`、結尾有沒有`/`之類的這種小地方。尤其是Restful API很容易出現這種小bug。
    CORS判斷很嚴格，如果不一致會判斷為需要跳轉，導致拒絕連線。
    :::

<br>
<br>

## Docker-compose佈署流程

### 1. **建構 Docker 映像檔**
   ```bash
   sudo docker build
   ```

### 2. **啟動 Docker 容器**
   ```bash
   sudo docker-compose up -d
   ```

### 3. **檢查所有容器狀態**
   ```bash
   sudo docker ps -a
   ```
   - **注意**: 可以每隔幾秒重複確認幾次，若遇到資料庫連線失敗，重試幾次可能會看到容器的狀態從`up`變成`restarting`。

### 4. **測試應用程式**
   - 確認所有容器都是 `up` 狀態。
   - 測試各項畫面是否成功啟動，API 是否能成功連結。
   - 若有錯誤，可以使用以下指令查看日誌：
     ```bash
     sudo docker logs <container_name>
     ```

### 5. 重新啟動容器
```bash
sudo docker-compose restart <container_name>
```

### 6. **關閉所有使用中的容器**
   ```bash
   sudo docker-compose down
   ```

### 7. **關閉所有使用中的容器並刪除映像檔**
   ```bash
   sudo docker-compose down --rmi all
   ```
   - 用在內部設定大更新的時候。
     我會連映像檔一起刪除重新build一次，以免漏改

### 8. **刪除 Docker 卷（清空資料）**
   - 刪除特定卷：
     ```bash
     sudo docker volume rm <volume_name>
     ```
   - 刪除所有未使用的卷：
     ```bash
     sudo docker volume prune
     ```
   - 這個是在db安裝錯誤的時候使用。
因為資料路徑重複有出一些問題，所以整個刪掉重新安裝。

<br>

## 目前的專案目錄結構

```bash
docker/
├── controller/                 # Laravel 專案
│   ├── app/
│   ├── bootstrap/cache/        # * 修改: 調整權限 *
│   ├── config/cors.php         # * 修改: 調整相關設定 *
│   ├── database/
│   ├── public/
│   ├── resources/
│   ├── routes/
│   ├── storage/               # * 修改: 調整權限 *
│   └── .env                   # * 修改: 更新環境變數 *
│
├── web/                       # Vue 專案
│   └── dist/
│
├── docker-compose.yml          # * 修改: 更新配置 *
├── Dockerfile                  # * 修改: 更新映像檔設定 *
└── apache-vhost.conf           # * 修改: 更新虛擬主機設定 *
```

## 修改與新增的文件和資料夾

### docker/
- docker-compose.yml
- Dockerfile
- apache-vhost.conf

### docker/controller/
- bootstrap/cache/
- storage/
- .env

### 本地Vue專案/src/
- api.js

