<html><head></head><body>暗号化<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/38a3e35a0c8d4d679607204542419512/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2016.15.54.png" alt="">結果<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/3fdc245d6ba84317961702a32887d948/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2016.17.37.png" alt="">Wklv lv d whvw phvvdjh iru wkh Fdhvdu flskhu.これが暗号ですね。 これをリフレクターというもので復号化してみます。 リフレクター<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/d4ce4402851047248d03eb70dc3584c7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2016.21.28.png" alt="">結果<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/60d90a5a726748a2abdf38d560dc6327/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2016.22.06.png" alt=""> ただ反転してるだけなんですけどね </body></html>

実装

<html><head></head><body>ネットが普及してる今のご時世ではセキュリティ対策はエンジニアにとっても大事なものとなってますね。 イミテーションゲームという映画ではこれより遥かに複雑なエニグマという暗号が使われてたり(初めてコンピュータで暗号を復号化されたのもエニグマだったような.... 興味のある方は暗号の歴史から追うのも面白いかと思います！</body></html>

まとめ

JavaScriptでシーザー暗号を実装してみる

JWT (JSON Web Token) 認証とは、Webアプリケーションでユーザーの認証と承認を行うためのオープンスタンダードのこと。以下がポイント。 ①トークンベースの認証JWTは、ユーザーがログインするときに生成されるトークンを使用する。このトークンは、ユーザーの認証情報を含むJSON形式のデータ。 ②セッション管理の代替セッションベースの認証では、サーバーがユーザーのセッション情報を保持するが、JWTではクライアント側がトークンを保持する。これにより、サーバーの負荷が軽減され、スケーラビリティが向上する。 ③セキュリティJWTは署名されており、改ざんされていないことを保証する。署名には秘密鍵が使用され、サーバーだけがその秘密鍵を知っている。

JWT認証とは

任意のプロジェクトディレクトリに移動し、下記コマンドでJWT認証のパッケージをインストールする。 <code>composer require tymon/jwt-auth</code>

パッケージのインストール

<code>php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\LaravelServiceProvider"</code>

設定ファイル(config/jwt.php)を生成

<code>php artisan jwt:secret</code>

.envにJWTの秘密鍵を生成

config/auth.phpを下記のように書き換える。 <pre><code>'guards' =&gt; [
&nbsp; &nbsp; 'api' =&gt; [
&nbsp; &nbsp; &nbsp; &nbsp; 'driver' =&gt; 'jwt',
&nbsp; &nbsp; &nbsp; &nbsp; 'provider' =&gt; 'users',
&nbsp; &nbsp; ],
],</code></pre>

Guardの変更

下記のようにUserモデルに追記する。 <pre><code>use Tymon\JWTAuth\Contracts\JWTSubject;


class User extends Authenticatable implements JWTSubject
{
&nbsp; &nbsp; public function getJWTIdentifier()
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; return $this-&gt;getKey();
&nbsp; &nbsp; }


&nbsp; &nbsp; public function getJWTCustomClaims()
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; return [];
&nbsp; &nbsp; }
}</code></pre>

Userモデルの設定

<code>php artisan make:controller AuthController</code> <pre><code>&lt;?php


namespace App\Http\Controllers;


use Illuminate\Http\Request;
use Tymon\JWTAuth\Facades\JWTAuth;
use App\Models\User;


class AuthController extends Controller
{
&nbsp; &nbsp; public function login(Request $request)
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; $credentials = $request-&gt;only('email', 'password');


&nbsp; &nbsp; &nbsp; &nbsp; if (! $token = JWTAuth::attempt($credentials)) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return response()-&gt;json(['error' =&gt; 'Unauthorized'], 401);
&nbsp; &nbsp; &nbsp; &nbsp; }


&nbsp; &nbsp; &nbsp; &nbsp; return response()-&gt;json([
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'message' =&gt; 'Login successful',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'token' =&gt; $token
&nbsp; &nbsp; &nbsp; &nbsp; ]);
&nbsp; &nbsp; }


&nbsp; &nbsp; public function register(Request $request)
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; $user = User::create([
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'name' =&gt; $request-&gt;name,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'email' =&gt; $request-&gt;email,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'password' =&gt; bcrypt($request-&gt;password),
&nbsp; &nbsp; &nbsp; &nbsp; ]);


&nbsp; &nbsp; &nbsp; &nbsp; $token = JWTAuth::fromUser($user);


&nbsp; &nbsp; &nbsp; &nbsp; return response()-&gt;json([
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'message' =&gt; 'Registration successful',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'token' =&gt; $token
&nbsp; &nbsp; &nbsp; &nbsp; ]);
&nbsp; &nbsp; }
}</code></pre>

コントローラー作成

routes/api.php を編集。 <pre><code>Route::post('login', [AuthController::class, 'login']);
Route::post('register', [AuthController::class, 'register']);</code></pre>

ルートの作成

実装手順

postmanを使用して確認する。 <blockquote>名前 : test1 メールアドレス : test1@example.com パスワード : password</blockquote> 上記のユーザーを登録。 <img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/f1fc7e271feb4e5eba46460c2944f3c4/image.png" alt="">

登録

登録したユーザーでログインを確認する。 <img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/48e68fe7f33e463196462b1bbbd8927f/image.png" alt="">

動作確認

【Laravel】JWT認証機能の実装

下記リンクからインストール可能（MacとWindowsでインストーラが変わるため注意）<a href="https://www.docker.com/get-started/" target="_blank" rel="noopener noreferrer">https://www.docker.com/get-started/</a>

（前提）Docker のインストール

任意の場所にプロジェクトディレクトリを作成する。 <code>mkdir laravel11-docker</code><code>cd laravel11-docker</code> ★ディレクトリ構造<pre><code>laravel11-docker/
├── docker/
│&nbsp; &nbsp;├── mysql/
│&nbsp; &nbsp;│&nbsp; &nbsp;└── (MySQL関連ファイル)
│&nbsp; &nbsp;├── nginx/
│&nbsp; &nbsp;│&nbsp; &nbsp;├── logs/
│&nbsp; &nbsp;│&nbsp; &nbsp;├── default.conf
│&nbsp; &nbsp;│&nbsp; &nbsp;└── Dockerfile
│&nbsp; &nbsp;└── php/
│&nbsp; &nbsp; &nbsp; &nbsp;├── Dockerfile
│&nbsp; &nbsp; &nbsp; &nbsp;└── php.ini
├── src/
│&nbsp; &nbsp;└── (Laravelプロジェクトファイル)
└── docker-compose.yml</code></pre>

プロジェクトディレクトリの作成

