Vue2とCakePHP3を共存させる

Question

###Vue2とCakePHP3を共存して動かす
初投稿です。
現在とあるプロジェクトで、SPA型の管理画面を作成しています。
フロントのビューやルーティングなどはVue.jsで行い、CakePHP3では主にAPIを提供する形になっています。

CakePHP3で格納したセッション情報をVue.jsに渡す際に、値が空になってしまっています。
恐らく、Vueはnode、CakePHPはApacheで動かしているため、渡すことが出来ないのかと思っています。
また、URLも異なっているため、CROSに引っかかる形になっており、サーバー側の.htaccessにAccess-Control-Allow-Originの設定をしています。

このような構成が初めてな為、同一ホスト（同一ドメイン上？）で動作させる設定等のアドバイスを頂きたいと思っています。

###開発環境
CentOS6.4
Vagrant + VirtualBox
CakePHP3 （vagrant upで立ち上げて、ホスト名 dev.localhost に変更）
Vue2 （vue-cliを使用して、npm run devで立ち上げ。localhost:8080 で表示される）

###ディレクトリ構成
$ pwd
/var/www/html

app/
 ├ api/ （CakePHP3本体）
 │ ├ src/
 │ │  └ controller/（各API）
 │ ├ config/
 │ │  └ routes.php
 │ └ .htaccess
 ├ build/ （ビルドファイル）
 ├ config/ （設定ファイル群）
 ├ src/ （Vueのコンポーネント類）
 ├ dist/ （公開フォルダ）
 ├ node_module/（モジュール群）
 └  index.html

その他、eslintなどの設定ファイルは省略しています。

CakePHP側

.htaccess

DocumentRoot "/var/www/html/app/api/"
# この設定で、dev.localhostにアクセスすると、CakePHPのホーム画面が表示されています。

routes.php

$routes->connect('/api/users', ['controller' => 'Users', 'action' => 'getUsers', '_ext' => 'json']);
// このような形でAPIのURLを設定
// dev.localhost/api/users でアクセスすると、jsonデータが表示されます。

Vue.js側

npm run devをコマンドで、立ち上げて、localhost:8080でアクセス。（Vueのホーム画面が表示）

実際にAPIを叩いているコード

import axios from 'axios';

export default {
  name: 'Contractor',
  created() {
    axios.get('http://dev.localhost/api/users') // axios.get('/api/users')のように取得したい
    .then((response) => {
      console.log(response);
    })
    .catch((error) => {
      console.log(error);
    });
  },

上記のコードで取得が出来ますが、この状態だと、完全に分離してしまっているような気がして...
また、冒頭で申し上げた通り、CakePHPのコントローラーで、セッションを作成して、それをレスポンスデータとして返すとnullになっている状況です。

ご経験のある方などアドバイス頂ければと思っています。
よろしくお願いします。

参考にしたサイト類

CakePHP3とReact.jsを共存して動かす

Angular2とCakePHP3を共存させる

Answer 1

Vue.jsをNodeのサーバーで動かしているのでサーバーサイドレンダリング等をしているのでしょうか？
そうでなければvue-cliのテンプレートによりますがnpm run buildをすれば、Webpack等によってビルドされたJavascriptファイルになるので、それをCakePHPのview等で読み込んで使えば一つのサーバーになって解決するかと思います。

ビルドせずに簡単に使う場合は、

<script src="https://unpkg.com/vue"></script>

等でVue.jsのスクリプトを読み込んで使う方法もあります。

Vue.js はじめに

管理画面との事でサーバーサイドレンダリングの必要性は無いかと思いますが、必要な場合はRedis等を使って値を受け渡す方法も考えられます。

Comments

[退会済みユーザー]

ご回答ありがとうございます。
`npm run build`でdist直下にビルドされたファイルが生成されてます。
生成されたindex.htmlの内容をCakeのViewで読み込む、とのことですが、CakeのViewのどのファイルでしょうか。

Redisについても選択肢、ご教授ありがとうございます。

[aro10]

生成されたJSの方を普通にJqueryを読み込むような感覚で読み込めば使えるかと思います(layoutにあたるビューが適切かと思います)。npm run devはwebpackの開発サーバーが立ち上りHot Module Replacementというwebpackのビルド対象のプログラムが更新された際に、ブラウザにJavascriptを自動適用する開発支援機能が主な用途になります。Vue CLIのテンプレートの、webpack-simpleかwebpackがおすすめです。
https://github.com/vuejs-templates

[退会済みユーザー]

ありがとうございます。
読み込んだ場合、例えば画面遷移してURLが変わった際に（/blogsなど）、Cakephpのルーティングが発火して、cakeのビューが用意されていないよ、のようなエラーは出るように思ったのですがいかがでしょうか。

今のディレクトリ構成はこのように変更しました。

```
.
├── api // cakephpアプリケーション本体
├── index.html // npm run build でビルドしたhtmlファイル
└── static // npm run buildでビルドされたcss,js群
```

このようにした場合、トップページにアクセスすると無事にVueの画面が表示されています。
この段階ではまだCakeの中のルーティング等は何もしていない状態です。
トップページから /blogs のURLを叩いた場合に、Not Foundと表示されるのに対し、トップページからリンクをクリックして /blogsにアクセスした場合は、Vueが動いて表示されているようです。

[aro10]

Vue.jsのルータも使っている想定で、
[vue-router 2](https://router.vuejs.org/ja/)
直接URLアクセスをした際に、NotFoundになる対応は以下の公式ガイドをみると参考になるかと思います。
[HTML5 History モード](https://router.vuejs.org/ja/essentials/history-mode.html)
またLaravelになりますが、Vue.jsとPHPフレームワークの組み合わせのチュートリアル記事があるので参考になるかもしれません。
[Laravel 5.4 と Vue.js 2.2 と JWTAuth で、ログインできる SPA アプリケーションのチュートリアル 1/4](http://qiita.com/acro5piano/items/908cd751b2ea97e19be1)

[退会済みユーザー]

Vue-router2のガイド見ました！
ありがとうございます。
ドキュメントルート直下に.htaccessを作り制御出来ました。

引き続き、参考サイトも確認しながらVueとCakeで作ってみます！

[退会済みユーザー]

構築できました！
Vueから /api/blogs の形で叩けたのでCROSなどの問題もなく、セッション情報も取得できました。
ありがとうございました。

```
.
├── api （cakePHP）
├── index.html （ビルドされたファイル）
└── static（css,js群）
```