storybookでPHPを利用してAPIデータを取得する

別ドメインのAPIデータを取得するような仕組みの場合、phpを使用して同ドメインのデータとして取得したい場合があると思います。
storybookでこれを実現する方法を紹介します。

フォルダ構成

npxでインストールしたものとAPI用のphpフォルダを置いた状態で前提として進めます。

/.storybook
/stories
/php/
  /api/
    items.php
/package.json

ローカル環境でPHPを使う場合

APIを取得するだけであればphpのビルドインサーバー使うのが楽だと思います。

php -S 0.0.0.0:8000 -t ./php

0.0.0.0（localhost）

storybookでproxyを使う方法

1. 【http-proxy-middleware】をインストールする

npm i http-proxy-middleware -D

2. storybookのconfigに【middleware.js】を置く

configのフォルダ(デフォルトだと.storybook)下に【middleware.js】を置いて以下の様な記述をします。

【例】拡張子がphpになってるものをproxyするパターン

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = router =>
  router.use(
    "**/*.php",
    createProxyMiddleware({
      target: "http://localhost:8000/",
    })
  );

【例】/api以下をproxyして、本番URLに合わせてリライトするパターン

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = router =>
  router.use(
    "/api",
    createProxyMiddleware({
      target: "http://localhost:8000/",
      pathRewrite: {
        '^/api/items': '/api/items.php',
      },
    })
  );

ビルドインサーバーを実行した状態で、storybookの【 http://localhost:6006/api/items 】を叩くとproxyが動作していることを確認できます。

一つのコマンドで実行できるようにする

ビルドインサーバーとstorybook両方のコマンドを実行するのは面倒だと思うので、一つで実行できるようにします。

1. 【npm-run-all】をインストール

npm i npm-run-all -D

2. package.jsonにコマンドを追加する

  "scripts": {
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "proxy": "php -S 0.0.0.0:8000 -t php/",
    "start": "npm-run-all -p proxy storybook"
  }

storybook実行中にproxyのログが必要ない場合は、proxyのオプションに-qを付けると消せます。

ローカルだけproxyを使いたい場合やパスを変えたい場合

storybookは、.storybookの中身を別のフォルダに用意することで、configを分けることが出来ます。
コマンドのオプション(-c)でフォルダを指定します

start-storybook -c .storybook/dev
build-storybook -c .storybook/build

このような形でconfigを分けると、dev専用の【middleware.js】を仕込むことができます。