docker-compose.ymlファイルを作成し、以下の内容を記述する。 <pre><code>services:
&nbsp; nginx:
&nbsp; &nbsp; container_name: "laravel11-nginx"
&nbsp; &nbsp; build:
&nbsp; &nbsp; &nbsp; context: ./docker/nginx
&nbsp; &nbsp; ports:
&nbsp; &nbsp; &nbsp; - "80:80"
&nbsp; &nbsp; volumes:
&nbsp; &nbsp; &nbsp; - ./src:/var/www/html
&nbsp; php:
&nbsp; &nbsp; container_name: "laravel11-php"
&nbsp; &nbsp; build:
&nbsp; &nbsp; &nbsp; context: ./docker/php
&nbsp; &nbsp; volumes:
&nbsp; &nbsp; &nbsp; - ./src:/var/www/html
&nbsp; &nbsp; &nbsp; - ./docker/php/php.ini:/usr/local/etc/php/php.ini
&nbsp; mysql:
&nbsp; &nbsp; image: mysql:8.0
&nbsp; &nbsp; container_name: "laravel11-mysql"
&nbsp; &nbsp; environment:
&nbsp; &nbsp; &nbsp; MYSQL_ROOT_PASSWORD: root
&nbsp; &nbsp; &nbsp; MYSQL_DATABASE: laravel
&nbsp; &nbsp; volumes:
&nbsp; &nbsp; &nbsp; - ./docker/mysql:/var/lib/mysql
&nbsp; &nbsp; ports:
&nbsp; &nbsp; &nbsp; - "3306:3306"</code></pre>

docker-compose.ymlの作成

docker/nginxフォルダ内にDockerfileとdefault.confを作成し、以下の内容を記述する。 ・Dockerfile<pre><code>FROM nginx:1.21
COPY default.conf /etc/nginx/conf.d/</code></pre> ・default.conf<pre><code>server {
&nbsp; &nbsp; listen 80;
&nbsp; &nbsp; server_name localhost;
&nbsp; &nbsp; root /var/www/html/public;
&nbsp; &nbsp; index index.php index.html;


&nbsp; &nbsp; location / {
&nbsp; &nbsp; &nbsp; &nbsp; try_files $uri $uri/ /index.php?$query_string;
&nbsp; &nbsp; }


&nbsp; &nbsp; location ~ \.php$ {
&nbsp; &nbsp; &nbsp; &nbsp; fastcgi_pass laravel11-php:9000;
&nbsp; &nbsp; &nbsp; &nbsp; fastcgi_index index.php;
&nbsp; &nbsp; &nbsp; &nbsp; include fastcgi_params;
&nbsp; &nbsp; &nbsp; &nbsp; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
&nbsp; &nbsp; }
}</code></pre>

Nginxの設定

docker/phpフォルダ内にDockerfileとphp.iniを作成し、以下の内容を記述する。 ・Dockerfile <pre><code>FROM php:8.2-fpm

# 必要なパッケージのインストール
RUN apt-get update &amp;&amp; apt-get install -y \
&nbsp;&nbsp;zip \
&nbsp;&nbsp;unzip \
&nbsp;&nbsp;git \
&nbsp;&nbsp;&amp;&amp; docker-php-ext-install pdo_mysql

# Composerのインストール
RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

COPY php.ini /usr/local/etc/php/</code></pre> ・php.ini<pre><code>[PHP]
display_errors = On</code></pre>

PHPの設定

プロジェクトフォルダ内で以下のコマンドを実行してLaravelプロジェクトを作成する。 <code>docker compose run --rm php composer create-project --prefer-dist laravel/laravel src</code>

Laravelプロジェクトの作成

<code>docker-compose up -d</code>

Dockerコンテナの起動

DockerによるLaravel環境の構築

ブラウザでアクセスしウェルカムページが表示されるかを確認する。 <img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/93e2745c8ecd40a780f071c3d932c7bd/image.png" alt="">

【Docker】Laravel 11 環境の構築

Docker社が開発している、コンテナ型の仮想環境を作成、配布、実行するためのプラットフォーム。

Dockerとは

Dockerコンテナはコード化されたファイルを共有することで、ローカル環境と本番環境の違いをなくし、一貫した動作の環境のもと開発を行うことができる。Dockerはミドルウェアのインストールや各種環境設定をコード化して管理できる。

メリット

Docker

下記リンクからインストール可能（MacとWindowsでインストーラが変わるため注意）<a href="https://www.docker.com/get-started/" target="_blank" rel="noopener noreferrer">https://www.docker.com/get-started/</a>

任意の場所にディレクトリを作成する。 <code>mkdir php-docker</code><code>cd php-docker</code> (ディレクトリ構造)<pre><code>php-docker/
├── Dockerfile
├── docker-compose.yml
├── index.php
└── その他のPHPファイルやディレクトリ</code></pre>

ディレクトリの作成

Dockerfile とは、PHPのベースイメージに対して追加のPHP拡張モジュールをインストールするためのもの。プロジェクトディレクトリ内に Dockerfile を作成し、以下の内容を記述する。 <pre><code># ベースイメージとしてPHPを使用
FROM php:7.4-apache


# 作業ディレクトリを設定
WORKDIR /var/www/html


# プロジェクトファイルをコンテナにコピー
COPY . /var/www/html


# 必要なPHP拡張モジュールをインストール
RUN docker-php-ext-install mysqli</code></pre>

Dockerfileの作成

docker-compose.yml は、複数のDockerコンテナを一括で定義・管理するための設定ファイル。1つのファイルで複数のコンテナを定義可能で、例えばPHPとMySQLを同時に設定でき、ローカル環境、テスト環境で同じ設定ファイルを用いることで、一貫性のある環境を提供できる。プロジェクトディレクトリ内に docker-compose.yml を作成し、以下の内容を記述する。 <pre><code>version: '3.8'


services:
&nbsp; web:
&nbsp; &nbsp; build: .
&nbsp; &nbsp; ports:
&nbsp; &nbsp; &nbsp; - "8080:80"
&nbsp; &nbsp; volumes:
&nbsp; &nbsp; &nbsp; - .:/var/www/html
&nbsp; &nbsp; depends_on:
&nbsp; &nbsp; &nbsp; - db


&nbsp; db:
&nbsp; &nbsp; image: mysql:5.7
&nbsp; &nbsp; environment:
&nbsp; &nbsp; &nbsp; MYSQL_ROOT_PASSWORD: example
&nbsp; &nbsp; &nbsp; MYSQL_DATABASE: mydatabase
&nbsp; &nbsp; &nbsp; MYSQL_USER: user
&nbsp; &nbsp; &nbsp; MYSQL_PASSWORD: password
&nbsp; &nbsp; volumes:
&nbsp; &nbsp; &nbsp; - db_data:/var/lib/mysql


volumes:
&nbsp; db_data:</code></pre>

例えば index.php ファイルを作成し、MySQLデータベースに接続できているかを確認するソースを記述する。 <pre><code>&lt;?php
$servername = "db";
$username = "user";
$password = "password";
$dbname = "mydatabase";


