試し
目次
エックスサーバー上でReactとLaravelを使ってみる
先日エックスサーバーの新サーバ簡単移行を行い、スペックがあがりました。折角なのでフロントエンドはRaectを、バックエンドではLaravelを使い、api経由でデータベースや認証を行うアプリを作ってみることに。※ページが長くなるので、このページにコードは出てきません。最終的には、Reactでnpm run buildし、distに生成されたファイルをサブドメインで作られたフォルダにアップロードします。そして、そこからブラウザを通して、バックエンドを操作します。バージョンは以下です。
Node 20.9.0
npm 10.9.0
React 18.3.1
Laravel 11サーバーのディレクトリ構成
サーバーのディレクトリ構成は以下のとおり。フロントエンドからfetchでapi folder/backend folder/public/api/~を指定し、バックエンドのapi.phpとやり取りし、jsonを返します。
Laravel
- backend project file
public_html
- frontend project file
-api folder (シンボリックリンクでbackend project file/publicへ)
-assets folder
-images folder
-index.html
-fovicon.svgリンク集をアプリ化する
リンク集を作って、アプリとして動かすことを目的にしました。よくあるTODOアプリのような感じです。内容は全然複雑じゃありません。機能としては、認証（サインアップ・サインイン・パスワードリセット）、ユーザー情報のCRUD、リンク情報のCRUD、リンク情報の一括上げ下げ（アップロード・ダウンロード）の実装。付随して、ファイルのドラッグアンドドロップやページネーション処理を盛り込むことに。
苦労したこと
フロントエンドは参考サイトを元に作成したので、それほど苦労しませんでしたが、バックエンド側では困難に直面し、apiを通して通信されているのか、動かない原因がわかりませんでした。どこでエラーが起きているのか、無反応の場合も多いのが理由。Logを入れたり、try catchを使ったりとバックエンドでエラーハンドリングする重要性を感じました。
興味深かったこと
逆に、興味深かったことはReactの挙動。下記を参考に実装したchakraUIのtoastの動きが面白かった。これまで管理画面側をつくることはほぼ無かったので、色々なギミックがあるんだと勉強になりました。※useEffectで無限ループが起きると、toastが壊れるんじゃないかと思うほど動いていたのは驚きです。
また、ページ読み込みがないSPAの特徴なんでしょうが、即座にサーバーのデータが反映されるのが良いですね。良いと言えば、broadcastChannelも面白いです。ブラウザの別タブ間で情報を反映させる仕組みですが、リンクを加えたり、移動させると別タブの表示画面に反映されるのが気持ち良いなと。ただ、Safariだと動きませんでした。なんだろう、書き方なのかな。
完成アプリ
現在もまだ、databaseを度々php artisan migrate:freshしているので登録しても無意味ですが、下記のような感じです。Node.jsを使わずに、エックスサーバー上でReactとLaravelを使ってアプリが動くことがわかりました。
ユーザー毎のリンク集の画面。