質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.61%

  • CakePHP

    2264questions

    CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

  • Vue.js

    651questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue2とCakePHP3を共存させる

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 1,249
退会済みユーザー

退会済みユーザー

Vue2とCakePHP3を共存して動かす

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

CakePHP3で格納したセッション情報をVue.jsに渡す際に、値が空になってしまっています。
恐らく、Vueはnode、CakePHPはApacheで動かしているため、渡すことが出来ないのかと思っています。
また、URLも異なっているため、CROSに引っかかる形になっており、サーバー側の.htaccessAccess-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を共存させる

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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

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

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


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

Vue.js はじめに

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/07 10:05

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

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

    キャンセル

  • 2017/09/07 12:00 編集

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

    キャンセル

  • 2017/09/07 12:34

    ありがとうございます。
    読み込んだ場合、例えば画面遷移して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が動いて表示されているようです。

    キャンセル

  • 2017/09/07 15:08

    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)

    キャンセル

  • 2017/09/07 16:24

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

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

    キャンセル

  • 2017/09/07 19:58

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


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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • CakePHP

    2264questions

    CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

  • Vue.js

    651questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。