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

時間  2019-11-08
標籤 docker 搭建 laravel vue 項目 開發環境 欄目 Docker 简体版
原文   原文鏈接

圖片描述
在這篇文章中咱們將經過Docker在我的本地電腦上構建一個快速、輕量級、不依賴本地電腦所安裝的任何開發套件的可複製的Laravel和Vue項目的開發環境（開發環境的全部依賴都安裝在Docker構建容器裏），加入Vue只是由於有的項目裏會在Laravel項目中使用Vue作先後端分離開發，開發環境中須要安裝前端開發須要的工具集，固然先後端也能夠分紅兩個項目開發，這個話題不在本篇文章的討論範圍內。php

因此咱們的目標是：html

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

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

第一步：獲取Laravel的源碼包

由於咱們電腦上不安裝Composer，因此就不能使用Composer來建立Laravel項目了， 這裏我使用cURL直接從github上下載了最新的Laravel源碼包，你也可使用wget或者git clone 來獲取源碼包。node

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的項目目錄。mysql

第二步：添加docker-compose.yml

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

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

編排文件的開頭以下:git

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

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

App服務

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

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/訪問到項目啦。

圖片描述

在個人Github gist有一組參考文件方便同窗們參考https://gist.github.com/kevin...

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程