この記事で行うこと
- React（フロント） + CodeIgniter4(バックエンド）を利用
- CodeIgniter4のインストール・設定から、Reactのインストール・設定、最終的にフロント側からバックエンド側へデータの送受信ができている状態までの環境を構築する
その他の環境
- macOS Monterey(macbook air 2020 ,M1チップ)
- VisualStudio Code
参考にしたサイト記事
英語の記事ですが書いてくださった方に感謝
構築スタート
バックエンド（CodeIgniter4/以下ci4)
プロジェクトを作成するディレクトリ移動
私の環境ではMAMPを利用していたのでhtdocsでプロジェクトを作成しました。
ここは自身の環境に合わせてディレクトリを移動してください
cd /Applications/MAMP/htdocs
そしたら、フォルダを作成してください。
任意名でOKです。(今回は、 myProject とします）
composerを利用してci4プロジェクトを作成する
今回、composerを利用しました。
下記でcomposerの有無が分かります。
composer -v
ci4のプロジェクト作成
composer create-project codeigniter4/appstarter backend
上記コマンドを実行すると、backendフォルダが作成されます。
その中にci4のパッケージを使ったプロジェクトができます
サーバーを起動＆確認
cd backend
php spark serve
そしたら、 http://localhost:8080/ にアクセスし、ci4の画面が表示されているか確認しましょう。
データベース/テーブル作成
.envファイルで制御する方法もありますが、私はDatabase.phpを利用しました。
DBのツールは phpMyAdmin を利用しています。
他にも、MySQL、SQLyog、HeidiSQL などが利用できます。
Database.phpは,app/Config内にあります。
Database.php を開き、
下記の部分を自分の環境に合わせて変更してください。
public $default = [
'hostname' => 'localhost',
'username' => 'root', //DBのID
'password' => '******', //DBのPW
'database' => 'ci4_db', //利用するデータベース名
'DBDriver' => 'MySQLi', //(phpMyAdmiを利用する場合は左内容でOK)
そしたら自身のDBツールで、入力した内容に対応する、データベースなどを作成しておきましょう
テーブルを作成するためのファイルを作成
backendのディレクトリで下記コマンドを実行します
php spark make:migration Products
すると、app/Database/Migrationsのフォルダ内にファイルが作成されます↓
作成されていれば、ファイルを開き下記内容を入力しましょう
<?php
namespace App\Database\Migrations;
use CodeIgniter\Database\Migration;
class Products extends Migration
{
public function up()
{
$this->forge->addField([
'id' => [
'type' => 'INT',
'constraint' => 11,
'auto_increment' => True
],
'title' => [
'type' => 'VARCHAR',
'constraint' => 200
],
'price' => [
'type' => 'INT',
'constraint' => 11,
]
]);
$this->forge->addKey('id', true);
$this->forge->createTable('products', true);
}
public function down()
{
$this->forge->dropTable('products');
}
}
そうしましたら、下記コマンドをbackendディレクトリで実行し、テーブルを作成しましょう。
php spark migrate
すると、 product テーブルがされますので確認してください。
モデルファイルを作成する
php spark make:model ProductModel
上記コマンドを実行すると、app/Modelsフォルダ内に、 ProductModel ファイルが作成されます。
その中から、 protected $allowedFields の内容を下記の通りに変更します。
protected $allowedFields = ['title','price'];
コントローラファイルを作成する
backendディレクトリにて、
php spark make:controller Products --restful
app/Controllersフォルダに、 Products.php ファイルが作成されます。
内容を下記の通りに追記します。
<?php
namespace App\Controllers;
use CodeIgniter\RESTful\ResourceController;
use CodeIgniter\API\ResponseTrait;
use App\Models\ProductModel;
class Products extends ResourceController
{
/**
* Return an array of resource objects, themselves in array format
*
* @return mixed
*/
use ResponseTrait;
public function index()
{
$model = new ProductModel();
$data = $model->findAll();
return $this->respond($data);
}
/**
* Return the properties of a resource object
*
* @return mixed
*/
public function show($id = null)
{
$model = new ProductModel();
$data = $model->find(['id' => $id]);
if(!$data){
return $this->failNotFound('No Data Found');
}
return $this->respond($data[0]);
}
/**
* Return a new resource object, with default properties
*
* @return mixed
*/
public function new()
{
//
}
/**
* Create a new resource object, from "posted" parameters
*
* @return mixed
*/
public function create()
{
helper(['form']);
$rules = [
'title' => 'required',
'price' => 'required'
];
$data = [
'title' => $this->request->getVar('title'),
'price' => $this->request->getVar('price'),
];
if(!$this->validate($rules)){
return $this->fail($this->validator->getErrors());
}
$model = new ProductModel();
$model->save($data);
$response = [
'status' => 201,
'error' => null,
'message' => [
'success' => 'Data Inserted'
]
];
return $this->respondCreated($response);
}
/**
* Return the editable properties of a resource object
*
* @return mixed
*/
public function edit($id = null)
{
//
}
/**
* Add or update a model resource, from "posted" properties
*
* @return mixed
*/
public function update($id = null)
{
helper(['form']);
$rules = [
'title' => 'required',
'price' => 'required'
];
$data = [
'title' => $this->request->getVar('title'),
'price' => $this->request->getVar('price'),
];
if(!$this->validate($rules)){
return $this->fail($this->validator->getErrors());
}
$model = new ProductModel();
$find = $model->find(['id' => $id]);
if(!$find){
return $this->failNotFound('No Data Found');
}
$model->update($id,$data);
$response = [
'status' => 200,
'error' => null,
'messages' => [
'success' => 'Data updated'
]
];
return $this->respond($response);
}
/**
* Delete the designated resource object from the model
*
* @return mixed
*/
public function delete($id = null)
{
$model = new ProductModel();
$find = $model->find(['id' => $id]);
if(!$find){
return $this->failNotFound('No Data Found');
}
$model->delete($id);
$response = [
'status' => 200,
'error' => null,
'messages' => [
'success' => 'Data deleted'
]
];
return $this->respond($response);
}
}
ルート構成を変更する
app/Config/Routes.phpの内容を変更します。
// $routes->get('/', 'Home::index');
$routes->resource('products');
CORS構成を変更する
ここが自分の中で一番難しく感じたところです。
そこで、とても助けになった記事がありました。
もし理解が乏しいなと感じる方がいれば、下記を是非読んでみてください。
では手順を進めていきます。
Cors.phpファイル作成。
backendディレクトリにて下記コマンド実行。
php spark make:filter Cors
app/Filtersにて、 Cors.php ファイルが作成されます。
下記の通り内容を変更します。
public function before(RequestInterface $request, $arguments = null)
{
header("Access-Control-Allow-Origin: *"); //セキュリティ的に良くないですが、今回は割愛しました。
header("Access-Control-Allow-Headers: X-API-KEY, Origin,X-Requested-With, Content-Type, Accept, Access-Control-Requested-Method, Authorization");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PATCH, PUT, DELETE");
$method = $_SERVER['REQUEST_METHOD'];
if($method == "OPTIONS"){
die();
}
}
内容を記載した後、app/Configフォルダ内にある、 Filters.php を開き、変更します。
public $aliases = [
'csrf' => CSRF::class,
'toolbar' => DebugToolbar::class,
'honeypot' => Honeypot::class,
'invalidchars' => InvalidChars::class,
'secureheaders' => SecureHeaders::class,
'cors' => Cors::class, //ここ！
];
/**
* List of filter aliases that are always
* applied before and after every request.
*
* @var array
*/
public $globals = [
'before' => [
// 'honeypot',
// 'csrf',
// 'invalidchars',
'cors', //ここ！
],
'after' => [
'toolbar',
// 'honeypot',
// 'secureheaders',
],
];
また、useを追加しておきます。
Filters.php の上部あたりです。
use App\Filters\Cors; //これを追加！
use CodeIgniter\Config\BaseConfig;
use CodeIgniter\Filters\CSRF;
use CodeIgniter\Filters\DebugToolbar;
use CodeIgniter\Filters\Honeypot;
use CodeIgniter\Filters\InvalidChars;
use CodeIgniter\Filters\SecureHeaders;
これで、バックエンド側(part1)は終了です。
お疲れ様でした。
フロントエンド側(part2)の記事はこちらです↓