【Laravel＋Vue+axios+docker】アプリ開発環境の作り方を公開します

未経験エンジニア志望
「DB接続できないー！Vueとかライブラリ使いたいけどうまく読み込めないー！全然進まないもうやだー！」

といった悩みに対しての記事です。

この記事を書いている僕（＠Shoot58153748）は、
社会人1年目で大手SIer退職→プログラミング未経験から独学→Webエンジニア
という経歴を持ち、

2019年10月現在メガベンチャーの社内スタートアップの部署で
エンジニア（1年目）をしてます！
未経験からWeb系エンジニアになってはや半年。。。

最初の数ヶ月は、Webエンジニアとして働く上での基礎知識がなさすぎてかなり酷い目にあいました。笑

特に、初心者は何が一番辛いって、、、

「アプリの開発環境」

ローカルでアプリを作り始める前に数々のエラーに遭遇し、１人だと全く進まなくて途中で投げ出したくなってしまいます。

分かります。分かりますよ。。。（体験済）

ちなみにここで言う開発環境とは、DB接続が可能であり、Vueなどの必要なライブラリが使える状態になっていることです。

（注：PHPのインストールみたいな話ではありません）

そこで今回は、今後Web系プログラミングを網羅的に学習をするための環境構築をしていきます！

後々の開発の基礎となるとても重要な記事です！

プログラミング初心者の方や駆け出しの方は、ぜひ参考にしてみてください。

Webアプリ開発全体の記事はこちら
↓↓
ツイッター風SNSアプリを作ろう！
https://kumatetsublog.com/laravel-tutorial-web-application

Github
https://github.com/Shuto-san/laravel-vue-docker

PHPフレームワーク「Laravel」って何？

Web系プログラミング言語PHPの最も代表的なフレームワークであるLaravelを使用します。

フレームワークは、プロジェクト開発に必要な設定やファイルなどを自動的に作成してくれるので、学習コストが非常に低いです。

初心者にはハードルが低いのに加えて、
LaravelフレームワークはWebプログラミングの基礎を満遍なく学べます。

PHP自体、Web業界で多く使われているので、

最初に選ぶ言語としては最適だと思います。

SHOOTの職場はスタートアップチームのため、

開発スピードを優先してLaravelが採用されています。

作成プロセス

プロジェクトディレクトリを作成

まずは、プロジェクトのディレクトリを作ります。

composerを用いて、laravel-vue-dockerという名前で作成。（名前はなんでも良い）

作成後は、cdで現在のディレクトリを移動します。

composer create-project laravel/laravel laravel-vue-docker --prefer-dist
cd laravel-vue-docker

プロジェクトディレクトリの中身は以下のようになっています。

それぞれのディレクトリには役割があります。
ざっと主要なディレクトリだけ説明すると、

app: コントローラーやモデルなど、アプリの主要部分
config: 様々な設定がまとまっている
public: 一般に公開される画像やビルド後のJS, CSSが格納される
resources: view（表示ページ）やビルド前のJS,CSSが格納されている
routes: ルーティング（URLとメソッドの紐付け）

必要なパッケージ（Vue, axios, Redis）をインストール

今回はVueというJSのフレームワーク、axiosというAjax通信に使うライブラリ、Redisという高速DB（NoSQL）を使います。

いずれもWebの開発によく使われる技術なので、選定しました。

実際にSHOOTの職場でもバリバリ使ってます。

npm install vue axios
npm install
composer require predis/predis
composer install

DBとキャッシュを起動（Dockerを利用）

Dockerというコンテナ技術を使って、DB（mysql、Redis）を起動します。

Dockerを使うと、自分のパソコンを汚すことなくDB使えるので最高です。

とても奥が深い技術なので、ググってみると面白いですよ。

到底このページでは収まりきらないので、ここでは説明省略します。

Dockerを立ち上げるために、それ専用のファイルを新たに作成。

docker-compose.yml

version: '3.3'
services:
  mysql:
    image: mysql:5.7
    command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci
    container_name: shoot-mysql
    ports:
      - "3306:3306"
    environment:
      - MYSQL_ROOT_PASSWORD=shootpass
      - MYSQL_DATABASE=shoot
  redis:
    image: redis
    container_name: shoot-redis
    ports:
      - "6379:6379"

image: イメージファイルを指定。イメージファイルを元にコンテナが作成される
command: 文字コードを設定。
container: コンテナの名前を設定。
ports: ポート番号。左側が外部アクセス用

このファイルを以下のコマンドで実行します。

docker-compose up -d

これで、mysqlコンテナとredisコンテナが作成され、コンテナの中にあるDBが起動しました。

アプリのDB接続先を設定

DBはすでに起動しているので、アプリ側のDB接続先を設定してあげましょう。

SHOOTは、最初の頃DB関連は結構つまづきました。。

