components

App.js

REACT_APP_MESSAGEの値を引数として渡す

import './App.css';
import { Message } from './components/Message';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Message message={process.env.REACT_APP_MESSAGE} />
      </header>
    </div>
  );
}
export default App;

Message.js

import React from 'react';

export const Message = (props) => {
  return <div>REACT_APP_MESSAGE: {props.message}</div>;
};

stories

Message.stories.jsx

storybookでは、prefix STORYBOOK_を付けた環境変数しか認識しないので、
STORYBOOK_をつけた、STORYBOOK_REACT_APP_MESSAGEを使う

import React from 'react';
import { Message } from './Message';

export default {
  title: 'Example/Message',
  component: Message,
};

const Template = (args) => <Message {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  message: process.env.STORYBOOK_REACT_APP_MESSAGE,
};

Actions

storybookでは、prefix STORYBOOK_を付けた環境変数しか認識しないので、
STORYBOOK_をつけた、STORYBOOK_REACT_APP_MESSAGEをenvに設定します。

name: Storybook Build and Deploy

on: [workflow_dispatch] # 手動トリガー

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v2

      - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
        run: |
          yarn install --frozen-lockfile
          yarn build-storybook
        env:
          STORYBOOK_REACT_APP_MESSAGE: ${{ secrets.REACT_APP_MESSAGE }}

      - name: deploy storybook 🚀
        uses: JamesIves/github-pages-deploy-action@v4.2.2
        with:
          branch: gh-pages # The branch the action should deploy to.
          folder: storybook-static # The folder the action should deploy.

参考

https://github.com/storybookjs/storybook/issues/12270