Help us understand the problem. What is going on with this article?

5分で作るLaravel+Vue.js開発環境(docker-compose)

More than 1 year has passed since last update.

最近Laravel+Vue.jsに興味あり、ちょうど良いタイミングで下記記事を見つけました。

Vue + Vue Router + Vuex + Laravel チュートリアル(全16回)を書きました。 - Qiita

これはやらねばと思い環境構築に着手。

ただ、Dockerでの開発もハマっており、せっかくならDockerで開発したいなぁと思い作ってみました。

対象とする人

  • LaravelVue.jsの開発に興味がある
  • docker-composeの知見がある(今回Dockerの説明は割愛します)

※Laravelの開発メインであればLaradockのほうが良さげ? https://laradock.io

構築手順

開発用のディレクトリ作成

$ mkdir laravel-app
$ cd laravel-app/

Dockerの設定ファイル一式を取得

gitファイルが不要なのでソースファイルだけ取得します。
※取得するファイルはこちら

$ wget -O docker.zip https://github.com/yusukeito58/docker-for-laravel-development/archive/master.zip  \
    && unzip docker.zip && mv docker-for-laravel-development-master/* ./ \
    && rm -rf docker.zip docker-for-laravel-development-master

$ ls 
docker                  docker-compose.yml

gitファイルが混じっても良いならgit clone https://github.com/yusukeito58/docker-for-laravel-developmentでもおk

コンテナ作成

$ docker-compose up -d --build

# 確認
$ docker-compose ps
      Name                     Command              State                 Ports
---------------------------------------------------------------------------------------------
laravel-app_app_1   docker-php-entrypoint php-fpm   Up      9000/tcp
laravel-app_db_1    docker-entrypoint.sh mysqld     Up      0.0.0.0:3306->3306/tcp, 33060/tcp
laravel-app_web_1   nginx -g daemon off;            Up      0.0.0.0:80->80/tcp

Laravelのプロジェクトを作成

$ docker-compose exec app laravel new

動作確認

下記URLにアクセスするとLaravelの画面が表示されます。

http://localhost

スクリーンショット 2019-01-30 12.47.16.png

DB設定

Laravelが接続するデータベースをMySQLに変更します。

まずはデータベースを作成しましょう。

# mysqlに接続(dbコンテナでmysqlコマンドを実行)
$ docker-compose exec db mysql -uroot -ppassword

# データベース作成(ここではlaravelというデータベースを作成します)
mysql> create database laravel default character set utf8;
Query OK, 1 row affected (0.00 sec)

.envファイルを次のように変更します。

DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=laravel_sns
DB_USERNAME=root
DB_PASSWORD=passwor

補足

今回使用したDockerの設定ファイルは👇のGitHubリポジトリに置いています。

ミドルウェアのバージョンを変えたいなど、必要であればこれらのファイルを修正するだけでいけちゃいます。便利ですねDocker。

https://github.com/yusukeito58/docker-for-laravel-development

$ tree
.
├── docker
│   ├── app
│   │   └── Dockerfile
│   ├── mysql # nginxと同じ要領で設定ファイルを置いてもおk
│   └── nginx
│       └── default.conf
└── docker-compose.yml
docker-compose.yml
version: '3'

services:
  app:
    build: ./docker/app
    depends_on:
      - db
    volumes:
      - .:/var/www/html:cached

  web:
    image: nginx
    ports:
      - 80:80
    depends_on:
      - app
    volumes:
      - .:/var/www/html:cached
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf

  db:
    image: mysql:5.7
    ports:
      - 3306:3306
    environment:
      MYSQL_ROOT_PASSWORD: password
    volumes:
      - laravel-db-data:/var/lib/mysql

volumes:
  laravel-db-data:
    driver: local

docker/app/Dockerfile
FROM php:7.2-fpm

RUN apt-get update \
    && apt-get install -y zlib1g-dev mysql-client libpng-dev libjpeg-dev gnupg curl wget \
    && docker-php-ext-configure gd --with-png-dir=/usr/include --with-jpeg-dir=/usr/include \
    && docker-php-ext-install zip pdo_mysql gd

# nodejs install
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash -
RUN apt-get install -y nodejs

# composer install
RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
RUN php -r "if (hash_file('SHA384', 'composer-setup.php') === '$(wget -q -O - https://composer.github.io/installer.sig)') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
RUN php composer-setup.php
RUN php -r "unlink('composer-setup.php');"
RUN mv composer.phar /usr/local/bin/composer

ENV COMPOSER_ALLOW_SUPERUSER 1
ENV COMPOSER_HOME /composer
ENV PATH $PATH:/composer/vendor/bin

WORKDIR /var/www/html

# laravel install
RUN composer global require "laravel/installer"
docker/nginx/default.conf
server {
    listen 80;

    root  /var/www/html/public;
    index index.php index.html;

    access_log /var/log/nginx/access.log;
    error_log  /var/log/nginx/error.log;

    location / {
        try_files $uri $uri/ /index.php$is_args$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;
    }
}

yusukeito58
■25歳時に異業種からWeb系企業に転職、現在はフリーランスとして活動■ECサイトの開発が得意■バックエンド(PHP、Ruby、Python)がメイン、フロントエンドも少々■筋トレ、ゴルフ、読書が趣味■エンジニアとしてのキャリア、アプリ開発、書評をメインに発信しています。経歴や実績、お仕事のお問い合わせ👉 http://i-yusuke.com/portfolio/
http://i-yusuke.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした