好了，經過前幾篇的努力，我們的 Docker 環境已經搭建完成。現在，是時候換上使用者的帽子，來驗收我們的開發環境了！畢竟，環境建置得再漂亮，如果不能正常運作，那可就像是買了跑車卻沒油一樣，只能看不能開。
這篇文章，我們將從使用者的角度，逐步測試我們的 Docker 環境，確保所有服務都能如預期般運作。相信我，這個過程可能會遇到一些小插曲，但也是學習和成長的好機會。
一、啟動 Docker 容器
首先，讓我們先確保所有的 Docker 容器都能正常啟動。1. 執行 Docker Compose
在專案的根目錄下，執行以下指令：
docker-compose up -d --build
- -d：讓容器在背景執行。
- --build：確保我們的 Dockerfile 變更有被重新構建。
2. 確認容器狀態
接著，我們可以透過以下指令查看容器是否正常運行：
docker-compose ps
你應該會看到類似以下的結果：
Name Command State Ports
--------------------------------------------------------------------------------
laravel-app docker-php-entrypoint php-fpm Up 9000/tcp
mariadb docker-entrypoint.sh mysqld Up 3306/tcp
nginx nginx -g daemon off; Up 0.0.0.0:80->80/tcp
nuxt-app docker-entrypoint.sh sh -c ... Up 0.0.0.0:3000->3000/tcp
如果所有容器的狀態都是 Up，那麼恭喜你，第一步成功！
二、修改 hosts 檔案
由於我們在 Nginx 的設定中使用了 api.localhost 和 web.localhost，我們需要在本機的 hosts 檔案中添加這兩個域名，才能在瀏覽器中正常訪問。
1. 編輯 hosts 檔案
- Windows：C:\Windows\System32\drivers\etc\hosts
- macOS/Linux：/etc/hosts
在檔案的末尾添加以下內容：
127.0.0.1 api.localhost
127.0.0.1 web.localhost
2. 為什麼要這麼做？
這樣設定後，當我們在瀏覽器中訪問 api.localhost 或 web.localhost 時，電腦就會將請求導向我們本機的 Nginx 服務，進而代理到對應的容器中。
三、測試 Laravel 後端
現在，讓我們來測試一下 Laravel 是否正常運行。
1. 訪問 Laravel 預設頁面
在瀏覽器中輸入 http://api.localhost ，如果一切順利，應該會看到 Laravel 的歡迎頁面。
2. 常見問題
- 看不到歡迎頁面：如果你看到的是 404 錯誤或其他頁面，可能是 Nginx 或 Laravel 沒有正確啟動。可以透過以下指令查看日誌：
docker-compose logs -f nginx
docker-compose logs -f backend
- Laravel 錯誤信息：如果看到 Laravel 的錯誤頁面，可能是環境變數設定有問題，特別是資料庫連線資訊。
3. 測試資料庫連線
我們需要確認 Laravel 能否正確連接到 MariaDB。
執行遷移指令
進入 Laravel 容器：
docker-compose exec backend bash
在容器內執行：
php artisan migrate- 成功：如果遷移成功，表示 Laravel 已經成功連接到資料庫。
- 失敗：如果出現連線錯誤，請檢查 .env 檔案和 docker-compose.yml 中的資料庫設定。
四、測試 Nuxt 前端
接下來，讓我們確認 Nuxt 前端是否正常運行。
1. 訪問 Nuxt 預設頁面
在瀏覽器中輸入 http://web.localhost ，應該會看到 Nuxt 的歡迎頁面。
2. 常見問題
- 無法訪問：如果頁面無法加載，可能是 Nuxt 容器沒有正確啟動。查看容器狀態：
docker-compose ps
- Nuxt 錯誤訊息：如果看到錯誤訊息，可能是依賴沒有正確安裝。進入容器後，手動執行：
docker-compose exec frontend sh
npm install
npm run dev
五、測試 Nginx 反向代理
我們需要確保 Nginx 能夠正確地將請求代理到對應的服務。
1. 測試 API 請求
在瀏覽器中訪問 http://api.localhost/api，如果有設定預設的 API 路由，應該會看到對應的回應。
2. 測試前後端互動
稍後我們會開發前端與後端的交互功能，但現在我們可以先確保 Nginx 能夠正確代理請求。
六、常見問題與解決方案
1. 容器無法啟動
- 檢查 Docker 版本：確保你的 Docker 是最新版本。
- 檢查配置檔案路徑：確認 docker-compose.yml 中的檔案路徑是否正確。
2. 無法連接資料庫
- 檢查環境變數：確認 Laravel 的資料庫設定與 MariaDB 容器的設定一致。
- 容器間網路：確保所有容器都在同一個網路中。
七、個人經驗分享
小故事：有一次，我怎麼測都連不上資料庫，結果發現是因為我在 .env 檔案中把 DB_HOST 設成了 localhost，而不是容器名稱 db。這種低級錯誤，真的是讓人哭笑不得。
小結
經過這一輪的測試，我們應該對整個開發環境的運行情況有了清晰的了解。這個過程可能有點繁瑣，但相信我，解決這些問題所獲得的成就感，絕對值得你投入的時間。
下一步
現在，我們的開發環境已經準備就緒，接下來就可以開始進行後端 API 的開發了！讓我們繼續保持這股幹勁，向著完成專案的目標前進。
