WEB/システム/IT技術ブログ

最近、Vue.jsやReactなどを使用したSPA開発がトレンドで、API開発も需要も高まってきてます。
Laravelでは、APIに必要なルートやコントローラを簡単に生成できるしくみが用意されています。

今回はLaravelでAPIの開発を始める際の基礎をみてみます。
ちなみに、Laravel 6.xがインストール済みであることを前提とします。
また、任意の「Sample」データに対してAPIを開発するとします。

コントローラ作成

以下のコマンドで、APIに必要な関数を含んだコントローラ「app/Http/Controllers/API/SampleController.php」を作成することができます。

$ php artisan make:controller API/SampleController --api

作成されたコントローラの中身は以下のようになってます。

namespace App\Http\Controllers\API;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class SampleController extends Controller
{
	public function index()
	{
			//
	}

	public function store(Request $request)
	{
			//
	}

	public function show($id)
	{
			//
	}

	public function update(Request $request, $id)
	{
			//
	}

	public function destroy($id)
	{
			//
	}
}

Laravel×Reactの開発環境構築を構築します。

今回試した環境は以下の通りです。

  • Laravel 6.20.44
  • Node.js 14.16.1
  • React 18.1

Laravelはインストール済みの状態から解説します。

初期LaravelにReactのインストール

初期のLaravel環境に対してReactをインストール場合、laravel/uiパッケージを利用すると便利です。ターミナルから以下のコマンドを実行します。

$ php artisan ui react

または

$ php artisan preset react

Laravelの初期状態はVue.jsがプリセットとなっています。
このコマンドを実行する事で、プリセットがReactに変更され、React開発スタートに必要なファイルが追加、変更されます。
具体的には「resources/js/components/Example.js」などが追加され、「package.json」や「webpack.min.js」などの内容が変更されます。
一方で「resources/js/components/ExampleComponent.vue」などのVue.js関連の初期ファイルは削除されます。

次に「package.json」を元にReactパッケージをインストールします。

$ npm install

基本的にReactのインストールは以上です。

但し、既にLaravelの開発が進行している場合、既存ファイルが自動で変更、削除されると困という場合はこちらの方法はお勧めできません。

とうとうWindows 11デビューしました。
想像していた通り、いくつか環境構築がこれまでのようにうまくいかず。。
「この時間返して。。今後もOSが変わるたびに、この試練を突破しないといけないのかな。。経済損失ってどれぐらいだろう。。」
など考えながら作業しております。

さて、新PCのWindows 11 Homeのセットアップを終え、環境構築の作業に入ろうと思い、PowerShellを起動したら、以下のメッセージが表示されました。

Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.

新機能と改善のために最新の PowerShell をインストールしてください!https://aka.ms/PSWindows

Windows Updateで最新の状態とかにしてくれないんですかね。

コマンドで現在のバージョンを調べてみると5.1のようです。

PS C:\Users\username> $PSVersionTable

Name                           Value
----                           -----
PSVersion                      5.1.22000.653
PSEdition                      Desktop
PSCompatibleVersions           {1.0, 2.0, 3.0, 4.0...}
BuildVersion                   10.0.22000.653
CLRVersion                     4.0.30319.42000
WSManStackVersion              3.0
PSRemotingProtocolVersion      2.3
SerializationVersion           1.1.0.1

PowerShellのバージョンが古いことで、いくつか実行できないコマンドもあるようです。

Windows 10で、Docker Desktopで使ってるWSL2のプロセス「Vmmem」のメモリ使用量を制限する方法です。

WSL2を使うようになってから、ローカル開発環境にアクセスするのが重く、また、その度に私のロースペックノートPCのファンがフル回転します。。
高負荷の原因はロースペックだと考えていましたが、調べてみるとプロセス「Vmmem」を制御すれば改善しそうです。

ローカル環境で作業中に、タスクマネージャーを確認してみました。

Vmmemにより、メモリが4.5GBほど消費しています。作業を続けているとメモリ使用量は増え続け、時には全体の使用率が95%を超える場面もあります。

Windows 10のプロジェクトにTypeScriptの開発環境を構築してみます。

WindowsにはNode.jsがインストール済みであることを前提とします。
WindowsでNode.js、gulp.jsをインストールして効率よい開発環境を目指す(準備編)

インストール

コマンドプロンプトを開き、npmコマンドでTypeScriptをインストールします。

> npm install -g typescript

インストール完了後、以下のコマンドでバージョンが表示されれば、インストール成功です。

> tsc -v
Version 4.6.4

tsファイルをコンパイル

任意のTypeScriptファイル「script.ts」を用意します。今回はtsファイルの中身については割愛します。
以下のコマンドを実行すると、tsファイルがコンパイルされ、ファイル「script.js」が出力されます。

> tsc script.ts

Docker ComposeでWordPress開発環境を構築します。

今回、以下の環境に構築しました。

  • Windows 10 Home
  • Docker Engine v20.10.14

開発環境の構成はWordPress、DBはMariaDB、DB参照用にphpMyAdminです。
WordPressのプラグイン、アップロード画像やテンプレートを含むフォルダ「wp-content」はgitで管理しています。
WordPressは本番環境に合わせて、ドキュメントルートからサブフォルダ「wp」に展開します。

docker-compose.ymlを用意する

WordPress開発環境構築用に以下の「docker-compose.yml」を用意します。ファイル「docker-compose.yml」はルートに配置します。

version: '3.8'

