バックエンドを人に任せているが、せめてAPIだけでも使えるようになってないとフロントエンド開発しにくいなあと言うことで、簡易的にAPIサーバーを立てて値の取得することに。

とりあえずGET前提で試してみる。

一応環境

Laravelバージョン 11
php 8系

プロジェクト作成

laravel new api-server

Controller作成

今回はApiControllerという名前で作成する。

php artisan make:controller ApiController

app/http/controllers/ApiController.phpが作成される。

メソッド作成

ApiControllerを開いてメソッドを追加する。

public function apitest(){
    return  response()->json(['message' => 'hello world!']);
}

ルート設定

routeにapi.phpを新規作成する。
ファイルを開いて以下を記述する。

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ApiController;


Route::get('/apitest', [ ApiController::class,'apitest']);

api.phpに追加すると、アクセスするためのURLにdomain/api/routeと言う感じでapiが挟まるらしい。
なので今回のapitestのエンドポイント、アクセスするためには
localhost:8888/api/apitest にアクセスすることになる。

ルートファイルの追加

作成したapi.phpをシステムに追加する。
bootstrap/app.phpを開いて、以下を追加する。

api: __DIR__.'/../routes/api.php',

これで、同じlocalhostからはapiで接続できるようになったはず。

実験

resources/views/welcome.blade.phpを開く
57行目あたりに <main class="mt-6"> があるので、ここを書き換えてやる。

<main class="mt-6">
<!--ここ以下を追加-->
<script>
    async function get_test(){

        let res =await ( fetch('http://localhost:8888/api/apitest')) ;
        console.log(res);
        let data = await( res.json());
        alert( data['message']);
    }
</script>
<button style="width:200px; height:100px;"
onclick="get_test()">テスト</button>

適当にサーバー起動。なんでもいいけどターミナルで次を打つ。

php artisan serve

http://localhost:8000/ にアクセスする。

ボタンを押して、hello worldが出たらOK

外部から接続できるようにする

正確には別のoriginと言うことみたいが、要はシステムの気持ちでいえば外部ってことやろ
corsを設定する必要がある。

php artisan config:publish cors

corsのファイルを作成する。publishと言うことがあまり理解できてない。
corsファイルが config/cors.phpにできる。

これで外部からアクセスできるようになった。

あとは、corsの内容を編集して制限かけておく。