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

# はじめに

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

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

- [Vue + Vue Router + Vuex + Laravel 写真共有アプリを作ろう](https://qiita.com/MasahiroHarada/items/2597bd6973a45f92e1e8)

このチュートリアルでは、開発環境構築に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](https://www.hypertextcandy.com/vue-laravel-tutorial-setting-up-spa-project)

の

[「Laravelプロジェクトを作成する」](https://www.hypertextcandy.com/vue-laravel-tutorial-setting-up-spa-project#laravel-%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B) 〜 [「フロントエンドの準備」](https://www.hypertextcandy.com/vue-laravel-tutorial-setting-up-spa-project#%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%81%AE%E6%BA%96%E5%82%99)の直前

までに相当します。

チュートリアルの

- [(1)イントロダクション](https://www.hypertextcandy.com/vue-laravel-tutorial-introduction)
- [(2)アプリケーションの設計](https://www.hypertextcandy.com/vue-laravel-tutorial-application-design)

までを読み進めたら、本記事での環境構築を実施し、その後は[「フロントエンドの準備」](https://www.hypertextcandy.com/vue-laravel-tutorial-setting-up-spa-project#%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%81%AE%E6%BA%96%E5%82%99)から先を進めてください。

## 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設定を日本にする

```php:vuesplash/config/app.php
<?php
return [
// 略
  'locale' => 'ja',
// 略
];
```

## 9. Laravelの動作確認

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

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

ここまでの作業が完了したら、チュートリアルの[「フロントエンドの準備」](https://www.hypertextcandy.com/vue-laravel-tutorial-setting-up-spa-project#%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%81%AE%E6%BA%96%E5%82%99)から先を進めてください。

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

```
laradock $ docker-compose exec workspace npm install
```

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

# 最後に

以上です。

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