iT邦幫忙

2024 iThome 鐵人賽

DAY 6
0

好了,經過前幾篇的努力,我們的 Docker 環境已經搭建完成。現在,是時候換上使用者的帽子,來驗收我們的開發環境了!畢竟,環境建置得再漂亮,如果不能正常運作,那可就像是買了跑車卻沒油一樣,只能看不能開。

這篇文章,我們將從使用者的角度,逐步測試我們的 Docker 環境,確保所有服務都能如預期般運作。相信我,這個過程可能會遇到一些小插曲,但也是學習和成長的好機會。

一、啟動 Docker 容器

首先,讓我們先確保所有的 Docker 容器都能正常啟動。

1. 執行 Docker Compose

在專案的根目錄下,執行以下指令:

docker-compose up -d --build
  • -d:讓容器在背景執行。
  • --build:確保我們的 Dockerfile 變更有被重新構建。
    https://ithelp.ithome.com.tw/upload/images/20240919/20103068jY2lTQKqQR.png

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 的歡迎頁面。
https://ithelp.ithome.com.tw/upload/images/20240919/2010306897FZa28R7H.png

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 的歡迎頁面。
https://ithelp.ithome.com.tw/upload/images/20240919/20103068LpwBYvCJHZ.png

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 的開發了!讓我們繼續保持這股幹勁,向著完成專案的目標前進。


上一篇
D5 - 拆解 Docker 環境:快速理解Nginx 反向代理 Nuxt 和 Laravel 的關係
下一篇
D7 - 加入版本控制,讓你的專案擁有「多重宇宙」
系列文
我獨自開發 - 30天進化之路,掌握 Laravel + Nuxt30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言