用Docker搭建Laravel和Vue項目的開發環境

在這篇文章中我們將通過Docker在個人本地電腦上構建一個快速、輕量級、不依賴本地電腦所安裝的任何開發套件的可複製的Laravel和Vue項目的開發環境（開發環境的所有依賴都安裝在Docker構建容器里），加入Vue只是因為有的項目里會在Laravel項目中使用Vue做前後端分離開發，開發環境中需要安裝前端開發需要的工具集，當然前後端也可以分成兩個項目開發，這個話題不在本篇文章的討論範圍內。

所以我們的目標是：

• 不在本地安裝Mamp/Wamp這樣的軟體
• 不使用類似Vagrant這樣的虛擬機
• 不在本地電腦全局安裝PHP開發所需要的工具集
• 不在本地電腦全局安裝前端開發所需要的工具集
• 不在本地電腦全局安裝Mysql和Nginx

開始前你需要先去安裝一個Docker客戶端，Docker的官網中有詳細的安裝方法。

第一步：獲取Laravel的源碼包

因為我們電腦上不安裝Composer，所以就不能使用Composer來創建Laravel項目了， 這裡我使用cURL直接從github上下載了最新的Laravel源碼包，你也可以使用wget或者git clone 來獲取源碼包。

上面的命令在curl下載完源碼包後會解壓源碼壓縮包，解壓完成後在把源碼壓縮包v5.5.0.tar.gz刪掉，執行完後你會看到一個laravel-5.5.0的項目目錄。

第二步：添加docker-compose.yml

在項目中創建docker-compose.yml文件。

