初心者様向け記事として忘備録を兼ねて書きました。
Laravelを最近はじめました。
PHPフレームワークがCakeが2になった頃以来で（え？もう10年経ってるかも・・）いろいろ戸惑ったのでそこを共有できたらと・・
私が想定してたのはLaravel部分は完全に新規ですが、サーバーにはすでに何らかのシステムが動いていて、とあるフォルダ内にこのLaravelのシステムを入れたいんだ！って言う状況です。
「初心者がLaravelに手を出すな！」とか質問で答えてた人が過去にいましたが、さすがに余計なお世話でしょう。
ただ実際のネット上の記事はまっさらなサーバーにLaravelをドカンと置く想定の記事が非常に多く、今回の想定の物はズバリはかなり少なかったのでCakeの時も苦労しましたが、結局今回も苦労しましたので残しておこうという感じです。
そんなLaravel初心者の私が初心者＋安めのレンタルサーバーを想定して、さらにローカルで開発するにあたっての環境を作ってみたいと思います。
当然セオリー外の事も多いかと思いますがやばい所はやんわりと指摘していただけると嬉しいです。
長いですが中身はないので中級者以上の方はそろりとBackSpaceを・・・
今あるシステムの管理画面を今回Laravelで作り直す！って言う想定です。
想定する技量
・下の記述に等しいですが、Node.js npm PHP MySQL composer について全くわからない・・は難しいかと
・composerやnpmについて最低限使えて、Laravelのプロジェクトを作ったりそこにVueの環境を作ったり「php artisan serveでlocalhost:8000が起動してくる」とか「npm run watch」は問題ないぞって言う人はほぼ問題ないかと
・筆者の環境はWindows
・ローカルはXAMPPで良いけどPHP＋MySQLであること
・Laravelは最新（この記事を書いている段階ですとLaravelは8.65.0が入る）
・PHPは7.4でやってます（Laravel8だと7.3以上じゃないと動かないはずなので問題ないと思う
・Laravel+Vue (個人的な環境はそこにVuetify+Tailwindcss)
・レンタルサーバーは、XSERVERのX10やさくらインターネットのスタンダード等、「SSHで接続できる」、「シンボリックリンクが張れる」サーバーなら大丈夫と思います。
問題ある人はまずは他記事でそこまでを学習してください。
まずはプロジェクトが作られており正しい場所で公開される事（見せたいURLでアクセスできる）がまず最初
どういう話かというと、Laravelプロジェクトを作っても正しい位置（URL）で公開できないと意味なくね？じゃあどうやるの？って話です。
私の場合はここが最初に気になったので。
意味はこの先にも書いてありますがLaravelに限らずPHPフレームワークは通常サーバーの公開部分にプロジェクトを置きません。
ですのでLaravelプロジェクトの公開部分は当然サーバーの非公開部分に存在します（ややこしい言い方
ですので、通常は一番後回しの部分を先にやって安心したいという話です（汗
フォルダ構成
フォルダの構成はこんな感じで。
/home/ユーザー名/ドメイン名/public_html/*.*（すでにあるシステム）
|
|-laravel/app
| /public/*.*
って感じです（簡略しすぎ
XSERVER等では記述した感じで、さくらインターネットですと「public_html」が「www」になりますね。
公開ルートより下部にプロジェクトを置くのはフレームワークでは割と普通です。
じゃあLaravelの公開はルート下部にあるのにそれをどうしたらすでにあるするのか？さあわからない。
よく検索すると出てくるのは「publicのindex.phpを移動して云々」って記事です。
はっきり言ってこれは悪手だと思います。
こんごindex.phpの扱いが一切変更がないともわからないですし、何よりもファイルを移動させるのは個人的に嫌なので。
結果として個人的に一番正解かなと思ったのは「シンボリックリンクを張る」でした。
簡単に言えば見かけ上のフォルダを（ファイルでも本当は良いんですが）作成して、そこにアクセスがあったらリンクを張った場所が実際はアクセスされるってやつです。
今回ならhttp://ドメイン名/adminにアクセスがあったら実際は/home/ユーザー名/ドメイン名/laravel/publicを見に行ってくれるというのを定義します。
あえて言えばどこでもドア？（違う？
これも細かくは記事を探して見てください。
まずはSSHでレンタルサーバーへ接続してください。
大抵はユーザー名のディレクトリへ接続されるはずです。
/home/ユーザー名/
そこからpublic_htmlまで移動します。
/home/ユーザー名/ドメイン名/public_html/
この位置で今回の例で言えば
/home/ユーザー名/ドメイン名/laravel/app/public
にシンボリックリンクを張ってください。
例えばですが
ln -s /home/ユーザー名/ドメイン名/laravel/app/public /admin
って感じです。
public_html直下でコマンド入力すること、-sの前後、/adminの前にスペースがある事、に注意してください。
基本的に公開部分はこれでいけます（XSERVERでは確認済み。さくらインターネットも記事を見る限り同じなので大丈夫でしょう・・雑
で公開に関してはこれでOKです。
私はこの公開場所をどう設定していいのかよくわからずに数日費やしました・・・
実はここまでが前置きです。
毎回サーバーへアップして確認するわけには行かないので実際はローカルで作業をしますよね。
ローカルってことはレンタルサーバーとは違って全部自分で環境を構築する必要があります。
その際のLaravelやVueで悩みそうなあれこれを少し書いてみたいのが今回の本題です。
Laravel＋Vue
当たり前ですがここからはローカルです。
大げさですが、通常は先の例で行けば
/home/ユーザー名/ドメイン名/laravel/の位置でphp artisan serveでlocalhost:8000が立ち上がりWEBブラウザへ入力することでプロジェクトを起動できます。
今回の場合は同じディレクトリ内でnpm run watchする事でVueの部分が修正されたりで保存すると自動でコンパイルされます。
でここまではみんな割とスムースに行くかと思います。
理解しておくこと
Laravel+Vue初心者が理解する必要があるのは、Laravel+Vueの場合、最初にindex.blade.php（プロジェクト作成時のファイルをそのまま使ったのならwelcome.blade.php）が表示されます。
そしてその後のフロント側制御はVueに移り、Laravelはバックエンドに専念しますのでそれだけ覚えておけば良いかと。
Vueからaxiosなどでapiにアクセスに行く際にLaravelはがんばります。
それ以外の見えてる部分はすべてVueが担うという形がLaravel+Vueになります。
何が問題なのか？
新規で既存のファイル等を気にしないのならこの先は/resources/js/内にassetsフォルダでも作成して、画像を入れていけばVueのテンプレートからアクセスできるのでなんの問題もありません。
今回の記事は既存システムへLaravelをぶっこむのが目的です。
今回の話ですと実際は例えば管理画面だとするとECとかなら商品マスタ等で既存商品の写真とかがどこかのフォルダにごっそりあることでしょう。
管理画面ならそのファイルの読み出しはもちろん、それ以前にファイルの有無や、書き込み、削除とやりたいことがあるでしょう。
/home/ユーザー名/ドメイン名/public_html/img/item/0001.jpgの画像を読みたいとかあると思います。
ですがLaravel部分(API部分)はStorageの設定とかでローカルフォルダを設定できるので問題ないのですがVueの部分は基本的にはassets内だったりのフォルダにしかアクセスできません。
ですので強硬策として別でWEBサーバーを立ち上げでアクセスさせます。
難しい話ではないのですが、ただのVueCLIならapp.vueでローカル判断を書けば良いんですが、Laravel+Vueだと少し変わってしまうので、この場合はVueのルーターなどでローカル判断して、ローカルならその別で起動したサーバーをファイルの前につけるってのをやります。
/home/ユーザー名/ドメイン名/public_html/の位置でphp -S http://localhost:8081を実行。
これでpublic_htmlをルートとしたローカルのWEBサーバーが起動します（XAMPPでも良いと思うのでURL等を読み替えてください）
例としてローカルと判断した場合はVueのscriptのcreated等でhost:"http://localhost:8081を設定して、テンプレートで<img :src="host+'/img/item/0001.jpg'">と設定すれば無事にVueからサーバーの既存の画像を表示させられました。
この起動したサーバーはあくまでVueからの画像等ファイルアクセス用なのでこれ自体をブラウザで表示させる必要はありません。
ややこしいですが、あくまでブラウザに表示しているのはphp artisan serveで起動したLaravelのlocalhost:8000なので気をつけてください。
あとがき
正直、後半はLaravelはほぼ関係ありません。
どちらかといえばVue等のローカル開発の一番基本的な部分ですが、初心者の方はかなり躓く部分だと思います。
Vueの経験なしにLaravel+Vueとして入ってくるとこのローカル開発の基礎がわからず悩んでしまう方を相当見かけました。
ローカルでの動作、サーバーでの動作をそれぞれ別物だと理解するのに時間がかかるのだろうと前から思っていました。
（同じ画面内でアクセス先がいくつもあるわけですから、理解が難しいのはわかります）
文章がまとめられない人間なのであれですが参考になれば幸いです。