# 使用 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