PHP(Laravel) でエンドポイントをつくって、 Nuxt.js に渡す

// この記事は、 note に投稿した記事の再掲です。

ディレクトリ構成

Nuxt.js, Laravel 別々にディレクトリを作成し、それぞれ個別のプロジェクトとして扱います

- nuxt-project  # Nuxt.js
  - Nuxt のファイルたち

- laravel-project  # Laravel
  - Laravel のファイルたち

Laravel をさわる

はじめに、 Laravel を使ってエンドポイントを作る

Laravel をインストール

下記のコマンドを実行してインストールができる

$ cd /your/project/directory
$ composer create-project laravel/laravel <project-name>

パーミッションを変更

インストールしたら、 Laravel の storage ディレクトリと bootstrap/cache ディレクトリのパーミッションを 777 に変更する

ディレクトリパーミッション
Laravelをインストールした後に、多少のパーミッションの設定が必要です。storage 下と bootstrap/cache ディレクトリをWebサーバから書き込み可能にしてください。設定しないとLaravelは正しく実行されません。Homestead仮想マシンを使用する場合は、あらかじめ設定されています。

https://readouble.com/laravel/5.7/ja/installation.html#configuration

routes/api.php にエンドポイントの記述を追加

http://localhost:8000/api でアクセスできるようになる

Route::get('/api', function(){
 $nokura = array(
   [
     'title' => '主役じゃない方の僕ら',
     'story' => 'モブキャラ4人のギャグコメディ'
   ],
   [
     'title' => 'イデアの眷属',
     'story' => 'スーツの人たちがたくさん出てくる'
   ],
 );
 $array = array();
 foreach($nokura as $item) {
     $title = $item['title'];
     $story = $item['story'];
     $arr = array(
       'title' => $title,
       'story' => $story
     );
     array_push($array, $arr);
 }
 return $array;
});

Laravel を起動する

http://localhost:8000/api にエンドポイントができているはず

$ php artisan serve

次に、Nuxt.js をさわる

さきほど作った Laravel のエンドポイントから、Nuxt.js を使って情報を取得する

Nuxt.js をインストール

色々聞かれるので、 axios をインストールすると良い

$ yarn create nuxt-app <my-project>

axios を追加

インストール時に追加済なら飛ばします

$ yarn add -D @nuxtjs/axios

proxy-module を追加

$ yarn add -D @nuxtjs/proxy

nuxt.config.js に設定を追加

/api でアクセスしたら
開発環境の場合は http://localhost:8000/api
本番環境の場合は https://production-url/api
を表示してね　という設定です

module.exports = {
  dev: (process.env.NODE_ENV !== 'production'),
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy',
  ],
  proxy: {
    '/api': (this.dev) ? 'http://localhost:8000' : 'https://production-url'
  },
  axios: {
  },
}

情報を取得する

Laravel で作成したエンドポイントを asyncData() で叩くと
routes/api.php に記述した内容が取得できる

index.vue

<template lang="pug">
div
  pre {{apiPost}}
</template>

<script>
export default {
  async asyncData({ app }) {
    let data = await app.$axios.$get('/api')
    return { apiPost: data }
  },
}
</script>

おわり