怎么搭建Laravel和Vue項(xiàng)目的開(kāi)發(fā)環(huán)境

201次閱讀

共計(jì) 5981 個(gè)字符，預(yù)計(jì)需要花費(fèi) 15 分鐘才能閱讀完成。

這篇文章主要介紹了怎么搭建 Laravel 和 Vue 項(xiàng)目的開(kāi)發(fā)環(huán)境的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇怎么搭建 Laravel 和 Vue 項(xiàng)目的開(kāi)發(fā)環(huán)境文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

開(kāi)始前你需要先去安裝一個(gè) docker 客戶端，docker 的官網(wǎng)中有詳細(xì)的安裝方法。

第一步：獲取 laravel 的源碼包

因?yàn)槲覀冸娔X上不安裝 composer，所以就不能使用 composer 來(lái)創(chuàng)建 laravel 項(xiàng)目了，這里我使用 curl 直接從 github 上下載了最新的 laravel 源碼包，你也可以使用 wget 或者 git clone 來(lái)獲取源碼包。

curl -l -o https://github.com/laravel/laravel/archive/v5.5.0.tar.gz /
  tar -zxvf v5.5.0.tar.gz /
  rm v5.5.0.tar.gz

上面的命令在 curl 下載完源碼包后會(huì)解壓源碼壓縮包，解壓完成后在把源碼壓縮包 v5.5.0.tar.gz 刪掉，執(zhí)行完后你會(huì)看到一個(gè) laravel-5.5.0 的項(xiàng)目目錄。

第二步：添加 docker-compose.yml

在項(xiàng)目中創(chuàng)建 docker-compose.yml 文件。

