怎么搭建Laravel和Vue的開發環境

這篇文章主要介紹“怎么搭建Laravel和Vue的開發環境”，在日常操作中，相信很多人在怎么搭建Laravel和Vue的開發環境問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么搭建Laravel和Vue的開發環境”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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

第一步：獲取laravel的源碼包

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

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下載完源碼包后會解壓源碼壓縮包，解壓完成后在把源碼壓縮包v5.5.0.tar.gz刪掉，執行完后你會看到一個laravel-5.5.0的項目目錄。

第二步：添加docker-compose.yml

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

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

編排文件的開頭如下:

version: '2'
services:
  # our services will go here

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

app服務

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

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

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這個文件了，具體內容如下:

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容器中，因為在開發時經常需要執行他們，如果發布到生產環境，一般是使用單獨的composer對項目代碼進行構建而不是放在運行應用的容器里，容器的核心思想之一就是保持單一，這樣才能做到快速增加相同角色的容器。

web服務

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

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

notes:

• volumes_from用來復用在app服務中定義的數據卷路徑

• 通過ports將本地電腦的8080端口映射到web容器的80端口，這樣在開發環境中我們就不用設置hosts文件，直接通過ip加端口就能訪問服務了。

web服務器選用nginx，所以我們需要用一個nginx鏡像文件來構建這個容器，在這之前我們需要在nginx鏡像的基礎上再設置一下項目中用到的vhost，所以我們需要一個web.dockerfile文件，它的定義如下：

from nginx:1.10

add vhost.conf /etc/nginx/conf.d/default.conf

根據鏡像文件的定義，我們把項目中的vhost.conf復制到了容器的/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:

• 因為是開發環境我們就只進行最簡單的配置，不做調優考慮了。

• fastcgi_pass app:9000; nginx將對php的請求通過fastcgi傳遞給了app服務的9000端口，docker-compose會自動把services中定義的容器服務連接起來，各個服務相互之間使用服務名稱引用。

mysql服務

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

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

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:

• 在文件的最下面我們通過volumes命令創建了一個名為dbdata的數據卷（dbdata后面的冒號是有意寫上去的，這是yml文件的一個語法限制，不用太關心）

• 定義完數據卷后，在上面我們使用<name>:<dir>的格式，通知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服務的容器里執行：

docker-compose exec app composer install
docker-compose exec app npm install // 如果包含前端項目的話再執行相關命令
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 將命令發送到指定的容器中去執行

• app是定義在docker-compose.yml中的一個服務，它是一個運行著php-fpm的容器

• php artisan migrate 是要在容器里執行的命令

查看nginx日志的方法:

• docker ps 找到nginx服務的container id

• docker exec -it <contianer id> /bin/bash 進入nginx容器

• nginx日志的具體路徑請查看項目中的vhost.conf

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

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

到此，關于“怎么搭建Laravel和Vue的開發環境”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！