HOST名、ID、パスワードに注意すれば問題なく接続できるはずです。（会社になるとDBに権限があるので、少し厄介）

DBの接続先は、.envファイルに記述します。

.env.local

APP_NAME=Laravel
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=shoot
DB_USERNAME=root
DB_PASSWORD=shootpass

BROADCAST_DRIVER=log
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

DB_CONNECTION=mysql以下が、mysqlに関する設定です。

DB_HOSTは、ローカルホストなので、127.0.0.1
DB_HOST, DB_PORT, DB_DATABASE, DB_PASSWORDは、
先ほどのdocker-compose.ymlと同様の設定にします。

DB_USERNAMEは、デフォルトでrootになるので、そのままroot。

REDISに関しては、PASSWORDを設定しなかったので、null。

.envファイルは、
DB接続先のように、基本的に環境（ローカル、STG、本番）によって設定値が変わるものを記述します。

JSとSASS、ビルドファイルを作成

実は、VueやSassなどは、そのままではブラウザで動きません。
ソースコードを元に、実際に動くプログラムに変換してあげる必要があります。

その作業をビルドと言います。

今回は、laravel-mix(webpack)というビルドツールを使います。

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

mix.autoload({
  vue: ['Vue', 'window.Vue'],
  axios: ['axios', 'window.axios']
});

app.jsとapp.scssをビルドした出力先をpublicディレクトリのjs, css直下に指定します。

autoloadに上述のように記述することで、先ほどインストールしたvueとaxiosをjsファイルで使用できるようになります。

さて、jsとsassファイルを作成していきます。

app.js (resources/js/app.js)

require('./csrf.js');

new Vue({
  el: '#app',
  data: {
    vueData: 'you can use Vue, Axios, Sass, Mysql and Redis'
  },
  methods: {

  }
});

csrf.jsという下記のファイルを読み込んでいます。

クロスサイトフォージェリと呼ばれる攻撃から守るため、Axiosを用いた通信の際に、全ての送信リクエストにCSRFトークンを自動的に追加させる処理を書いたものです。

セキュリティー対策ですね。

あまり気にせず読み進めてもらって構いません。

その下は、Vueの実装。
vueDataという変数をページに表示します。

csrf.js (resources/js/csrf.js)

const token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
  window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
  console.error('CSRF token not found');
}

次に、scss(sass)を記述します。

普通のCSSのみの時と比べると可読性が恐ろしく上がるので、

便利です。

app.scss (resources/css/app.scss)

// style
@import 'style'

style.scss (resources/css/_style.scss)

main {
  color: red;
}

ここでは、SCSSが効いてることが分かれば良いので、

文字を赤くするCSSのみ書きます。

blade（View）を作成

最後に、表示するページを作成します。

BladeというテンプレートエンジンにHTMLを記述していきます。

テンプレートエンジンとは、サーバーからもらったデータをもとに、HTMLの断片を作るという処理をしてくれるという優れものです。

(ここでは、テンプレートエンジンの強みを生かしてないですが)

welcome.blade.php (resources/view/welcome.blade.php)

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <link rel="stylesheet" href="{{ mix('/css/app.css') }}">
    </head>
    <body>
      <div id="app">
        <header>
            <strong>Hello, World</strong>
        </header>
        <main>
            @{{ vueData }}
        </main>
        <footer>
        </footer>
      </div>
        <script src="{{ mix('js/app.js') }}"></script>
    </body>
</html>

セキュリティー対策で、csrfのmetaタグを忘れずに記述するようにしましょう。

<link rel ..>, <script src ..>でビルドしたファイルを読み込み、

@{{ vueData }}でapp.jsのVueで実装した変数を出力しています。

{{ }}は本来、bladeの変数を出力（レンダリング）しますが、

{{ }}の前に@をつけることでエスケープし、Vueの変数を出力できます。

scssでmainのcolorをredにしていたため、vueDataの文字列が赤字になります。

ビルド

ソースコードは完成したので、後はビルドします。

npm run dev

環境を設定する

laravelは.envを参照してアプリケーションが動きます。

そのため、先ほど作成した.env.localファイルを.envファイルにコピーしてあげます。

cp .env.local .env

アプリキーを作成

Laravelのアプリキーは暗号化やパスワードリセットなどセキュリティ上で重要なところで使用されるので、手動で作成します。

多分作成しないとエラーになります。

key:generateで作成した後は、キャッシュを削除して.envファイルを反映させます。

php artisan key:generate
php artisan config:clear

アプリを起動

最後に、アプリを起動してアクセスしてみましょう！

以下のような画面が出たら成功です！

php artisan serve

http://127.0.0.1:8000

これで、Webプログラミングの基礎を学ぶための環境構築は終わりました。

次回は、フレームワークの処理の流れを解説します！
↓↓

それでは！