// MySQLデータベースに接続
$conn = new mysqli($servername, $username, $password, $dbname);


// 接続をチェック
if ($conn-&gt;connect_error) {
&nbsp; &nbsp; die("Connection failed: " . $conn-&gt;connect_error);
}
echo "Connected successfully";
?&gt;</code></pre>

PHPファイルの作成

以下のコマンドを実行して、Dockerコンテナをビルドし起動する。 <code>docker-compose up -d</code>

Dockerコンテナのビルドと起動

ブラウザで http://localhost:8080 にアクセスして、PHPとMySQLが正しく連携しているか確認する。 <img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/dc14ce9af8d54347b3a8de2ce3e502eb/image.png" alt="">

ブラウザで確認

DockerによるPHP環境の構築

今回はDockerでPHPの環境の構築を行いました。

【Docker】PHP環境の構築

まずは認可の問題です。このシステムではユーザが投稿リクエストを送る権限があるかどうかとユーザの特定をアクセストークンを使って行っています。認証・認可にはAuth0を使っており、ユーザがログインしたタイミングで取得したアクセストークンをバックエンドに送信しています。 Pactの契約を作る際、リクエスト内容と対応するレスポンスを定義しますが、リクエスト内容のAuthorizationヘッダにAuth0から取得したアクセストークンを書き込んだとしても、アクセストークンには有効期限があります。有効期限が切れた途端に失敗しかしなくなるテストコードになってしまいます。対処法として以下の2パターンを考えました。投稿APIのプロバイダ側の契約テストで必要になるアクセストークンの問題の対処法：<ol><li>リクエストヘッダをバックエンド側で上書きする<ol><li><a href="https://github.com/reecetech/pactman/tree/master?tab=readme-ov-file#verifying-pacts-using-pytest" target="_blank" rel="noopener noreferrer">pactman</a>の場合は<code>pact_verifier.verify</code>の第3引数に辞書形式で追加のリクエストヘッダを指定できるようです。</li><li>ただしこのやり方だと逆に常に認証が成功してしまい、認証失敗するケースをテストできなくなってしまいます。</li></ol></li><li>認証コンポーネントをモック化する<ol><li>モック化する場合、認証のロジックを別で担保するのかどうかを検討する必要があります。</li><li>実行中のAPIの内部状態を変更する必要があります。</li></ol></li></ol>どちらのパターンにおいてもデメリットがありました。（1のリクエストヘッダ上書きの方は、ケースごとに上書きするヘッダを指定できたらいいのにな・・・と思います） 次に対処法2のデメリットである、実行中のAPIの内部状態を変更する方法について検討しました。 django（公式ドキュメントの例）の場合<a href="https://github.com/reecetech/pactman/tree/master?tab=readme-ov-file#verifying-pacts-using-pytest" target="_blank" rel="noopener noreferrer">pactmanのドキュメント</a>では、djangoの場合の<code>live_server</code> pytest fixtureを使った例が書いてあります。自分はdjangoは全くの未経験ですが、軽く調べたところによるとlive_serverはテストとは異なるスレッドで実行されるようです。今回のように内部状態を変えたい場合はどうやって対応するんだろうと思ってもう少し調べてみたら、<code>transactional_db</code> fixtureに依存することで、DBの内容を操作できるようになっているようです。（その内部実装がどうなっているかまでは追えていません・・・） Chalice（今回のプロジェクト）の場合<a href="https://aws.github.io/chalice/topics/testing.html#rest-apis" target="_blank" rel="noopener noreferrer">テスト用のClient</a>があるようです。こちらは先程のlive_serverとは異なり、実際にサーバを起動するのではなく、あくまでクライアントのモックとしてリクエストに対するレスポンスを返してくれるみたいです。なので同じプロセスになるので、モンキーパッチなどで外部からデータを書き換えるのは簡単そうです。しかし、pactmanの公式がlive_serverを例として出していることからも想像できるように、pactmanは別プロセスとして実際に動くAPIを前提とした実装になっています。 pact_verifierの実装を少し深堀したところ、単純に<a href="https://github.com/reecetech/pactman/blob/master/pactman/verifier/verify.py#L75" target="_blank" rel="noopener noreferrer">内部でrequestsの関数を呼び出しているだけ</a>でした。したがって、もしChalice提供のテスト用Clientを使うのであれば、requestsのget関数を呼び出した際にテスト用Clientのgetが呼ばれる、みたいにうまく噛み合うようなパッチを手探りで作っていかなければなりません。 自分は少しだけ試してみましたが無理そうだったのでテスト用Clientは使わないことにしました。そうなると、テスト用Clientではなく実際に<code>chalice local</code>でサーバを起動するやり方になります。そうすると、別プロセスで動いているChaliceプログラムの内部状態を変えなければいけないという難しい問題に直面しなければならず、こちらもかなり厄介な実装になりそうだったので、アクセストークン問題の対処法2は断念し、1で対応する方針に切り替えました。 対処法1のデメリットとしては認証失敗ケースのテストができないというのがありますが、今回は別で（手動テストなどで）担保するので問題ないとしました。（というより、それしか現実的な方法がないのですが）

トークンの有効期限問題

さて、少し話が本題とそれてしまいますが、リクエストヘッダを上書きするとして、そのアクセストークンはどうやって取得すればいいでしょうか？何を言っているんだと思われるかもしれませんが、今回プロデューサ側のテストを考えています。つまり、アクセストークンは送られてくるわけではなく、プロデューサ自身の側で生成しなければいけません。今回は投稿権限を持ったテスト用のユーザをAuth0側に実際に作成し、（画面はないので）OAuth2.0のリソースオーナーパスワードフローを使って直接トークンを取得する形にしました。パスワードフローを使うにあたって色々と設定などが必要だったのですが、そのあたりの話は完全に脱線してしまうのでここでは省略します。

アクセストークンの取得方法

アクセストークンが無事に取得できたとき、また別の壁が立ちはだかりました。<code>pact_verifier.verify</code>の第3引数に設定する<code>extra_provider_headers</code>は、（なんと）<a href="https://github.com/reecetech/pactman/blob/master/pactman/verifier/verify.py#L198" target="_blank" rel="noopener noreferrer">pactに記載の内容で上書きされてしまいます</a>。つまりどういうことかというと、コンシューマ側で契約を定義しますが、その際にAuthorizationヘッダに<code>"Bearer hoge"</code>と設定していたとすると、<code>extra_provider_headers</code>を指定していたとしても<code>"Bearer hoge"</code>の方が勝ってしまうということです。更に悪いことに、<code>extra_provider_headers</code>は<code>@property</code>で「保護されている」ため、パッチするのも困難になってしまっています。自分の場合は仕方なく、契約にはAuthorizationヘッダを含めないようにしました。実際と異なる契約になってしまうため、できればやりたくなかったのですが。自分の理解が及んでいないだけかもしれませんが、契約側よりプロバイダ側の注入の方が勝つようにしてほしいです・・・pactmanの今後の改修に期待したいです。 ようやくアクセストークンを正しく設定できるようになったところで、別のエラーになりました。ユーザが自身の投稿の一覧を取得するAPIの検証結果です：<pre><code>Failed: body size 0 is smaller than minimum size 1 at body</code></pre> ただここまでくれば勝ったも同然ですね。今はユーザの投稿を1件も保存していない状態なので、想定通りのエラーです。

