はじめに

今年1月にQiitaに投稿されて以来、1,500以上のいいねを獲得している下記の人気チュートリアル。

Laravel + Vue.jsでのSPA開発のほか、Laravelでのテストコードの書き方など幅広い知識が同時に学べ、非常にオススメです。

Vue + Vue Router + Vuex + Laravel 写真共有アプリを作ろう

このチュートリアルでは、開発環境構築にLaravel Valetを使っていますが、私の場合はDocker(Laradock)で環境を構築しました。

Dockerで環境を構築したい方は、参考にしてみてください。

環境

macOS High Sierra 10.13.6
Docker 18.09.2

ディレクトリ構造

本記事での環境構築を終えると、下記のディレクトリ構造が出来上がります。

├── data // データベースのディレクトリ
├── laradock // Docker関連ファイルのディレクトリ
└── vuesplash // Laravelのルートディレクトリ

環境構築手順

本記事での環境構築手順は、

Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (3) SPA開発環境とVue Router

の

「Laravelプロジェクトを作成する」〜「フロントエンドの準備」の直前

までに相当します。

チュートリアルの

までを読み進めたら、本記事での環境構築を実施し、その後は「フロントエンドの準備」から先を進めてください。

1. Laradockのコピー

プロジェクトのルートとなるディレクトリに、Laradockをコピーします。

$ git clone https://github.com/Laradock/laradock.git

2. Laradockの.envファイルの編集

laradockディレクトリが出来上がるので、その配下のenv-exampleファイルをコピーし、.envファイルを作成します。

$ cd laradock
laradock $ cp env-example .env

laradock/.envの以下2つの設定を編集します。

laradock/.env

APP_CODE_PATH_HOST=../vuesplash

DATA_PATH_HOST=../data

3. PostgreSQLのバージョンの指定

チュートリアルではPostgreSQLのバージョン指定はありませんが、9.6.12を使用することにします。
PostgreSQLのDockerファイルを以下の通り編集します。

laradock/postgres/Dockerfile

FROM postgres:9.6.12

LABEL maintainer="Ben M <git@bmagg.com>"

CMD ["postgres"]

EXPOSE 5432

4. コンテナのビルド

コンテナをビルドします。

laradock $ docker-compose up -d --build workspace postgres php-fpm nginx

5. Laravelのインストール

Laravelをインストールします。
バージョンはチュートリアルで使用されている5.7.19にします。

下記コマンドを実行してください。
laravel/laravel . "5.7.19"の部分にある.を忘れずに入力してください。

laradock $ docker-compose exec workspace composer create-project --prefer-dist laravel/laravel . "5.7.19"

6. Laravelの.envファイルの編集

Laravelの.envファイルを編集し、LaravelからPostgreSQLに接続できるようにします。

vuesplash/.env

DB_CONNECTION=pgsql
DB_HOST=postgres
DB_PORT=5432
DB_DATABASE=vuesplash
DB_USERNAME=default
DB_PASSWORD=secret

7. データベースを作成する

まず、PostgreSQLに接続します。

laradock $ docker-compose exec workspace psql -U default -h postgres

パスワードを入力します。

Password for user default:

続いて、データベースを作成します。
データベース名は、チュートリアルで指定されているvuesplashにします。

default=# create database vuesplash;

PostgreSQLとの接続を終了します。

default=# \q

8. Laravelのlocale設定を日本にする

vuesplash/config/app.php

<?php
return [
// 略
  'locale' => 'ja',
// 略
];

9. Laravelの動作確認

http://localhost/にブラウザでアクセスし、LaravelのWelcome画面が表示されることを確認してください。

10. 後はチュートリアルを再開してください

ここまでの作業が完了したら、チュートリアルの「フロントエンドの準備」から先を進めてください。

なお、チュートリアル記事中でコマンドを実行するよう記載があった場合は、例えばそれがnpm installであれば

laradock $ docker-compose exec workspace npm install

といった具合に実行すればOKです。

最後に

以上です。

本記事が、この素晴らしいチュートリアルに取り組む方のお役に立てば幸いです

Vue + Vue Router + Vuex + Laravel 写真共有アプリチュートリアルの環境をLaradockで構築する