D6 - 第一階段小驗收

好了，經過前幾篇的努力，我們的 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 的開發了！讓我們繼續保持這股幹勁，向著完成專案的目標前進。