pactmanのextra_provider_headersが上書きされる問題

認可の問題

さてようやくDBについてどうするかを考えるタイミングが来ました。APIは別プロセスで<code>chalice local</code>で動いているので、現状DBもモックではなく本物（といってもDynamoDB localですが）に繋がっています。まずDBにモックを使わないのは妥当かどうかですが、このDBは内部システムとみなせるため、実物を使用すべしという結論になります。このあたりは<a href="https://build.yoku.co.jp/articles/rfycv5cu04_p#section_4_subsection_1" target="_blank" rel="noopener noreferrer">以前の投稿</a>をご参照ください。次に、DBのコンテナについて考えます。現状はローカル開発環境用のDBにchaliceが接続してしまっていますが、ローカル開発環境用とは切り離したいです。そこで単純にテスト用のdockerコンテナを別途作成し、chaliceのstageに紐づく環境変数を（<code>.chalice/config.json</code>で）切り分けることで、ローカル開発環境chaliceとテスト用chaliceで別々のDBコンテナを見に行くようにしました。

接続先DBの検討

上に述べたような試行錯誤の末ようやくローカルで投稿APIのプロバイダ側のテストが通るようになりました。CodeBuild環境でもテストを通したいのですが、今のままだと通りません。それは、ローカルではpythonコンテナ上でテストを実行していますが、CodeBuild環境では現状localhostで直接テストを実行しているためです。もし現状のままlocalhostで実行するのであれば、DBコンテナに接続するためにはDBコンテナをポートフォワーディングし、対象ポートに接続する必要があります。接続先は環境変数で切り替えればいいのでそこまで難易度は高くありませんが、今後も開発を進めていく中でローカル環境とCodeBuild環境の環境差異が原因でテストが通らなくなることがありそうです。手元の環境でないと中々デバッグもし辛いですし、できればこの際ローカルと同じようにCodeBuild環境でもDocker上でテストを実行するようにしたいです。

CI/CD環境をどうするか

CodeBuild環境でもDocker上でテストを実行するようにしたところ、conftest.pyのboto3をインスタンス化している箇所でNoRegionErrorが発生しました。これはCodeBuildのAWSプロファイルがコンテナに引き継がれないためです。CodeBuildの場合、認証情報が環境変数に設定されているわけでも~/.aws/配下に保存されているわけでもないようです。したがってCodeBuild環境の認証情報をDockerに引き継ぐ方法はありません。コンテナからawsコマンドを実行するには、コンテナ用のIAMロールを作る必要があります。<a href="https://repost.aws/ja/knowledge-center/codebuild-temporary-credentials-docker" target="_blank" rel="noopener noreferrer">AWS公式</a>にやり方が書いてあります。

CodeBuildでNoRegionError

curlならIP、ホスト名指定共にpythonコンテナからDBコンテナへの接続が成功するのですが、なぜかpynamodb(botocore)経由だとタイムアウトしてしまう現象に相当悩まされました。様々な試行錯誤の末、最終的に最小限の構成で新規プロジェクトをローカルに立ち上げたところ、単純に<a href="https://qiita.com/yuta-katayama-23/items/a8c497fe4a61f29deb34#%E3%81%9D%E3%81%AE2%E3%81%82%E3%82%89%E3%81%8B%E3%81%98%E3%82%81%E6%89%8B%E5%8B%95%E3%81%A7volumes%E3%81%A7%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%83%9B%E3%82%B9%E3%83%88%E5%81%B4%E3%81%AE%E3%83%9E%E3%82%A6%E3%83%B3%E3%83%88%E5%85%88%E3%81%AB%E3%81%AA%E3%82%8B%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97chmod-777%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B" target="_blank" rel="noopener noreferrer">dataディレクトリのパーミッションを変更</a>していなかったことが原因と気づきました。

ローカルだと通るがcodebuildだとDynamoDB-localへの接続がタイムアウトする

投稿APIに対してリクエストを投げた際に、以下のようなエラーが発生しテストが頻繁に失敗するようになりました。<pre><code>E&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;requests.exceptions.ConnectionError: HTTPConnectionPool(host='localhost', port=8008): Max retries exceeded with url: /auth0/microposts (Caused by NewConnectionError('&lt;urllib3.connection.HTTPConnection object at 0x727b9434f610&gt;: Failed to establish a new connection: [Errno 111] Connection refused'))</code></pre> DB更新などを行った際にchaliceの監視対象が更新したと判定され、ホットリロードによりchaliceが再起動するようです。そして再起動している間にリクエストが来ると、応答できずにエラーになってしまうものと思われます。そのためchaliceの実行オプションに<a style="color:#ff357f;background-color:#ffffff" href="https://github.com/aws/chalice/issues/1064#issuecomment-461259975" target="_blank" rel="noopener noreferrer"><code>--no-autoreload</code></a>を追加し、リロードされないようにしたところ失敗しなくなりました。

プロバイダ側のテストが不安定に失敗することがある

DBの問題

ユーザの投稿一覧を取得するAPIの契約で、ユーザの投稿が存在する場合としない場合の両方のケースについてプロバイダ側で契約を満たしているか確認する必要があります。このように前提としているプロバイダ側の状態がある場合、どのようにコントロールしたらいいでしょうか？ Pactではもちろんこのようなケースに対応できます。pactmanの場合は<code>pact_verifier.verify</code>の第二引数に<code>provider_state</code>関数を渡してあげることで対応できます。<code>provider_state</code>関数の第一引数のnameに、契約に規定された<code>providerStates[].name</code>が渡ってくるので、そのラベルで分岐することで必要な状態を作成することが可能です。 例えば、今回の例だとユーザの投稿が存在する場合には<code>"ユーザの投稿が存在する場合"</code>という文字列が渡ってくるので、provider_state関数の中で<code>providerStates[].name</code>が<code>"ユーザの投稿が存在する場合"</code>だった場合には事前に投稿APIをPOSTすることで投稿が存在する状態を作っています。<pre><code>def provider_state(token):
 def _provider_state(name, **params):
 if name == "ユーザの投稿が存在する場合":
 requests.post(f"{CHALICE_URL}/auth0/microposts", json={"content": "hello, world"}, headers={'Authorization': f"Bearer {token}"})
 return _provider_state</code></pre> なお、今回はprovider_state関数がtokenを受け取って関数を返す関数になっていますが、これは投稿APIをPOSTする際に<code>token</code> fixtureで生成したトークンを渡す必要があるためです。