services:
  wordpress:
    image: wordpress:5.9.3
    ports:
      - 8000:80
    depends_on:
      - db
    working_dir: /var/www/html/wp
    volumes:
      - ./public_html/wp/wp-content:/var/www/html/wp/wp-content
      - ./public_html/.htaccess:/var/www/html/.htaccess
      - ./public_html/index.php:/var/www/html/index.php
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_NAME: ${MYSQL_DATABASE}
      WORDPRESS_DB_USER: ${MYSQL_USER}
      WORDPRESS_DB_PASSWORD: ${MYSQL_PASSWORD}

  phpmyadmin:
    image: phpmyadmin/phpmyadmin:latest
    depends_on:
      - db
    ports:
      - 8888:80
    environment:
      PMA_HOST: db
      PMA_USER: ${MYSQL_USER}
      PMA_PASSWORD: ${MYSQL_PASSWORD}

  db:
    image: mariadb:10.5
    volumes:
      - db-volume:/var/lib/mysql
    environment:
      MYSQL_DATABASE: ${MYSQL_DATABASE}
      MYSQL_USER: ${MYSQL_USER}
      MYSQL_PASSWORD: ${MYSQL_PASSWORD}
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
      TZ: Asia/Tokyo

volumes:
  db-volume:

DockerでphpMyAdminの環境を構築し、DBに10M程度のデータをインポートしようとしたのですが、以下のエラーが発生しました。

Warning: POST Content-Length of xxxxxxx bytes exceeds the limit of xxxxxxx bytes in Unknown on line 0

アップロードしようとしたファイル容量が、PHP設定の上限を超えてるようです。

この場合、PHPの以下の設定項目を調整すればよいのですが、、

  • memory_limit
  • post_max_size
  • upload_max_filesize

過去記事を参考にphp.iniを設置してみますが、なかなかコンテナに設定が反映されません。
phpMyAdminなどPHPシステムで扱えるファイルの最大サイズを変更する

Windows 10 HomeにDocker Desktopをインストールします。

過去の記事にも書きましたが、WindowsにDockerをインストールするには、以下のシステム要件を満たす必要があります。
Windows Subsystem for Linux 2(WSL 2)をインストールしてみる

  • Windows 10のバージョンが2004以上
  • WSL2(Windows Subsystem for Linux 2)がインストール済み
  • CPUが仮想化に対応していること

ちなみに、今回検証した環境は、Windows 10 Home バージョン21H1です。

Docker Desktopをインストール

以下のページの「Docker Desktop for Windows」をクリックして、インストーラー「Docker Desktop Installer.exe」をダウンロードします。
Install Docker Desktop on Windows | Docker Documentation

ダウンロードしたファイルをクリックして、インストールを実行します。
インストールは簡単で、細かいオプション選択などはありません。
ダウンロードとインストールには少々時間がかかります。私の場合、5分ほどかかりました。また、インストールにはOSの再起動が必要です。

以下の画面が表示されて、インストール完了です。

最近の世界情勢の影響なのかスパムが多くなった気がするので、reCAPTCHAを使ってフォームのスパム対策を実装してみます。

reCAPTCHAとはGoogleが提供するスパム対策サービスです。
reCAPTCHA  |  Google Developers

お問い合わせフォームや、会員登録フォームなどに設置される「私はロボットではありません」チェックボックスや、9枚ほど画像が表示されて「この中から車の画像を全て選択してください」というやつですね。
これらはreCAPTCHA v2で、ユーザの操作や判断の手間が1つ増えることになります。人によっては、この手間が不快に感じる方もいらっしゃるはずです。コンバージョン率低下の懸念がありますね。
それに対して、reCAPTCHA v3はプログラム側(AI)でスパムかどうかを判断するので、ユーザへの影響はほとんどありません。

サイト登録

Goolgeアカウントでサインインした状態で、以下のページにアクセスします。
reCAPTCHA
メニュー「v3 Admin Console」をクリックして、サイトを登録します。

  • ラベルには任意で分かりやすいラベル名をセットします
  • reCAPTCHAタイプは「reCAPTCHA v3」を選択します
  • ドメインにはAPIを使用するドメインをセットします。ローカルで開発、テストなどする場合は「localhost」も有効です。

利用条件に同意して送信します。送信時に発行される「サイトキー」と「シークレットキー」を控えておきます。

Windows 10 HomeにWindows Subsystem for Linux 2(WSL 2)をインストールしてみます。

ここ数年、Dockerに興味があるのですが、Windows 10 Homeにインストールできない状況にやきもきしていました。
手元にはWindows 10 Homeしかなかったので、DockerのためにProfessinalにアップグレードするか、Macを導入するかなど、悩んでいました。
しかし、ここ最近、WindowsのアップデートとWSL 2の技術により、HomeでもDockerが導入できるようになったという情報を見かけるようになったので、チャレンジしたいと思います。

条件と準備

まず、OSの条件として、Windows 10 64bit版で、バージョンが1903以上、ビルド18362以上である必要があります。
私の場合、バージョンが21H1、ビルドが19043と条件は満たしています。

次に、CPUが仮想化に対応していて、かつ、有効にになってる必要があります。
タスクマネージャーを開き、タグ「パフォーマンス」⇒「CPU」の「仮想化」が「有効」になっていればOKです。以下、私の環境です。

さらに、Windows 10 HomeにWSLをインストール済みを前提とします。過去記事はこちら
Windows Subsystem for Linux(WSL)をインストールしてみる

WSL 2のインストール

以下のページの「WSL2 Linux kernel update package for x64 machines」をクリックして、ファイル「wsl_update_x64.msi」をダウンロードします。
Manual installation steps for older versions of WSL | Microsoft Docs
ダウンロードしたファイルを実行して、WSL 2をインストールします。

Monthly Archives