Compose 項目是 Docker 官方的開源項目，負責實現對 Docker 容器集群的快速編排。我們知道使用一個 Dockerfile 模板文件，可以讓用戶很方便的定義一個單獨的應用容器。在這裡我們會用到四個容器分別將PHP、Mysql、Nginx放在四個不同的容器中，通過compose`將四個應用容器關聯到一起組成項目。

編排文件的開頭如下:

在編排文件中，把每個容器叫做一個服務，services下定義整個應用中用到的所有服務（即容器）。

App服務

APP服務的容器將執行我們項目中的代碼。

Notes:

• 我們使用app.dockerfile這個鏡像文件來構建我們的App容器，在鏡像文件中我們會對項目中用到的PHP模塊鏡像配置，也會額外安裝NPM用來構建前端代碼。
• working_dir: /var/www把工作目錄設置成了/var/www，在容器中項目代碼將會被放在/var/www目錄下面，包括使用docker exec app執行的命令也都是以/var/www為當前工作目錄的。
• volumes是容器內數據卷所掛載路徑設置，在這裡我們只定義一個數據卷，把宿主機項目目錄掛到在容器中的/var/www上，這樣我們在本地電腦對項目代碼進行的更改就會馬上同步到容器中去，反過來也是一樣，容器中對代碼做的更改也會及時反饋到本地電腦的項目中。
• environment設置環境變量名，這裡我們設置了DB_PORT和DB_HOST 這樣就不用修改項目中的.env文件里關於這兩項的值了，當然任何你需要在開發環境單獨設置的環境變量都可以寫到這裡，Laravel讀取配置使用的DotEnv會檢測是否系統有指定環境變量的設置，有的話就不會在去讀取.env文件了。

現在我們需要創建上面build環節中提到的app.dockerfile這個文件了，具體內容如下:

圖圖圖？？？？？？

Notes:

• 我在這裡先將NPM和Composer裝到了app容器中，因為在開發時經常需要執行他們，如果發布到生產環境，一般是使用單獨的composer對項目代碼進行構建而不是放在運行應用的容器里，容器的核心思想之一就是保持單一，這樣才能做到快速增加相同角色的容器。

Web服務

接下來，我們需要配置一個Web伺服器用，我們把這個容器在編排文件中命名成web

Notes:

• volumes_from用來復用在app服務中定義的數據卷路徑
• 通過ports將本地電腦的8080埠映射到web容器的80埠，這樣在開發環境中我們就不用設置hosts文件，直接通過IP加埠就能訪問服務了。
• Web伺服器選用nginx，所以我們需要用一個nginx鏡像文件來構建這個容器，在這之前我們需要在nginx鏡像的基礎上再設置一下項目中用到的vhost，所以我們需要一個web.dockerfile文件，它的定義如下：

根據鏡像文件的定義，我們把項目中的vhost.conf複製到了容器的/etc/nginx/conf.d/default.conf中，這樣基本的nginx配置就配置好了，vhost.conf中的定義如下:

Notes:

• 因為是開發環境我們就只進行最簡單的配置，不做調優考慮了。
• fastcgi_pass app:9000; nginx將對PHP的請求通過fastcgi傳遞給了app服務的9000埠，docker-compose會自動把services中定義的容器服務連接起來，各個服務相互之間使用服務名稱引用。

Mysql服務

接下來我們將配置Mysql服務，與上面兩個服務有點不一樣的是，在PHP-FPM和Nginx的容器中，我們配置本地電腦的文件可以同步到容器中供容器訪問，這讓我們開發時對文件作的更改能夠快速的在容器中得到反饋加快我們的開發過程。但是在資料庫容器中我們希望容器中創建的文件能夠持久化（默認容器銷毀時，容器內創建的文件也會被銷毀），我們可以通過Docker的數據捲來實現上述功能，只不過這次不用再把本地電腦的文件掛在到數據卷上了，Docker客戶端會管理創建的數據卷的在本地電腦上具體存儲的位置。

下面是編排文件中對database服務的設置

Notes:

• 在文件的最下面我們通過volumes命令創建了一個名為dbdata的數據卷（dbdata後面的冒號是有意寫上去的，這是YML文件的一個語法限制，不用太關心）
• 定義完數據卷後，在上面我們使用:的格式，通知Docker，將dbdata數據卷掛在到容器中的/var/lib/mysql目錄上
• environments中設置的是Mysql的docker鏡像需要的四個必要參數。
• ports埠映射中，我們將本地電腦的33061埠映射到容器的3306埠，這樣我們就能通過電腦上的資料庫工具連接到docker內的Mysql了。

將所有服務編排到一起

下面是完整的docker-compose.yml文件，通過編排文件我們將三個應用容器關聯在一起組成了項目的服務端

version: '2'
services:
 # The Application
 app:
 build:
 context: ./
 dockerfile: app.dockerfile
 working_dir: /var/www
 volumes:
 - ./:/var/www
 environment:
 - "DB_PORT=3306"
 - "DB_HOST=database"
 # The Web Server
 web:
 build:
 context: ./
 dockerfile: web.dockerfile
 working_dir: /var/www
 volumes_from:
 - app
 ports:
 - 8080:80
 # The Database
 database:
 image: mysql:5.6
 volumes:
 - dbdata:/var/lib/mysql
 environment:
 - "MYSQL_DATABASE=homestead"
 - "MYSQL_USER=homestead"
 - "MYSQL_PASSWORD=secret"
 - "MYSQL_ROOT_PASSWORD=secret"
 ports:
 - "33061:3306"
volumes:
 dbdata:

啟動服務

按照上面的步驟配置好編排文件還有指定的docker鏡像文件後，我們就可以通過下面的命令啟動服務了，執行完後會啟動上面文件里定義的三個服務。

docker-compose up -d

第一次啟動時，由於docker客戶端要下載上面提到的三個鏡像並且構建服務所以啟動速度會慢一些，等到下載完鏡像並構建完成後，以後的啟動都會非常快。

初始化Laravel項目

啟動完服務後我們可以初始化Laravel項目了，步驟跟官方文檔里介紹的一樣，但是需要在啟動的app服務的容器里執行：

Notes：

• docker-compose exec 將命令發送到指定的容器中去執行
• app是定義在docker-compose.yml中的一個服務，它是一個運行著php-fpm的容器
• php artisan migrate 是要在容器里執行的命令

查看nginx日誌的方法:

• docker ps 找到nginx服務的container id
• docker exec -it /bin/bash 進入nginx容器
• nginx日誌的具體路徑請查看項目中的vhost.conf

執行完上面的命令後你就能通過http://127.0.0.1:8080/訪問到項目啦。

在我的Github gist有一組參考文件方便同學們參考 https://gist.github.com/kevinyan815/fa0760902d29f19a4213b4a16fe0501b

gist里的文件稍微舊一些，後來在使用的過程中又加入些新的PHP模塊和Node，之前composer也單獨放到了一個容器中，不過相信聰明的你看到這裡應該已經會根據需求更改這些文件啦。

原文連結：https://segmentfault.com/a/1190000018372614

本文作者：KevinYan