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

ディレクトリ構成

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

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

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

Laravel をさわる

Laravel をインストール

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 をさわる

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 に記述した内容が取得できます

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

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


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

6

たか橋

解説のないTips

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。