プロバイダの状態管理

プロダクションコードapp/api/microposts/service.ts<pre><code>import axios from "axios";

export default function MicropostService(baseUrl: string) {
 const ping = async (): Promise&lt;{message: string}&gt; =&gt; {
 const res = await fetch(`${baseUrl}/ping`, {
 headers: {
 "Content-Type": "application/json",
 }
 });
 return res.json();
 }

 const getAll = async (accessToken: string|undefined): Promise&lt;Array&lt;{content: string, postedAt: string}&gt;&gt; =&gt; {
 const response = await axios.get(`${baseUrl}/auth0/microposts`, {
 headers: {
 "Authorization": `Bearer ${accessToken}`,
 "Content-Type": "application/json",
 }
 });
 return response.data;
 }

 const post = async (accessToken: string|undefined, reqJson: any) =&gt; {
 await axios.post(`${baseUrl}/auth0/microposts`, reqJson, {
 headers: {
 "Authorization": `Bearer ${accessToken}`,
 "Content-Type": "application/json",
 },
 });
 }

 return {ping, getAll, post}
}</code></pre> テストコードtests/api.pact.spec.ts<pre><code>import MicropostService from "@/app/api/microposts/service";
import { MatchersV3, PactV3 } from "@pact-foundation/pact";
import path from "path";

const {eachLike, string, regex, timestamp} = MatchersV3;

const provider = new PactV3({
 dir: path.resolve(process.cwd(), 'pacts'),
 consumer: 'auth0-next-custom',
 provider: 'google-login-back'
});

describe('GET /ping', () =&gt; {
 it('200レスポンス(pong)を返すこと', async () =&gt; {
 provider.addInteraction({
 states: [{description: 'pongレスポンスに成功する場合'}],
 uponReceiving: 'pingリクエストを送信する',
 withRequest: {
 method: 'GET',
 path: '/ping',
 },
 willRespondWith: {
 status: 200,
 headers: {'Content-Type': 'application/json'},
 body: MatchersV3.equal({message: 'pong'}),
 }
 });

 await provider.executeTest(async (mockserver) =&gt; {
 const service = MicropostService(mockserver.url);
 const response = await service.ping();
 expect(response.message).toStrictEqual('pong');
 })
 })
});

describe('GET /auth0/microposts', () =&gt; {
 it('micropostsを返すこと', async () =&gt; {
 provider.addInteraction({
 states: [{description: 'ユーザの投稿が存在する場合'}],
 uponReceiving: 'ユーザの全ての投稿をリクエストする',
 withRequest: {
 method: 'GET',
 path: '/auth0/microposts',
 // 実際はAuthorizationヘッダにBearerトークンを含める必要がある
 },
 willRespondWith: {
 status: 200,
 headers: {'Content-Type': 'application/json'},
 body: eachLike({
 content: string('Hello, World.'),
 postedAt: timestamp('YYYY-MM-DD HH:mm:ss', '2024-08-21 23:01:01'),
 })
 }
 });

 await provider.executeTest(async (mockserver) =&gt; {
 const service = MicropostService(mockserver.url);
 const response = await service.getAll('hoge');
 expect(JSON.stringify(response)).toStrictEqual(
 JSON.stringify([{content: 'Hello, World.', postedAt: '2024-08-21 23:01:01'}])
 );
 })
 });

 it('空配列を返すこと', async () =&gt; {
 provider.addInteraction({
 states: [{description: 'ユーザの投稿が存在しない場合'}],
 uponReceiving: 'ユーザの全ての投稿をリクエストする',
 withRequest: {
 method: 'GET',
 path: '/auth0/microposts',
 // 実際はAuthorizationヘッダにBearerトークンを含める必要がある
 },
 willRespondWith: {
 status: 200,
 headers: {'Content-Type': 'application/json'},
 body: [],
 }
 });

 await provider.executeTest(async (mockserver) =&gt; {
 const service = MicropostService(mockserver.url);
 const response = await service.getAll('hoge');
 expect(response).toStrictEqual([]);
 })
 })
})

describe('POST /auth0/microposts', () =&gt; {
 it('正常レスポンスを返すこと', async () =&gt; {
 provider.addInteraction({
 states: [{description: 'リクエスト内容がcontentを含んでいる場合'}],
 uponReceiving: 'ユーザの投稿を投げる',
 withRequest: {
 method: 'POST',
 path: '/auth0/microposts',
 body: {
 content: string('hello'),
 }
 // 実際はAuthorizationヘッダにBearerトークンを含める必要がある
 },
 willRespondWith: {
 status: 201,
 headers: {'Content-Type': 'application/json'},
 body: null,
 }
 });

 await provider.executeTest(async (mockserver) =&gt; {
 const service = MicropostService(mockserver.url);
 await expect(service.post('hoge', {content: 'world'})).resolves.not.toThrow();
 })
 });


 it('500レスポンスを返すこと', async () =&gt; {
 provider.addInteraction({
 states: [{description: 'リクエスト内容がcontentを含んでいない場合'}],
 uponReceiving: 'ユーザの投稿を投げる',
 withRequest: {
 method: 'POST',
 path: '/auth0/microposts',
 body: {
 greeting: string('hello'),
 }
 // 実際はAuthorizationヘッダにBearerトークンを含める必要がある
 },
 willRespondWith: {
 status: 500,
 headers: {'Content-Type': 'application/json'},
 }
 });

 await provider.executeTest(async (mockserver) =&gt; {
 const service = MicropostService(mockserver.url);
 await expect(service.post('hoge', {greeting: 'world'})).rejects.toThrow('Request failed with status code 500');
 })
 })
})</code></pre>

コンシューマ側

テストコードtests/conftest.py<pre><code>import pytest
import subprocess
import time
import os
from datetime import datetime
import requests
import boto3

ssm = boto3.client("ssm")

AUTH0_CLIENT_ID = ssm.get_parameter(Name="/auth0/client_id")["Parameter"]["Value"]
AUTH0_CLIENT_SECRET = ssm.get_parameter(Name="/auth0/client_secret")["Parameter"]["Value"]
AUTH0_TEST_USER_NAME = ssm.get_parameter(Name="/auth0/test-user01/name")["Parameter"]["Value"]
AUTH0_TEST_USER_PASSWORD = ssm.get_parameter(Name="/auth0/test-user01/password")["Parameter"]["Value"]

STAGE = os.getenv('STAGE')

DB_ENDPOINT = "http://dynamo-test:8000"


@pytest.fixture()
def refresh_table():
 sub_env = os.environ.copy()
 sub_env["DB_ENDPOINT"] = DB_ENDPOINT
 subprocess.run(args=["python", "refresh_table.py"], env=sub_env)
 yield


