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

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

新規登録して質問してみよう
ただいま回答率
85.53%
Vue.js

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

Apache

Apacheは、Apache HTTP Serverの略で、最も人気の高いWebサーバソフトウェアの一つです。安定性が高いオープンソースソフトウェアとして商用サイトから自宅サーバまで、多くのプラットフォーム向けに開発・配布されています。サーバーソフトウェアの不具合(NCSA httpd)を修正するパッチ(a patch)を集積、一つ独立したソフトウェアとして開発されました。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Slim

SlimはPHPアプリケーションを開発するための軽量なマイクロフレームワークです。

Q&A

解決済

1回答

7057閲覧

PHP・Vue.js(VueCLI)における環境構築方法

Ison

総合スコア14

Vue.js

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

Apache

Apacheは、Apache HTTP Serverの略で、最も人気の高いWebサーバソフトウェアの一つです。安定性が高いオープンソースソフトウェアとして商用サイトから自宅サーバまで、多くのプラットフォーム向けに開発・配布されています。サーバーソフトウェアの不具合(NCSA httpd)を修正するパッチ(a patch)を集積、一つ独立したソフトウェアとして開発されました。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Slim

SlimはPHPアプリケーションを開発するための軽量なマイクロフレームワークです。

0グッド

1クリップ

投稿2018/08/31 15:15

編集2018/09/01 00:52

前提・実現したいこと

以下を使用した環境構築について、アドバイスをお願いしたいです。

種類名前
WebサーバーApache
サーバーサイド言語PHP
PHPフレームワークSlim
フロントエンドVue.js(VueCLI)

相談内容

Vue.jsで、vueファイルを使用する際は、一般的に、VueCLIで環境を構築するものだと認識しております(もちろん一から環境を構築出来るということも存じています)。

ただ、どのような紹介記事においても、VueCLIの導入に際して、サーバーサイド言語と組み合わせて使用するようなパターンについての言及を、見たことがありません。

今回、PHPをサーバーサイド言語として利用した場合に、どのようにVueCLIと組み合わせて利用するのかを具体的に知りたいと思い、相談させていただきました。

例えば、PHP・Slimフレームワークの組み合わせでのディレクトリ構成を考えた場合、以下のようになるかと考えております。

※以下の、Projectというのは、NetBeansやEclipseにおけるルートの単位(1ビルド単位)です。

Project | + src (PHPソース) + public (公開ディレクトリ) + index.php + assets | + js + css + img

確認したいこと

  • 上記ディレクトリに、VueCLIを組み合わせて使う際は、どのようなディレクトリ構成がベターなのでしょうか?

  • そもそも、Projectはクライアント(Vue.js)とサーバーサイド(PHP)で別個になったりしますか?

  • よくあるサンプルでは、node.jsのWebサーバーを起動して、8080にアクセスして、そちらでページを表示する流れになっていますが、開発時の動作確認にはApache+PHPを使いたいのです。そのような場合、ホットリロード(vmファイルを編集したらすぐに反映確認できる)を組み合わせてスピーディーに動作確認するようなことはできたりするのでしょうか?


フロントエンドは、今までに Knockout.js や AngularJS、Vue.JS(vueファイルの使用がない)、を経験しておりますが、Vue.jsの、vueファイルをビルドする領域に突入してから、途端に高難易度になってしまったように感じます。

回答者様のご意見の他に、もし、サーバーサイドとVueCLIの組み合わせについて言及している書籍やサイトなどの情報もご存知であれば、教えていただきたいです。

よろしくお願いいたします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

VueJSを使用する例においてはおっしゃるようにSPAの例が多くありnodeでHTMLをサーブする例が一般的ですが、もちろんnodeを使用しなくてもHTMLをサーブすればVueを使用することができます。

私は現在の業務でJavaをサーバーサイドにして、Java側で出力したHTMLでVueを使用しています。

Vueのシングルファイルコンポーネント(.vue)はそのままHTMLから呼ぶことはできないのでそれをコンパイル(webpackやbrowserify)を使用して(.js)ファイルにする必要があります。あとは出力された.jsをhtmlの中で普通に <script src="/dist/app.js"></script>のようにして呼んであげればよいです。

下記のようなプロジェクト構成になるのではないかと思います。(トランスパイラはwebpackを想定してます)

Project | + src (PHPソース) + vue (vueJSソース VueCLIで作成されたフォルダ) + + main.js | + app.vue | + webpack.config.js | + package.json | + node_modules + public (公開ディレクトリ) + index.php + assets | + js + css + img + dist (Vueソースのコンパイルしたものの出力先 webpack.config.jsで指定) 出力先を assets/jsにしてもいいけど区別するために分けてます

出力するフォルダについてはwebpack.config.js の中に指定があるのでそこで変更すればよいです。

HotReloadについてはSlimの中でそのような機能があればできるのではないかと思います、おそらく監視するフォルダを指定するのではないかと...
あいにくSlimについては経験がないので詳しいことはわかりません。
ちなみに私はJavaのSpringBootというフレームワークを使用しておりHotReloadの機能があるので
Vueソースのコンパイル結果のフォルダを監視対象にしていることでホットリロードできています。

投稿2018/09/01 03:19

euledge

総合スコア2404

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Ison

2018/09/01 07:57

スピーディーなご回答ありがとうございます。 非常に納得のいく内容でした。早速、試してみようかと思います。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問