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

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

More than 1 year has passed since last update.

基本情報

次に作りたい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を使ってむちゃくちゃ簡単にソーシャルログイン実装
もしくはフルボトルの非ベストマッチパターン考察

dala00
Qiitaのようだけどポエムでも何でも書けるサービスを運営しています。 https://crieit.net 個人開発もしてるWebエンジニアです。コンタクトなどお気軽に。業務経験有:PHP, MySQL, Laravel, Vue.js, Go, RoR 趣味サービス:Flutter, React, Next.js, Nuxt.js等色々 PHPフレームワークちいたんの作者
https://crieit.net/users/dala00
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.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