@pytest.fixture(scope="session", autouse=True)
def start_chalice_local():
 timestamp = datetime.now().strftime("%Y%m%d%H%M%S")
 filename = f"/var/log/{timestamp}.log"

 print(f"stage: {STAGE}")

 with open(filename, "w") as f:
 process = subprocess.Popen(
 ["chalice", "local", "--host=0.0.0.0", f"--port={os.getenv('TEST_PORT')}", f"--stage={STAGE}", "--no-autoreload"],
 stdout=f,
 stderr=subprocess.STDOUT,
 text=True,
 )

 # サービスが完全に起動するまで待機
 time.sleep(5)
 yield
 process.terminate()
 process.wait()

 with open(filename, "r") as f:
 print("\nchalice output:\n", f.read())


@pytest.fixture(scope="session")
def token():
 data = {
 "client_id": AUTH0_CLIENT_ID,
 "client_secret": AUTH0_CLIENT_SECRET,
 "audience": "my-custom-api",
 "username": AUTH0_TEST_USER_NAME,
 "password": AUTH0_TEST_USER_PASSWORD,
 "grant_type": "password",
 }

 res = requests.post("https://dev-XXXXXXXXXXX.us.auth0.com/oauth/token", data)

 yield res.json()["access_token"]


@pytest.fixture(scope="session", autouse=True)
def create_table():
 sub_env = os.environ.copy()
 sub_env["DB_ENDPOINT"] = DB_ENDPOINT
 subprocess.run(args=["python", "create_table.py"], env=sub_env)
 yield</code></pre> tests/test_pacts.py<pre><code>import os
import requests


CHALICE_URL = f"http://localhost:{os.getenv('TEST_PORT')}"


def provider_state(token):
 def _provider_state(name, **params):
 if name == "ユーザの投稿が存在する場合":
 requests.post(f"{CHALICE_URL}/auth0/microposts", json={"content": "hello, world"}, headers={'Authorization': f"Bearer {token}"})
 return _provider_state


def test_pacts(pact_verifier, token, refresh_table):
 pact_verifier.verify(CHALICE_URL, provider_state(token), extra_provider_headers={'Authorization': f"Bearer {token}"})</code></pre>

プロバイダ側

今回行った修正

今回は状態の管理が必要なコンシューマ駆動契約の実装をしてみました。一見簡単そうでしたが実際にやってみるとかなりハマりポイントが存在するなと思いました。扱いづらさの一番の原因はテストとは別のプロセスでAPIサーバやDBサーバを起動する必要があったためではないかなと思います。とはいえコンシューマ・プロバイダの相互作用に関するテストなのである程度致し方ないかなと。 今回実装してみてコンシューマ駆動契約もそれなりにコストがかかることがわかったので、実際のPJで導入するかどうかはコストに見合ったメリットがあるかどうかを慎重に検討した上で判断すべきだと思いました。

さいごに

コンシューマ駆動契約テストに入門してみた〜状態管理編〜

Oracleの基本的なコマンドを紹介いたします。データベースの作成<pre><code>CREATE TABLE table_name (
 column1 datatype,
 column2 datatype,
);</code></pre>テーブル削除<pre><code>DROP TABLE table_name;</code></pre>データ挿入<pre><code>INSERT INTO table_name (column1, column2) VALUES (value1, value2);</code></pre>データ更新<pre><code>UPDATE table_name SET column1 = value1 WHERE condition;</code></pre>データ削除<pre><code>DELETE FROM table_name WHERE condition;</code></pre>データを取得<pre><code>SELECT * FROM table_name;</code></pre>データを条件取得<pre><code>SELECT column1, column2 FROM table_name WHERE condition;</code></pre>以上になります。DBマッピングのプロジェクトに参画しているため、SQLをより使いこなせていきたいです。

OracleSQL 入門

・名前入力必須32文字以内 ・メールアドレス入力必須メールアドレス形式 ・パスワード入力必須4文字以上確認用と一致するか

エラー内容

confirmメソッドにバリデーションを設定 <pre><code>&nbsp; &nbsp; public function confirm(Request $request)
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; $request-&gt;validate([
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'name' =&gt; ['required', 'max:32'],
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'email' =&gt;['required', 'email'],
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'password' =&gt;['required', 'min:4', 'confirmed'],
&nbsp; &nbsp; &nbsp; &nbsp; ],
&nbsp; &nbsp; &nbsp; &nbsp; [
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'name.required' =&gt; '名前を入力してください',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'name.max' =&gt; '最大32文字で入力してください',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'email.required' =&gt; 'メールアドレスを入力してください',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'email.email' =&gt; 'メールアドレス形式で入力してください',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'password.required' =&gt; 'パスワードを入力してください',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'password.min' =&gt; '4文字以上で入力してください',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'password.confirmed' =&gt; 'パスワードが一致していません',
&nbsp; &nbsp; &nbsp; &nbsp; ]);


&nbsp; &nbsp; &nbsp; &nbsp; return view('users/confirm', [
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'inputs' =&gt; $request-&gt;all(),
&nbsp; &nbsp; &nbsp; &nbsp; ]);
&nbsp; &nbsp; }</code></pre>

UsersController.phpを編集

コントローラーを編集してバリデーションを作成

FormRequestとはRequestファサードを継承したもので、バリデーションのルールやメッセージをカスタマイズするのに特化している。 ・下記コマンドでファイル作成<code>php artisan make:request UserRequest</code>

・authorizeメソッドtrueを返すことでUserRequestの使用を許可する&nbsp;&nbsp;&nbsp;<pre><code>&nbsp;&nbsp;public function authorize()
&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;return true;
&nbsp;&nbsp;}</code></pre> ・rulesメソッドバリデーションを定義する <pre><code>&nbsp;&nbsp;public function rules(): array
&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;return [
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'name' =&gt; ['required', 'max:32'],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'email' =&gt;['required', 'email'],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'password' =&gt;['required', 'min:4', 'confirmed'],
&nbsp;&nbsp;&nbsp;&nbsp;];
&nbsp;&nbsp;}</code></pre> ・messageメソッドバリデーションエラーの場合のメッセージをカスタマイズする&nbsp;&nbsp;<pre><code>public function messages()
&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;return [
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'name.required' =&gt; '名前を入力してください',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'name.max' =&gt; '最大32文字で入力してください',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'email.required' =&gt; 'メールアドレスを入力してください',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'email.email' =&gt; 'メールアドレス形式で入力してください',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'password.required' =&gt; 'パスワードを入力してください',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'password.min' =&gt; '4文字以上で入力してください',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'password.confirmed' =&gt; 'パスワードが一致していません',
&nbsp;&nbsp;&nbsp;&nbsp;];
&nbsp;&nbsp;}</code></pre>

UserRequest.phpを編集

