Qiitaの様なサービス作成中 ローカル環境構築 連載(1)

基本情報

次に作りたいQiita、dev.toの様なサービスについて で書いたサービスを開発中です。

アルファバージョンで公開中です。 Crieit

ローカル環境構築

とりあえず最初の1歩としてローカル環境を作ります。ちなみに下記の構成で開発を行います。

• PHP7.2
• Laravel5.6
• MySQL5.7 (どこかで8にしたい)
• Vue.js
• Bootstrap Material Design

Docker

ローカル環境はdocker-composeを使います。

docker-composer.yml

version: '2'
volumes:
  mysql_data:
    driver: 'local'
services:
  mysql:
    image: mysql:5.7
    volumes:
      - mysql_data:/var/lib/mysql
    ports:
      - 3307:3306
    environment:
      MYSQL_ALLOW_EMPTY_PASSWORD: "true"
      MYSQL_DATABASE: dbname

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    environment:
      - PMA_ARBITRARY=1
      - PMA_HOST=mysql
      - PMA_USER=root
      - PMA_PASSWORD=
    ports:
      - 8001:80

  app:
    image: dala00/laravel:7.2
    volumes:
      - .:/var/www/app
    working_dir: /var/www/app
    ports:
      - "8000:80"
    tty: true
    stdin_open: true

これでdocker-compose up -dするだけ。プロジェクトがあればlocalhost:8000でアクセスできるようになります。

ちなみにLaradockは複雑化しているという情報をどこかで見たのと、準備が面倒そうだったので使っていません。Laravelのイメージは適当に作ったものをDockerHubに登録しています。(yarnは入れ忘れてるのでPCにインストールされてるのを使ってます）

Dockerfile

FROM php:7.2-apache

RUN apt-get update && apt-get install -y git zlib1g-dev libxml2-dev
RUN curl -sS https://getcomposer.org/installer | php
RUN mv composer.phar /usr/local/bin/composer
RUN a2enmod rewrite
RUN sed -ri -e 's!/var/www/html!/var/www/app/public!g' /etc/apache2/sites-available/*.conf
RUN sed -ri -e 's!/var/www/!/var/www/app/public!g' /etc/apache2/apache2.conf /etc/apache2/conf-available/*.conf
RUN docker-php-ext-install pdo_mysql mbstring zip xml
WORKDIR /var/www/app

Laravelインストール

公式のマニュアル通りです。

composer global require "laravel/installer"
laravel new qiita

docker-compose upしてあればもうサーバーは動いているのでこれでlocalhost:8000で閲覧できると思います。

Bootstrap Material Design導入

Bootstrap Material Designを導入します。これはBootstrapでMaterial Designを実現するために拡張されたものです。Bootstrapのカラムなどもそのまま使えます。

Laravelは元々yarn.lockが入っているのでyarnでインストールします。(バージョンは適宜置き換え）

yarn add bootstrap-material-design@4.1.1

Laravelには元々Bootstrapの初期化処理が入っているので、そこも修正しておきます。(作ったプロジェクトのbootstrap.jsを読み込んでいるところもあり紛らわしいので注意）

resources/assets/js/bootstrap.js

    // require('bootstrap'); をおきかえ
    require('bootstrap-material-design');

resources/assets/sass/app.scss

// @import '~bootstrap/scss/bootstrap'; を置き換え
@import '~bootstrap-material-design/scss/bootstrap-material-design';

あとはBootstrap Material Designのjsの初期化を入れておきます。

resources/assets/js/app.js

const app = new Vue({
    el: '#app',

    mounted() {
      $('body').bootstrapMaterialDesign();
    }
});

これでBootstrap Material Designのドキュメントの「Material Design」もしくは「Bootstrap Components」を参考にしてhtmlを追加してみると表示されるようになっていると思います。

ちなみにビルドも必要なのでまだビルドしてない場合は下記を実行しておきます。jsやscssファイルを更新すると自動的にブラウザに反映されます。（テンプレート上でapp.js, app.cssを読み込む場合はurl関数などではなくmix関数で読み込むようにしておく必要があります）

yarn run hot

次回

多分Laravel Socialiteを使ってむちゃくちゃ簡単にソーシャルログイン実装
もしくはフルボトルの非ベストマッチパターン考察