ReactでStoryBookを導入したがアクセスできなかった

エラーの内容

yarn storybookでサーバーを立ち上げた後にアクセスしても接続拒否によってアクセスできない

原因

dockeｒ内のポートに外部で接続できる設定ができていなかったため
（今回の場合6006ポートが外部から接続できる設定になっていなかった）

解決策

docker-compose.ymlファイルに下記記述を追加する

version: '3'

services:
  frontend:
    build: .
    environment:
      - NODE_ENV=development
    volumes:
      - ./:/usr/src/app
    ports:
      - '3000:3000'
      - '6006:6006' # ←これ
    tty: true
    container_name: react_app
    working_dir: "/usr/src/app"
networks:
  default:

補足

dockerファイルを編集後は、$ docker-compose buildでイメージを再構築し、$ docker-compose up -dでコンテナを再作成する。
その後、$ docker ps -aで確認したときにPORTSが下記のようになっていれば良い

PORTS                 
0.0.0.0:3000->3000/tcp, :::3000->3000/tcp, 0.0.0.0:6006->6006/tcp, :::6006->6006/tcp

反省

dockerの理解がまだまだ足りていないと感じた。
外部からdockeｒ内の仮装環境にアクセスする際はPORTを設定しないといけない（Railsの時も同じとこで詰まった記憶が、、、）

参考記事