バリデーションを適用する場合UserRequestクラスで受け取るように編集して紐づける <pre><code>&nbsp;&nbsp;public function confirm(UserRequest $request)
&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;return view('users/confirm', [
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'inputs' =&gt; $request-&gt;all(),
&nbsp;&nbsp;&nbsp;&nbsp;]);
&nbsp;&nbsp;}</code></pre>

UsersControllerを編集

フォームリクエストからバリデーションを作成

各フォームの下にエラーメッセージが表示されるように調整。 <pre><code>…
&nbsp;&nbsp;@error('name')
&nbsp;&nbsp;&nbsp;&nbsp;&lt;p style="color:red"&gt;{{ $message }}&lt;/p&gt;
&nbsp;&nbsp;@enderror
…
&nbsp;&nbsp;@error('email')
&nbsp;&nbsp;&nbsp;&nbsp;&lt;p style="color:red"&gt;{{ $message }}&lt;/p&gt;
&nbsp;&nbsp;@enderror
…
&nbsp;&nbsp;@error('password')
&nbsp;&nbsp;&nbsp;&nbsp;&lt;p style="color:red"&gt;{{ $message }}&lt;/p&gt;
&nbsp;&nbsp;@enderror
…</code></pre>

create.blade.phpを編集

テンプレート編集してエラーメッセージを表示

設定どおりのエラーになり、各フォームの下にメッセージが表示されることを確認 <img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/a9222546e8fe41dcb3e61a411e05610e/image.png" alt=""> <img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/a2d02704b67b45c28892f1092f268147/image.png" alt="">

今回は利用者登録フォームにバリデーションを作成し、各フォームの下にメッセージが表示されるように実装を行いました。

【Laravel】2パターンのバリデーションの作成

入力画面 : /users/create確認画面 : /users/confirm完了画面 : /users/finish今回は上記のようにURLを設定しました。 <pre><code>Route::get('/users/create', [UsersController::class, 'create'])-&gt;name('users.create');
Route::post('/users/confirm', [UsersController::class, 'confirm'])-&gt;name('users.confirm');
Route::post('/users/finish', [UsersController::class, 'store'])-&gt;name('users.store');</code></pre>

route設定

下記コマンドでコントローラーを作成する。<code>php artisan make:controller UserController --resource</code>

・createメソッド<pre><code>&nbsp; &nbsp; public function create()
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; return view('users/create');
&nbsp; &nbsp; }</code></pre>

コントローラーを編集

・resources/views/users/create.blade.php 名前、メールアドレス、パスワードの入力フォームを作成しました。遷移先は確認画面にしています。 <pre><code>&lt;h1&gt;利用者登録入力画面&lt;/h1&gt;
&lt;form method="post" action="{{ route('users.confirm') }}"&gt;
&nbsp; &nbsp; @csrf
&nbsp; &nbsp; &lt;label for="name"&gt;名前&lt;/label&gt;
&nbsp; &nbsp; &lt;input type="text" name="name"&gt;
&nbsp; &nbsp; &lt;br&gt;
&nbsp; &nbsp; &lt;label for="email"&gt;メールアドレス&lt;/label&gt;
&nbsp; &nbsp; &lt;input type="text" name="email"&gt;
&nbsp; &nbsp; &lt;br&gt;
&nbsp; &nbsp; &lt;label for="password"&gt;パスワード&lt;/label&gt;
&nbsp; &nbsp; &lt;input type="password" name="password"&gt;
&nbsp; &nbsp; &lt;br&gt;
&nbsp; &nbsp; &lt;button type="submit"&gt;登録確認画面へ&lt;/button&gt;
&lt;/form&gt;</code></pre>

テンプレートを作成

表示画面

登録入力画面を作成

・confirmメソッド<pre><code>&nbsp; &nbsp; public function confirm(Request $request)
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; return view('users/confirm', [
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'inputs' =&gt; $request-&gt;all(),
&nbsp; &nbsp; &nbsp; &nbsp; ]);
&nbsp; &nbsp; }</code></pre>

・resources/views/users/confirm.blade.php確認→完了画面遷移で入力値を送れるようにhiddenでデータを送っています。 <pre><code>&lt;h1&gt;利用者登録確認画面&lt;/h1&gt;
&lt;form method="post" action="{{ route('users.store') }}" &gt;
&nbsp; &nbsp; @csrf
&nbsp; &nbsp; &lt;input type="hidden" name="name" value="{{ $inputs['name'] }}"&gt;
&nbsp; &nbsp; &lt;input type="hidden" name="email" value="{{ $inputs['email'] }}"&gt;
&nbsp; &nbsp; &lt;input type="hidden" name="password" value="{{ $inputs['password'] }}"&gt;
&nbsp; &nbsp; &lt;label for="name"&gt;名前&lt;/label&gt;
&nbsp; &nbsp; {{$inputs['name']}}
&nbsp; &nbsp; &lt;br&gt;
&nbsp; &nbsp; &lt;label for="mail"&gt;メールアドレス&lt;/label&gt;
&nbsp; &nbsp; {{$inputs['email']}}
&nbsp; &nbsp; &lt;br&gt;
&nbsp; &nbsp; &lt;label for="password"&gt;パスワード&lt;/label&gt;
&nbsp; &nbsp; ****
&nbsp; &nbsp; &lt;br&gt;
&nbsp; &nbsp; &lt;button type="button" onclick=history.back()&gt;戻る&lt;/button&gt;
&nbsp; &nbsp; &lt;button type="submit"&gt;登録する&lt;/button&gt;
&lt;/form&gt;</code></pre>

登録確認画面を作成

・storeメソッドパスワードはハッシュ化して保存しています。 <pre><code>&nbsp; &nbsp; public function store(Request $request)
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; $userData = $request-&gt;all();
&nbsp; &nbsp; &nbsp; &nbsp; $userData['password'] = Hash::make($userData['password']);
&nbsp; &nbsp; &nbsp; &nbsp; User::create($userData);
&nbsp; &nbsp; &nbsp; &nbsp; return view('users.finish');
&nbsp; &nbsp; }</code></pre>

・resources/views/users/finish.blade.php <pre><code>&lt;h1&gt;利用者登録完了画面&lt;/h1&gt;
登録が完了しました。
&lt;br&gt;
&lt;button type="button" onclick="location.href='{{ route('users.index') }}' "&gt;一覧画面へ戻る&lt;/button&gt;</code></pre>

登録完了画面を作成

・入力した「利用者２」のユーザーが登録できていることを確認<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/759374fde34e410cb460f91bcc025d32/image.png" alt="">

DBの確認

確認

今回はLaravelでの入力画面→確認画面→完了画面を遷移してデータの登録を行う処理を実装してみました。

【Laravel】入力→確認→完了画面を遷移してのデータ登録の実装

Application Programming Interfaceの略称であり、アプリケーションやソフトウェアをつなぐためのインターフェースです。

