イノベーション エンジニアブログ


株式会社イノベーションのエンジニアたちの技術系ブログです。ITトレンド・List Finderの開発をベースに、業務外での技術研究などもブログとして発信していってます!


このエントリーをはてなブックマークに追加

Vue.js のチュートリアルをLaravel&Docker環境で行う

2018年になりました。

koheです。
年が明けたということで、そろそろ Vue.jsをLaravelとDocker環境上で使いたい 時期が来ましたので、作成。

環境構築

といっても、Vue.jsはLaravelの環境を作れば既に使えるようになっているため、Laravelの環境をつくれば良いだけ。 ※nginx使います

docker-compose.yml

version: '3'
services:
  nginx:
    build:
      context: ./nginx
    depends_on:
      - php
    ports:
      - 80:80
    volumes:
      - ./www:/var/www:cached

  php:
    build:
      context: ./phpfpm
    volumes:
      - ./www:/var/www:cached

  mysql:
    restart: always
    image: mysql:latest
    volumes:
      - ./mysql:/var/lib/mysql
    environment:
      - MYSQL_ROOT_PASSWORD=${MYSQL_ROOT_PASSWORD}
      - MYSQL_DATABASE=${MYSQL_DATABASE}
    ports:
      - 3306:3306

あとはこれに合わせた適当な.envを同ディレクトリに準備。

php-fpm Dockerfile

FROM php:7.1-fpm
RUN apt-get update \
 && apt-get install -y \
        git \
        unzip \
        libz-dev \
        aptitude \
        libpng12-dev \
        mysql-client \
        libmcrypt-dev \
        libmemcached-dev \
        libfreetype6-dev \
        libjpeg62-turbo-dev \
        nodejs \
        npm \
 && docker-php-ext-configure gd --with-freetype-dir=/usr/include/ --with-jpeg-dir=/usr/include/ \
 && docker-php-ext-install -j$(nproc) gd iconv mcrypt pdo_mysql \
 && pecl install xdebug-2.5.5 \
 && pecl install memcached \
 && echo extension=memcached.so >> /usr/local/etc/php/conf.d/memcached.ini

RUN npm cache clean \
 && npm install -g npm \
 && npm cache clean \
 && npm install n -g \
 && n stable \
 && ln -sf /usr/local/bin/node /usr/bin/node \

# install composer
RUN cd '/' \
 && php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" \
 && php composer-setup.php \
 && php -r "unlink('composer-setup.php');" \
 && mv composer.phar /usr/local/bin/composer

WORKDIR /var/www
# install vim-gnome
RUN aptitude install -y vim

nginx Dockerfile

FROM nginx:latest
COPY ./etc/nginx/nginx.conf /etc/nginx/nginx.conf
COPY ./etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf

構成や詳細はgithubに上げておきました。
https://github.com/kooooohe/Laravel-docker-minimum-required を参照

docker compose up -d でコンテナを起動。
php-fpmコンテナに入り、 composer create-project --prefer-dist laravel/laravel laravel でLaravel Projectを作成。

Vue.jsのチュートリアル

https://jp.vuejs.org/v2/guide/index.html のはじめにの箇所をやっていく。
app.blade.phpを作成し、 routesを変更する

routes/web.php

Route::get('/{any}', function () {
    return view('app');
})->where('any', '.*');

そして、assets/js/app.jsにVue.jsを書いていく。

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');


Vue.component('example', require('./components/ExampleComponent.vue'));

Vue.component('todo-item', {
    props: ['todo'],
    template: '<li> {{ todo.text }} </li>'
})

const app7 = new Vue({
    el: '#app-7',
    data: {
        groceryList: [
            {id:0, text: 'VegeTables'},
            {id:1, text: 'Cheese'},
            {id:2, text: 'Whatever else humans are supposed to eat'}
        ]
    }
})

const app = new Vue({
    el: '#app',
    data: {
        message: 'Hello kohe'
    }
})

const app2 = new Vue({
    el: '#app-2',
    data: {
        message: 'You loaded this page on' + new Date().toLocaleString()
    }
})

const app3 = new Vue({
   el: '#app-3',
    data: {
        seen: false
    }
})

const app4 = new Vue({
    el: '#app-4',
    data: {
        todos: [
            { text:'kohe1' },
            { text:'kohe2' },
            { text:'kohe3' },
            { text:'kohe4' }
        ]
    }
})

const app5 = new Vue({
    el: '#app-5',
    data: {
        message: 'Hello Vue.js!'
    },
    methods: {
        reverseMessage: function() {
            this.message = this.message.split('').reverse().join('')
        }
    }
})

const app6 = new Vue({
    el:'#app-6',
    data: {
        message: 'Hello'
    }
})

app.blade.php

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>Vue TODO</title>

        <link rel="stylesheet" href="css/app.css">

        <script>
            window.Laravel = {};
            window.Laravel.csrfToken = "{{ csrf_token() }}";
        </script>
    </head>
    <body>
        <div id="app">
          {{-- <example></example> --}}
          @{{ message }}
        </div>
        <div id="app-2">
            <span v-bind:title="message">
                Hover
            </span>
        </div>
        <div id="app-3">
            <span v-if="seen">
                show message
            </span>
        </div>
        <div id="app-4">
            <ol>
                <li v-for="todo in todos">
                    @{{ todo.text }}
                </li>
            </ol>
        </div>
        <div id="app-5">
            <p>@{{ message }}</p>
            <button v-on:click="reverseMessage">Reverse Message</button>
        </div>
        <div id="app-6">
            <p>@{{ message }}</p>
            <input v-model="message">
        </div>
        <div id="app-7">
            <ol>
                <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
            </ol>
        </div>

    <script src=" {{ mix('js/app.js') }} "></script>
</html>

Vue.jsをコンパルしたいときは
php-fpmコンテナに入り
npm run watch-pollを行う。 dockerを使用する場合はこのpollを使わないと上手くコンパイルされない。

vuejs laravel.gif

まだVue.jsの基礎を行っただけですが、これからもっと勉強して、Applicationを作っていきたいと思います。 次回はLaravelとVue.jsを使ったApplication開発に、コンテナを使ってデプロイまで行おうと思います。

おわり