Laravel + Nuxt.js の API アプリケーション開発 #1 環境構築

Laravel と Nuxt.js を利用して、API アプリケーション開発を進めるフローを紹介していきます。第一回目は 環境構築の手法を紹介します。

Laravel と Nuxt.js

Laravel は、 PHP アプリケーションフレームワークとして人気の高いフレームワークです。PHPを利用した様々なアプリケーション開発の場面で利用され、 Eloquent と呼ばれる ORM やミドルウェア、DIコンテナと言ったWebアプリケーション開発に必須の機能が人通り揃ったWebアプリケーションフレームワークとなっています。

一方で Nuxt.js も JS フレームワークとして人気の高いフレームワークです。React や Angular と並び人気の Vue.js を利用したフロントアプリケーションフレームワークで、Vue.js の機能に加えて、 SPA 構築の VueRouter, Flux 環境構築の Vuex などのライブラリを揃え、SSR やプリレンダリングにも対応した多機能なフレームワークです。

今回は この Laravel を利用した API 開発と Nuxt.js を利用したフロントアプリ開発を、1つのリポジトリ内で進めていく手法について紹介していきます。

Laravel と Nuxt.js の環境構築

Laravel を動作させるためには、最新の PHP 実行環境と データベース、及び必要な拡張モジュールのセットアップが必要です。サーバ環境構築については、以下の記事を参考に構築を進めてください。

https://www.chatbox.blog/2018/03/27/laravel-homestead/

https://www.chatbox.blog/2018/04/10/mac-laravel-setup/

Laravel の環境構築が整ったら、以下のコマンドでLaravel のソースコードをダウンロードします。

$ composer create-project --prefer-dist laravel/laravel my-spa-app
$ cd my-spa-app

vagrant などを使用されている方は 仮想マシンのIPアドレスで、ローカルサーバを利用される方は php artisan serve を実行して http://localhost:8000 で Laravel の初期画面を確認できます。

続いてNuxt.js の セットアップを実行します。 Nuxt.js の実行には、Node 環境の整備と vue-cli コマンドのセットアップが必要です。Nuxt.js の環境構築には以下の記事を参考に進めてください。

https://www.chatbox.blog/2018/03/26/nuxt-js-start-1/

vue-cli コマンドが用意できたら Laravel をインストールしたmy-spa-app フォルダの中で以下のコマンドを実行します。

$ vue init nuxt-community/starter-template nuxtjs

これで Laravel の中に nuxtjs フォルダが出来上がります。 nuxtjs フォルダから package.json nuxt.config.js をプロジェクトルートに移動させて、 nuxt.config.js に以下の記述を追加します。

※ 既存の package.json は削除してしまってOKです。

{
  srcDir: "./nuxtjs"
}

最後に npm i を実行してセットアップは完了です。 npm run dev で開発サーバを起動して、 http://localhost:3000 にて Nuxt の初期画面が表示されることを確認しましょう。

Nuxt.js と Laravel の統合

Laravel と Nuxt.js それぞれのセットアップは完了したものの、このままでは Laravel も Nuxt.js も個別のアプリケーションとしてセットアップされただけで、上手く連携がされていません。

Nuxt.js のフロントと Laravel の API を一つのアプリケーションとして統合するためには、API の連携や dotenv の共有などの作業が必要になります。

API の連携

Laravel 側で開発した API を Nuxt の開発サーバ localhost:3000 から閲覧可能にしてみましょう。まずは Nuxt の proxy プラグインを以下のコマンドで導入します。

$ npm i @nuxtjs/proxy

次に nuxt.config.js に以下の記述を追記します。

{
  modules: [
    '@nuxtjs/proxy',
    ....
  ],
  proxy: {
    '/api': 'http://localhost:8000'
  }
}  

http://localhost:8000 はVagrant などを使用している場合、仮想マシンのIP or ホスト名に置き換えてください。上記の様にProxy の設定を入れることで、 localhost:3000 に対する /api 以下のパスのリクエストは 指定したhttp://localhost:8000 のサーバに向けて転送されるようになります。

試しに Laravel 側でサンプルのAPIを作成して確認してみましょう。 routes/api.php に以下のように追記します。

Route::get('/status', function () {
    return [ "status" => "OK" ];
});

このAPIは http://localhost:8000/api/status でも http://localhost:3000/api/status でも同様に確認できるはずです。

.env の連携

次に .env ファイルを Laravel 側でも Nuxt.js 側でも利用できるようにしていきましょう。Nuxt.js で .env を利用するために 以下のモジュールをインストールします。

$ npm i @nuxtjs/dotenv

これで Nuxt.js が .env の内容を読み込んでくれるようになります。

コード上では、 process.env を用いて環境変数を参照できるようになります。

process.env の内容は、ビルド時には正しく動作するものの、ブラウザ側では上手く取り込みが行われません。ブラウザ側でも環境変数を利用したい場合、 nuxt.config.js に以下のようにして一つ一つ 必要な環境変数の指定を行う必要があります。

require('dotenv').config()

module.export = {
  env: {
    FRONT_API_URL: process.env.FRONT_API_URL
  },
  ...
}  

まとめ

以上で Nuxt.js と Laravel を用いたアプリケーション開発の環境構築が出来上がりました。

この構成で、 Laravel で作成したAPIを Webpack devserver 経由で動作させながらアプリケーション開発を進めることが出来ます。

次回以降では バックエンド側でのAPI 開発のフローやフロント側での API 発行の管理、などを紹介していきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です