compose 項(xiàng)目是 docker 官方的開(kāi)源項(xiàng)目，負(fù)責(zé)實(shí)現(xiàn)對(duì) docker 容器集群的快速編排。我們知道使用一個(gè) dockerfile 模板文件，可以讓用戶很方便的定義一個(gè)單獨(dú)的應(yīng)用容器。在這里我們會(huì)用到四個(gè)容器分別將 php、mysql、nginx 放在四個(gè)不同的容器中，通過(guò) compose` 將四個(gè)應(yīng)用容器關(guān)聯(lián)到一起組成項(xiàng)目。

編排文件的開(kāi)頭如下:

version:  2 
services:
 # our services will go here

在編排文件中，把每個(gè)容器叫做一個(gè)服務(wù)，services 下定義整個(gè)應(yīng)用中用到的所有服務(wù)（即容器）。

app 服務(wù)

app 服務(wù)的容器將執(zhí)行我們項(xiàng)目中的代碼。

app:
 build:
 context: ./
 dockerfile: app.dockerfile
 working_dir: /var/www
 volumes:
 - ./:/var/www
 environment:
 -  db_port=3306 
 -  db_host=database

notes:

我們使用 app.dockerfile 這個(gè)鏡像文件來(lái)構(gòu)建我們的 app 容器，在鏡像文件中我們會(huì)對(duì)項(xiàng)目中用到的 php 模塊鏡像配置，也會(huì)額外安裝 npm 用來(lái)構(gòu)建前端代碼。

working_dir: /var/www 把工作目錄設(shè)置成了 /var/www，在容器中項(xiàng)目代碼將會(huì)被放在 /var/www 目錄下面，包括使用 docker exec app 執(zhí)行的命令也都是以 /var/www 為當(dāng)前工作目錄的。

volumes 是容器內(nèi)數(shù)據(jù)卷所掛載路徑設(shè)置，在這里我們只定義一個(gè)數(shù)據(jù)卷，把宿主機(jī)項(xiàng)目目錄掛到在容器中的 /var/www 上，這樣我們?cè)诒镜仉娔X對(duì)項(xiàng)目代碼進(jìn)行的更改就會(huì)馬上同步到容器中去，反過(guò)來(lái)也是一樣，容器中對(duì)代碼做的更改也會(huì)及時(shí)反饋到本地電腦的項(xiàng)目中。

environment 設(shè)置環(huán)境變量名，這里我們?cè)O(shè)置了 db_port 和 db_host 這樣就不用修改項(xiàng)目中的.env 文件里關(guān)于這兩項(xiàng)的值了，當(dāng)然任何你需要在開(kāi)發(fā)環(huán)境單獨(dú)設(shè)置的環(huán)境變量都可以寫到這里，laravel 讀取配置使用的 dotenv 會(huì)檢測(cè)是否系統(tǒng)有指定環(huán)境變量的設(shè)置，有的話就不會(huì)在去讀取.env 文件了。

現(xiàn)在我們需要?jiǎng)?chuàng)建上面 build 環(huán)節(jié)中提到的 app.dockerfile 這個(gè)文件了，具體內(nèi)容如下:

from php:7.1.22-fpm
# update packages
run apt-get update
# install php and composer dependencies
run apt-get install -qq git curl libmcrypt-dev libjpeg-dev libpng-dev libfreetype6-dev libbz2-dev
# clear out the local repository of retrieved package files
# run apt-get clean
# install needed extensions
# here you can install any other extension that you need during the test and deployment process
run apt-get clean; docker-php-ext-install pdo pdo_mysql mcrypt zip gd pcntl opcache bcmath

# installs composer to easily manage your php dependencies.
run curl --silent --show-error https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
# install node
run apt-get update  \
 apt-get install -y --no-install-recommends gnupg  \
 curl -sl https://deb.nodesource.com/setup_10.x | bash -  \
 apt-get update  \
 apt-get install -y --no-install-recommends nodejs  \
 npm config set registry https://registry.npm.taobao.org --global  \
 npm install --global gulp-cli
cmd php-fpm

notes:

我在這里先將 npm 和 composer 裝到了 app 容器中，因?yàn)樵陂_(kāi)發(fā)時(shí)經(jīng)常需要執(zhí)行他們，如果發(fā)布到生產(chǎn)環(huán)境，一般是使用單獨(dú)的 composer 對(duì)項(xiàng)目代碼進(jìn)行構(gòu)建而不是放在運(yùn)行應(yīng)用的容器里，容器的核心思想之一就是保持單一，這樣才能做到快速增加相同角色的容器。

web 服務(wù)

接下來(lái)，我們需要配置一個(gè) web 服務(wù)器用，我們把這個(gè)容器在編排文件中命名成 web

web:
 build:
 context: ./
 dockerfile: web.dockerfile
 working_dir: /var/www
 volumes_from:
 - app
 ports:
 - 8080:80

notes:

volumes_from 用來(lái)復(fù)用在 app 服務(wù)中定義的數(shù)據(jù)卷路徑

通過(guò) ports 將本地電腦的 8080 端口映射到 web 容器的 80 端口，這樣在開(kāi)發(fā)環(huán)境中我們就不用設(shè)置 hosts 文件，直接通過(guò) ip 加端口就能訪問(wèn)服務(wù)了。

web 服務(wù)器選用 nginx，所以我們需要用一個(gè) nginx 鏡像文件來(lái)構(gòu)建這個(gè)容器，在這之前我們需要在 nginx 鏡像的基礎(chǔ)上再設(shè)置一下項(xiàng)目中用到的 vhost，所以我們需要一個(gè) web.dockerfile 文件，它的定義如下：

from nginx:1.10
add vhost.conf /etc/nginx/conf.d/default.conf

根據(jù)鏡像文件的定義，我們把項(xiàng)目中的 vhost.conf 復(fù)制到了容器的 /etc/nginx/conf.d/default.conf 中，這樣基本的 nginx 配置就配置好了，vhost.conf 中的定義如下:

server {
 listen 80;
 index index.php index.html;
 root /var/www/public;
 location / {
 try_files $uri /index.php?$args;
 }
 location ~ \.php$ { fastcgi_split_path_info ^(.+\.php)(/.+)$;
 fastcgi_pass app:9000;
 fastcgi_index index.php;
 include fastcgi_params;
 fastcgi_param script_filename $document_root$fastcgi_script_name;
 fastcgi_param path_info $fastcgi_path_info;
 }
}

notes:

因?yàn)槭情_(kāi)發(fā)環(huán)境我們就只進(jìn)行最簡(jiǎn)單的配置，不做調(diào)優(yōu)考慮了。

fastcgi_pass app:9000; nginx 將對(duì) php 的請(qǐng)求通過(guò) fastcgi 傳遞給了 app 服務(wù)的 9000 端口，docker-compose 會(huì)自動(dòng)把 services 中定義的容器服務(wù)連接起來(lái)，各個(gè)服務(wù)相互之間使用服務(wù)名稱引用。

mysql 服務(wù)

接下來(lái)我們將配置 mysql 服務(wù)，與上面兩個(gè)服務(wù)有點(diǎn)不一樣的是，在 php-fpm 和 nginx 的容器中，我們配置本地電腦的文件可以同步到容器中供容器訪問(wèn)，這讓我們開(kāi)發(fā)時(shí)對(duì)文件作的更改能夠快速的在容器中得到反饋加快我們的開(kāi)發(fā)過(guò)程。但是在數(shù)據(jù)庫(kù)容器中我們希望容器中創(chuàng)建的文件能夠持久化（默認(rèn)容器銷毀時(shí)，容器內(nèi)創(chuàng)建的文件也會(huì)被銷毀），我們可以通過(guò) docker 的數(shù)據(jù)卷來(lái)實(shí)現(xiàn)上述功能，只不過(guò)這次不用再把本地電腦的文件掛在到數(shù)據(jù)卷上了，docker 客戶端會(huì)管理創(chuàng)建的數(shù)據(jù)卷的在本地電腦上具體存儲(chǔ)的位置。

下面是編排文件中對(duì) database 服務(wù)的設(shè)置

version:  2 
services:
 database:
 image: mysql:5.7
 volumes:
 - dbdata:/var/lib/mysql
 environment:
 -  mysql_database=homestead 
 -  mysql_user=homestead 
 -  mysql_password=secret 
 -  mysql_root_password=secret 
 ports:
 -  33061:3306 
volumes:
 dbdata:

notes:

在文件的最下面我們通過(guò) volumes 命令創(chuàng)建了一個(gè)名為 dbdata 的數(shù)據(jù)卷（dbdata 后面的冒號(hào)是有意寫上去的，這是 yml 文件的一個(gè)語(yǔ)法限制，不用太關(guān)心）

定義完數(shù)據(jù)卷后，在上面我們使用 name : dir 的格式，通知 docker，將 dbdata 數(shù)據(jù)卷掛在到容器中的 /var/lib/mysql 目錄上

environments 中設(shè)置的是 mysql 的 docker 鏡像需要的四個(gè)必要參數(shù)。

ports 端口映射中，我們將本地電腦的 33061 端口映射到容器的 3306 端口，這樣我們就能通過(guò)電腦上的數(shù)據(jù)庫(kù)工具連接到 docker 內(nèi)的 mysql 了。

將所有服務(wù)編排到一起

下面是完整的 docker-compose.yml 文件，通過(guò)編排文件我們將三個(gè)應(yīng)用容器關(guān)聯(lián)在一起組成了項(xiàng)目的服務(wù)端

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:

啟動(dòng)服務(wù)

按照上面的步驟配置好編排文件還有指定的 docker 鏡像文件后，我們就可以通過(guò)下面的命令啟動(dòng)服務(wù)了，執(zhí)行完后會(huì)啟動(dòng)上面文件里定義的三個(gè)服務(wù)。

docker-compose up -d

第一次啟動(dòng)時(shí)，由于 docker 客戶端要下載上面提到的三個(gè)鏡像并且構(gòu)建服務(wù)所以啟動(dòng)速度會(huì)慢一些，等到下載完鏡像并構(gòu)建完成后，以后的啟動(dòng)都會(huì)非常快。

初始化 laravel 項(xiàng)目

啟動(dòng)完服務(wù)后我們可以初始化 laravel 項(xiàng)目了，步驟跟官方文檔里介紹的一樣，但是需要在啟動(dòng)的 app 服務(wù)的容器里執(zhí)行：

docker-compose exec app composer install
docker-compose exec app npm install //  如果包含前端項(xiàng)目的話再執(zhí)行相關(guān)命令
docker-compose exec app cp .env.example .env
docker-compose exec app php artisan key:generate
docker-compose exec app php artisan optimize
docker-compose exec app php artisan migrate --seed
docker-compose exec app php artisan make:controller mycontroller

notes：

docker-compose exec 將命令發(fā)送到指定的容器中去執(zhí)行

app 是定義在 docker-compose.yml 中的一個(gè)服務(wù)，它是一個(gè)運(yùn)行著 php-fpm 的容器

php artisan migrate 是要在容器里執(zhí)行的命令

查看 nginx 日志的方法:

docker ps 找到 nginx 服務(wù)的 container id

docker exec -it contianer id /bin/bash 進(jìn)入 nginx 容器

nginx 日志的具體路徑請(qǐng)查看項(xiàng)目中的 vhost.conf

執(zhí)行完上面的命令后你就能通過(guò) http://127.0.0.1:8080/ 訪問(wèn)到項(xiàng)目啦。

關(guān)于“怎么搭建 Laravel 和 Vue 項(xiàng)目的開(kāi)發(fā)環(huán)境”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“怎么搭建 Laravel 和 Vue 項(xiàng)目的開(kāi)發(fā)環(huán)境”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注丸趣 TV 行業(yè)資訊頻道。

正文完