はじめに
今年1月にQiitaに投稿されて以来、1,500以上のいいねを獲得している下記の人気チュートリアル。
Laravel + Vue.jsでのSPA開発のほか、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つの設定を編集します。
APP_CODE_PATH_HOST=../vuesplash
DATA_PATH_HOST=../data
3. PostgreSQLのバージョンの指定
チュートリアルではPostgreSQLのバージョン指定はありませんが、9.6.12を使用することにします。
PostgreSQLのDockerファイルを以下の通り編集します。
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に接続できるようにします。
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
return [
// 略
'locale' => 'ja',
// 略
];
9. Laravelの動作確認
http://localhost/にブラウザでアクセスし、LaravelのWelcome画面が表示されることを確認してください。
10. 後はチュートリアルを再開してください
ここまでの作業が完了したら、チュートリアルの「フロントエンドの準備」から先を進めてください。
なお、チュートリアル記事中でコマンドを実行するよう記載があった場合は、例えばそれがnpm installであれば
laradock $ docker-compose exec workspace npm install
といった具合に実行すればOKです。
最後に
以上です。
本記事が、この素晴らしいチュートリアルに取り組む方のお役に立てば幸いです