Laravel×React(Laravelの中にReactがあるパターン)でアプリを作成しサーバーにアップした際に、ドキュメントルートのpublicを消すために.htaccessを設置しました。
しかしなぜかReactからのapiリクエストがうまく動かなくなってしまったので備忘録を残しておきます。
環境
- Laravel 9x
- React 17x
- Vite
方法
ルート直下に.htaccessを設置する
ドキュメントルートのpublicを消すためにドキュメントルートの直下に以下の.htaccessを設置します。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^(.*)$ public/$1 [QSA,L]
</IfModule>apiが取れない
上記の方法でpublicを除いた形でも画面が表示されるようになりました。
apiに関してはAxiosインスタンスをaxios.create()メソッドで作成し、URLは環境変数から呼び出すように設定していました。
Laravel×Viteでは環境変数はVITE_ というプレフィックスを付与したうえで、import.meta.envオブジェクトを介して呼び出すことができます。
https://readouble.com/laravel/9.x/ja/vite.html
https://ja.vitejs.dev/guide/env-and-mode.html
VITE_APIURL=https://example.comimport axios from "axios";
export const axiosApi = axios.create({
baseURL: import.meta.env.VITE_APIURL,
headers: { 'X-Requested-With': 'XMLHttpRequest' },
withCredentials: true,
});しかし、上記の設定では、apiリクエストがすべてstatsu:200でhtmlが返却されるようになってしまいうまく動きません。
解決策
.htaccessでpublicを消す設定をしたのでapiリクエストもpublicを除いた形で取得できると思い込んでいたのですが、apiリクエストに関してはpublicを記入した形で設定しなければなりませんでした。
VITE_APIURL=https://example.com/public関連記事
