[Laravel+React(Next.js)]シンプルなログイン機能付きSPA+APIサーバ構成を準備する

今までなんだかんだ後回しにしていたシンプルな構成の手順をメモ。

要件

・LaravelをAPI、React(Next.js)をSPAとしてデプロイする。
・それぞれサブドメインで稼働させる。[例]API : api.muchilog.com、SPA:service.muchilog.com
・ログイン機能有り(Cookieベース)
・ReactはNext.js+TypeScript

蛇足ですがJWTはCookieで事足りるなら使わないに越したことはない派です。それではやっていきましょう!

Laravelプロジェクト作成

PHPやComposerのインストールがまだの方は過去記事を参考にしてください。

まずはプロジェクトを作成します。ターミナルにてプロジェクトを作成したいフォルダへcdコマンドを使って移動後、

composer create-project --prefer-dist laravel/laravel cookieApi

と入力します。「cookieApi」がプロジェクト名にあたるので、好きな名前に変えてください。

作成が完了したら、cdコマンドでプロジェクト内に移動しサーバをコマンドで起動します。

cd cookieApi
php artisan serve

-- 起動した場合、サーバのアドレスが表示される
 INFO  Server running on 
http://127.0.0.1:8000
.

ちなみに127.0.0.1とは自分自身のことを表すIPアドレスです。
ブラウザからアクセスして以下のような画面が表示されたらOK。

ちなみにLaravelのバージョンは10でした。一旦この状態で放置。

[Laravel]ログイン処理実装

まずはLaravelの中でログインができるようにしていきましょう。Laravelにはいくつかの認証パッケージが存在しますが、今回はBreezeを使います。プロジェクトルートに移動して以下のコマンドを実行。

composer require laravel/breeze

確認用のUIは必要ないので、Breeze api用のartisanを実行。

php artisan breeze:install api

このままではMySQLへの接続ができないので、マイグレーションが実行できません。
まずは今回のプロジェクトで使用するDBとログインユーザを作成しておいてください。LaravelプロジェクトをRDBMSへと接続する設定を追加します。.envファイルを開き、以下の記述を変更。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=cookietest
DB_USERNAME=cookietest
DB_PASSWORD=test

それぞれ自分自身が設定したものへ変更してください。そして以下のコマンドを実行。

php artisan migrate

テーブルが作成されていることを確認してください。

その後、サーバを起動するとバージョン情報が表示されるかと思います。

php artisan serve

こんな一瞬でこれだけの物が出来てしまうなんて最高ですね。

api処理でもcookieを使うように設定を追加します。
app/Http/Kernel.phpにて以下のように変更。

       'api' => [
            \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
            \Illuminate\Routing\Middleware\ThrottleRequests::class.':api',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,

            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Session\Middleware\StartSession::class,
        ],

config.cors.phpにて

    'supports_credentials' => true,

になっているか確認。

.envに以下を追加。

SANCTUM_STATEFUL_DOMAINS=localhost:3000
SESSION_DOMAIN=localhost

ここまでで、一旦Laravel単体での認証機能は準備できました。

[React(Next.js)]の準備

一から作ると超大作記事になってしまいます。素晴らしいリポジトリを見つけたのでこれをベースにします。

GitHub - kullarkert/breeze-next-ts: An application / authentication starter kit frontend in Next.js with typescript for Laravel Breeze.
An application / authentication starter kit frontend in Next.js with typescript for Laravel Breeze. - GitHub - kullarkert/breeze-next-ts: An application / authe...

ダウンロード後、.env.exampleをコピペして.env.localを作成します。開くとバックエンドのパスを書くところがあるので変更する必要があれば変えてください。

この状態で、

npm install
npm run dev

を実行するとLaravelの画面が出てきますが、Next.js側で再現してあるだけなので気にせず。まずはユーザ情報を登録してみてください。

まとめ

一応形にはなりましたが、これだけでは実務で足りないものがあるのも事実。ただログイン周りを実装したことがない人にとってはコードを読み進めると良い勉強になると思います。

レンタルサーバはConohaWINGが最強にオススメ!

muchilogでは今までいろんなレンタルサーバやSaaSを使ってきましたが、今では全てをConohaWINGにて運営しています。

■今まで使ってきたサービス一覧
・さくらレンタルサーバ(ベーシックプラン)
・カゴヤ
・Azure
・AWS

今ではこのブログは勿論、webサービスのバックエンドやアプリのサーバ機能もConohaWINGで動かしています。
そんなConohaWINGのメリットをいくつか紹介します!

【国内最速No.1】高性能レンタルサーバーConoHa WING

無料で最大2個の独自ドメインが使える!

サイト運営に必要な独自ドメインをなんと無料で取得することが可能です!これだけでも月100円以上は運営費が節約できます。

優れた速度と安定感

私がAzureやさくらを解約した大きな理由はこれ。Conohaは非常に安定して稼働しており、ダウンタイムがほぼ発生しません。発生した場合は潔くお知らせしてくれます。
また、このブログは勿論、バックエンドとして動いてるプログラムも処理速度が大幅に向上しました(体感で倍速以上)。 Azure等のSaaSからレンタルサーバに移行するって普通考えられませんよね?しかし実際に大きなメリットを感じているのです。

頻繁に開催されるキャンペーン

ConohaWINGは半額に迫るようなキャンペーンを頻繁に開催しています。このキャンペーンによって、性能的には業界トップクラスであるにも関わらず、 月額料金換算で最安値クラスで使えるのです。
基本的に長期一括契約の方がお得になるため、muchilogでは最長で契約することをオススメします。価格と性能のバランスを考えれば他に乗り換えることも考えれられませんし。

レンタルサーバは必須です!

web系のプログラミング学習を進める際には、レンタルサーバの契約は必須と思ってください。ローカルの環境と本番環境で動作が違うことは良くありますし、ポートフォリオを公開するのも大切です。

学習や制作に集中するためにも、満足度、速度、安定度全てのレベルが高いConohaWINGを最強にオススメします!

web系サービス開発会社に転職したい!

muchilogではIT系へ転職したいという方には「自社サービスを運営しているweb系企業」への転職をおすすめしています。

web系は「自由な社風」「成長できる環境」「ホワイトな労働条件」であることが多いからです。

そんなweb系企業への転職を確実にするためのプログラミングスクールが登場しました。


RUNTEQ

RUNTEQはただのスクールじゃない!

RUNTEQはweb系の開発会社。開発会社が運営するスクールなので必要とされる技術力は勿論習得可能。しかしそれだけではないのです。

特にweb系で転職・就職活動を行う際にはポートフォリオを求められることがあります。ポートフォリオとは自分自身の作品のことで、技術力や企画力を示すものです。

RUNTEQではポートフォリオの作成を企画段階からサポートしてくれます!

他のプログラミングスクールでは提携企業の派遣やアルバイトとして就職するしかなかったりもしますが、RUNTEQはあなたの市場価値を高める方法まで教えてくれるということですね。

また、RUNTEQが扱う教材はどれも第一線で当たり前に使われている技術。特に未経験者の独学ではどうしてもスキルセットに穴が出来てしまいます。その点RUNTEQは確実に現場力を養えます。

そして2020年2月〜2021年12月までの内定者の98%がweb系企業に内定しています。これはRUNTEQの指導力とサポートが優れていることの証拠でしょう。

まずは無料説明会に申し込んではいかがでしょうか?

RUNTEQ


Laravel Next.js React ts 未分類
muchiをフォローする
MUCHILOG
タイトルとURLをコピーしました