Detailed explanation of using Docker to build a development environment for Laravel and Vue projects

This article introduces the development environment of Laravel and Vue projects built with Docker, and shares it with you. The details are as follows:

In this article, we will use Docker to build a fast, lightweight, and reproducible Laravel and Vue project development environment on a personal local computer that does not rely on any development suite installed on the local computer (all dependencies of the development environment are installed in the Docker build container). Vue is added only because some projects will use Vue in Laravel projects for front-end and back-end separation development. The development environment needs to install the tool set required for front-end development. Of course, the front-end and back-end can also be divided into two projects for development. This topic is not within the scope of this article.

So our goals are:

• Do not install software like Mamp/Wamp locally
• Do not use a virtual machine like Vagrant
• Do not install the toolset required for PHP development globally on your local computer
• Do not install the toolset required for front-end development globally on your local computer
• Do not install Mysql and Nginx globally on the local computer

Before you start, you need to install a Docker client. Docker's official website has detailed installation instructions.

Step 1: Get the Laravel source package

Since Composer is not installed on our computer, we cannot use Composer to create a Laravel project. Here I use cURL to download the latest Laravel source code package directly from GitHub. You can also use wget or git clone to get the source code package.

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

The above command will decompress the source code package after curl downloads it. After decompression, delete the source code package v5.5.0.tar.gz After execution, you will see a laravel-5.5.0 project directory.

Step 2: Add docker-compose.yml

Create docker-compose.yml file in your project.

Compose project is an official open source project of Docker, responsible for realizing the rapid orchestration of Docker container clusters. We know that using a Dockerfile template file allows users to easily define a separate application container. Here we will use four containers to put PHP , Mysql、 Nginx放在四個不同的容器中，通過compose to associate the four application containers together to form a project.

The beginning of the layout file is as follows:

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

In the orchestration file, each container is called a service, and all services (i.e. containers) used in the entire application are defined under services.

App Services

The container of the APP service will execute the code in our project.

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

Notes:

• We use the image file app.dockerfile to build our App container. In the image file, we will configure the PHP module image used in the project, and also install NPM to build the front-end code.
• working_dir: /var/www sets the working directory to /var/www . In the container, the project code will be placed in the /var/www directory, including commands executed using docker exec app which also use /var/www as the current working directory.
• volumes is the path setting for mounting the data volume in the container. Here we only define one data volume and mount the host project directory to /var/www in the container. In this way, the changes we make to the project code on the local computer will be immediately synchronized to the container, and vice versa. Changes made to the code in the container will also be promptly fed back to the project on the local computer.
• environment sets environment variable name. Here we set DB_PORT and DB_HOST so that we don't have to modify the values ​​of these two items in the .env file in the project. Of course, any environment variables you need to set separately in the development environment can be written here. DotEnv , which Laravel uses to read the configuration, will detect whether the system has the specified environment variable settings. If so, it will not read the .env file.

Now we need to create the app.dockerfile file mentioned in the build step above. The specific content is as follows:

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 testing 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:

I first installed NPM and Composer in the app container because they are often needed during development. If it is released to the production environment, a separate composer is generally used to build the project code instead of putting it in the container running the application. One of the core ideas of the container is to keep it single, so that containers with the same role can be added quickly.

Web Services

Next, we need to configure a web server. We name this container web in the orchestration file.

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

Notes:

• volumes_from is used to reuse the data volume path defined in the app service
• Use ports to map port 8080 of the local computer to port 80 of the web container. In this way, we don’t need to set up the hosts file in the development environment, and we can access the service directly through IP plus port.

The web server uses nginx, so we need to use an nginx image file to build this container. Before that, we need to set up vhost used in the project based on the nginx image, so we need a web.dockerfile file, which is defined as follows:

FROM nginx:1.10

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

According to the definition of the image file, we copied vhost.conf in the project to /etc/nginx/conf.d/default.conf of the container, so that the basic nginx configuration is configured. The definition in vhost.conf is as follows:

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:

• Because this is a development environment, we only perform the simplest configuration and do not consider tuning.
• fastcgi_pass app:9000; nginx passes the request for PHP to port 9000 of the app service through fastcgi. docker-compose will automatically connect the container services defined in services, and each service will be referenced by the service name.

Mysql service

Next, we will configure the Mysql service. What is a little different from the above two services is that in the PHP-FPM and Nginx containers, we configure the files on the local computer to be synchronized to the container for container access. This allows us to quickly get feedback in the container when making changes to the files during development, speeding up our development process. However, in the database container, we hope that the files created in the container can be persistent (when the default container is destroyed, the files created in the container will also be destroyed). We can achieve the above function through Docker's data volume, but this time we no longer need to mount the files on the local computer to the data volume. The Docker client will manage the specific storage location of the created data volume on the local computer.

The following is the setting for the database service in the orchestration file

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:

• At the bottom of the file, we created a data volume named dbdata using the volumes command (the colon after dbdata is intentional. This is a syntax limitation of the YML file and you don’t need to worry about it)
• After defining the data volume, we use the format of <name>:<dir> above to inform Docker to mount dbdata data volume to the /var/lib/mysql directory in the container.
• The four necessary parameters required by the MySQL docker image are set in environments .
• In ports mapping, we map port 33061 of the local computer to port 3306 of the container, so that we can connect to Mysql in docker through the database tool on the computer.

Orchestrate all services together

Below is the complete docker-compose.yml file. Through the orchestration file, we associate three application containers together to form the server of the project.

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:

Start the service

After configuring the orchestration file and the specified docker image file according to the above steps, we can start the service through the following command. After execution, the three services defined in the above file will be started.

docker-compose up -d

When you start it for the first time, the Docker client will start slowly because it needs to download the three images mentioned above and build the service. After the images are downloaded and built, subsequent starts will be very fast.

Initialize Laravel Project

After starting the service, we can initialize the Laravel project. The steps are the same as described in the official documentation, but they need to be executed in the container of the started app service:

docker-compose exec app composer install
docker-compose exec app npm install // If the front-end project is included, execute the relevant commands 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 sends the command to the specified container for execution
• app is a service defined in docker-compose.yml, which is a container running php-fpm
• php artisan migrate is the command to be executed in the container

How to view nginx logs:

• docker ps find the container id of the nginx service
• docker exec -it <contianer id> /bin/bash to enter the nginx container
• For the specific path of nginx log, please check vhost.conf in the project.

After executing the above command, you can access the project through http://127.0.0.1:8080/ .

There is a set of reference files in my Github gist for your reference https://gist.github.com/kevinyan815/fa0760902d29f19a4213b4a16fe0501b

The files in the gist are a bit old. Later, some new PHP modules and Node were added during use. Composer was also placed in a separate container before. But I believe that you are smart enough to change these files according to your needs after reading this.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.