APIとは

<code>php artisan route:list</code> <img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/b8c8844da0f047de891c036e9d24b8e0/image.png" alt="">

route確認

・indexメソッドを編集<pre><code>&nbsp;&nbsp;public function index()
&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;$blogs = Blog::all();
&nbsp;&nbsp;&nbsp;&nbsp;return response()-&gt;json([
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'status' =&gt; true,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'blogs' =&gt; $blogs
&nbsp;&nbsp;&nbsp;&nbsp;], 200);
&nbsp;&nbsp;}</code></pre> ・postmanから動作確認<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/cecbab14dcef413aaa17c90bb61dac99/image.png" alt="">

一覧表示

・showメソッドを編集<pre><code>&nbsp; &nbsp; public function show(string $id)
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; $blogs = Blog::find($id);
&nbsp; &nbsp; &nbsp; &nbsp; if($blogs){
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return response()-&gt;json([
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'message'=&gt; 'Blog found',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'data' =&gt; $blogs
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ], 200);
&nbsp; &nbsp; &nbsp; &nbsp; } else {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return response()-&gt;json([
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'message'=&gt; 'Blog not found',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ], 404);
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }</code></pre> ・postmanから動作確認指定したidが存在する場合<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/7a8e3afb1bbf4b8f9f5114aea445006c/image.png" alt=""> 指定したidが存在しない場合<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/58d46a05c8414712b01a73b040a7abea/image.png" alt="">

特定のidのデータを表示

・updateメソッドを編集<pre><code>&nbsp; &nbsp; public function update(Request $request, string $id)
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; $update = [
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'title' =&gt; $request-&gt;title,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'content' =&gt; $request-&gt;content
&nbsp; &nbsp; &nbsp; &nbsp; ];
&nbsp; &nbsp; &nbsp; &nbsp; $blog = &nbsp;Blog::where('id', $id)-&gt;update($update);
&nbsp; &nbsp; &nbsp; &nbsp; $blogs = Blog::all();
&nbsp; &nbsp; &nbsp; &nbsp; if ($blog) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return response()-&gt;json([
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'message'=&gt; 'Blog update',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'data' =&gt; $blogs
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ], 200);
&nbsp; &nbsp; &nbsp; &nbsp; } else {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return response()-&gt;json([
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'message' =&gt; 'Blog not found',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ], 404);
&nbsp; &nbsp; &nbsp; &nbsp; }</code></pre> ・postmanから動作確認title : 「タイトル更新」content : 「内容更新」<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/7ea220ad6c3e43b58cb345436af3bb9a/image.png" alt="">

特定のidのデータを更新

・destroyメソッドを編集<pre><code>&nbsp; &nbsp; public function destroy(string $id)
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; $blog = Blog::where('id', $id)-&gt;delete();
&nbsp; &nbsp; &nbsp; &nbsp; if ($blog) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return response()-&gt;json([
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'message' =&gt; 'Blog deleted successfully',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ], 200);
&nbsp; &nbsp; &nbsp; &nbsp; } else {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return response()-&gt;json([
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'message' =&gt; 'Blog not found',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ], 404);
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }</code></pre> ・postmanで動作確認（id=1を削除）<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/b596921f002b4d0c8edb8b42013a8e6b/image.png" alt=""> ・A5SQLでid=1のデータが削除されていることを確認。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/7599751fc7a646178c7dbf2f63dec33f/image.png" alt="">

特定のidのデータを削除

コントローラーに処理を追加  (BlogController.php)

今回はLaravelを使用して簡易的なAPIを実装してみました。

【Laravel】簡易API実装②

Application Programming Interface の略称であり、アプリケーションやソフトウェアをつなぐためのインターフェースです。

・マイグレーションファイルを作成<code>php artisan make:model Blog -m</code> ・作成したファイル内でblogsテーブルのカラムを設定今回はタイトル(title)と本文(content)カラムを設定する。<pre><code>&nbsp; &nbsp; public function up(): void
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; Schema::create('blogs', function (Blueprint $table) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $table-&gt;id();
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $table-&gt;string('title');
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $table-&gt;string('content');
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $table-&gt;timestamps();
&nbsp; &nbsp; &nbsp; &nbsp; });
&nbsp; &nbsp; }</code></pre> ・マイグレーション実行<code>php artisan migrate</code>

マイグレーションからモデルを作成

・コントローラーファイルを作成<code>php artisan make:controller BlogController --resource</code> ・storeメソッドを編集<pre><code>&nbsp; &nbsp; /**
&nbsp; &nbsp; &nbsp;* Store a newly created resource in storage.
&nbsp; &nbsp; &nbsp;*/
&nbsp; &nbsp; public function store(Request $request)
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; $blog = Blog::create($request-&gt;all());
&nbsp; &nbsp; &nbsp; &nbsp; return response()-&gt;json(['blog'=&gt; $blog]);
&nbsp; &nbsp; }</code></pre>

■routes\api.php 下記を追記<pre><code>Route::apiResource('blogs', \App\Http\Controllers\Blogontroller::class);</code></pre>

route作成

title : 「タイトル」content : 「内容」 ・上記のデータをpostmanを使用し新規登録<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/ac816c8fa4c841c59269fc489dd4b5d4/image.png" alt=""> ・DBを確認<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/76d61b8bc9654dbda52383a9b8e1e5d6/image.png" alt="">

今回はLaravelを使用して簡易的なAPIを実装してみました。

【Laravel】簡単API実装①

<code>psql -U postgres -p ポート番号</code>

データベースへの接続

バージョンの確認

データベース一覧表示

role(ユーザー)一覧表示

<code>create database DB名;</code>

データベース作成

<code>create role ユーザー名 with login password 'パスワード';</code>

ユーザー作成

.sqlファイルを移行を読み込むことができます。<code>psql -U postgres -p ポート番号 -d DB名 &lt; 〇〇.sql</code>

データのインポート

<code>drop database テーブル名;</code>

データベース削除

コマンド一覧

以上が基本部分のコマンドのまとめになります。これまでPostgreSQLの案件に多く携わってきて、ローカル環境構築時などに素早くできるように上記あたりを抑えていました。

BuildersIO produced by YOKU

JavaScriptでシーザー暗号を実装してみる

実装

まとめ

AWS CodeCommitからSSH接続でgit cloneする

Nuxt.jsをS3にデプロイしてCloudFront経由でアクセスする

OpenAIとDeeplのAPIを使ってChatGPTのCLIツール作ってみた

関連記事

パスワードに繰り返し文字を使用させない

手書き図形の認識（ゼスチャー認識）

typeScriptのtypeとinterfaceの違い

AWS CodeCommitからSSH接続でgit cloneする

Nuxt.jsをS3にデプロイしてCloudFront経由でアクセスする

OpenAIとDeeplのAPIを使ってChatGPTのCLIツール作ってみた