Storybook: 構築時に静的ディレクトリのパスを保持する

うーん、この問題は約build-storybook 、それがどのように機能するかを調べる必要があります。

カスタムミドルウェアを試してみることができますか？、それが機能するかどうかはわかりませんが、機能する可能性があります。
https://github.com/storybooks/react-storybook/pull/435#issuecomment -264813688
https://github.com/storybooks/react-storybook/blob/master/src/server/middleware.js#L35

：+1：これは問題です-ストーリーブックを作成するためではなく、開発のために使用するだけです。

ミドルウェアで動作させる方法は次のとおりです。

const express = require('express');
const path = require('path');
const paths = require("../config/paths");

const expressMiddleWare = (router) => {
    console.log(path.join(__dirname), paths.appPublic);
    router.use('/public', express.static(paths.appPublic))
};

module.exports = expressMiddleWare;

私はこれのPRを取得しようとしますが、時間のatmがあるかどうかはわかりません

ソリューションを共有していただきありがとうございます。 ❤️

皆さんこんにちは！ 最近、この問題はあまり進んでいないようです。 それでも質問、コメント、バグがある場合は、遠慮なく議論を続けてください。 残念ながら、すべての問題に取り組む時間がありません。 私たちはいつでも寄付を受け付けていますので、助けが必要な場合はプルリクエストを送ってください。 非アクティブな問題は60日後にクローズされます。 ありがとう！

ねえ、また私だ！ 代わりに、メンテナが現在の開発ロードマップに集中できるように、この問題を解決します。 上記の問題が引き続き懸念される場合は、新しいチケットを開いて、この古いチケットについて言及してください。 Storybookをご利用いただきありがとうございます。

こんにちは！ @ndelangen @hansthinhle @patrickgordon

私はまったく同じ問題に直面しています。 これは今までに解決されましたか？

ありがとう！

こんにちは@ aviramga-私がいくつか投稿した私の解決策は私たちのためにそれを解決しました。 私はそれを解決するためにPRをすることを決して回避しませんでした。

私の記憶がジョギングされた今でも実際にそれをするかもしれません:)

こんにちは@patrickgordon。 悲しいことに、私の問題はビルドストーリーブックだけにあります：/

私はそれをPercyというツールと一緒に使用して、アプリのUIの問題を見つけています。

ビルドのソリューションを見つけることができましたか？

シンボリックリンクを使用してこれを回避できるようです。

任意の名前（例： static-link ）のディレクトリを追加し、次の内容のpublic （拡張子なし）というファイルをそこに配置します。

../public

そうすれば、 -s static-link必要なことを達成できるはずです。

@Hypnosphiヒントをありがとう！ しかし、これはうまくいかないようです。
それがどのように機能するか説明できますか？

私のすべての静的ファイルは、「static」という名前のディレクトリの下にあります（パブリックではありません）。
私はうまくいかなかった方法を試しました：

1. 「static」という名前のファイルと../staticを含む任意のディレクトリを作成します-build-storybookを実行したときにビルドエラーが発生しました
2. 上記と同じですが、「public」という名前のファイルがあります-それでも画像は表示されません

何かアドバイス？

ありがとう

どのOSを使用していますか？
https://en.wikipedia.org/wiki/Symbolic_link#Overview

エラーは何でしたか？

Mac High Sierra

@Hypnosphiですが、正しく理解できるようにするために、例をユースケースに合わせて調整するには、新しいディレクトリを再作成する必要があります。たとえば、static-linkにstaticという名前のファイルを配置し、その中に../staticと記述します。

正しい？

OK、シンボリックリンクを作成するための私の指示が間違っていたようです。 正しい方法は次のとおりです。

mkdir static-link
ln -s static static-link/static

静的リンクディレクトリに「ファイル」を作成し、gitで共有できます（ただし、Windowsでは機能しません）。

@Hypnosphi私はそれを

いいえ、永続的である必要があります

@Hypnosphiいいえ、まだ機能していません。 ビルド中に、次のようなログが表示されます。
cp：そのようなファイルまたはディレクトリはありません：static-link / static

上記の指示に従いました。 だから私は静的から静的リンク/静的へのシンボリックリンクを持つ静的リンクと呼ばれる空のディレクトリを持っています

私は何が間違っているのですか？

時間を割いて手伝ってくれて本当にありがとう:)

そして、あなたは-s static-linkオプションを使用しますよね？

@Hypnosphiはbuild-storybook-c .storybook -s static-linkを意味しますか？

はい

私がやります

申し訳ありませんが、タイプミスしました：

ln -s ../static static-link/static

@Hypnosphi
なぜ../static？

静的リンクディレクトリが空であることは正しいですか？
プライベートな会話に移り、最終結果をここに公開したいと思うかもしれません。 私たちは非常に近くにいるように感じます、そしてそれはただの誤解です:)

リンクの場所からリンクのターゲットまでの相対パスです

@Hypnosphi絶対パスを使用して動作させることができました.....しかし、セマフォに同じロジックを実装したいので、相対パスで動作させる必要があります

@Hypnosphiは回避策を見つけました。 本当にありがとうございました、あなたは命の恩人です！

それを解決するためのヒントはありますか？

はい、上記のソリューションを実行するだけです。 シンボリックリンクを使用する
ln -s /<absolute-path-your-static-directory> storybook-static-symlink/static

@aviramgaこの方法はまだ機能していますか？ シンボリックリンクを使用して運が悪い。

私のフォルダ構造

|- docs
  |- folders-with-images
|- sandbox (holds my storybook files)
|- src
  |- README.md with image paths `/docs/folder/image.png`

ミドルウェアファイルを使用してストーリーブックstart-storybook -c sandbox -s sandbox,docs -p 6006を提供すると、これを機能させることができます。

const express = require('express');
const path = require('path');

module.exports = router => {
  router.use('/docs', express.static(path.join(__dirname, '..', 'docs')));
}

しかし、使用してシンボリックリンクを追加するln -s /docs sandbox/docsし、実行しているbuild-storybook -c sandbox -s sandbox,docs -o storybookまだ動作しません。

docs内のフォルダはコピーされますが、必要なファイルパスは/docs/folder/image.pngため、画像404です。

また、これを解決するために静的リンクを使用することに成功しました：

package.json：

"scripts": {
  "storybook": "(mkdir ./src/static-link || true) && (ln -s ../static ./src/static-link/static || true) && start-storybook -p 6006 -s ./src/static-link"
}

すべての開発者が同じOSを使用しているわけではない場合に備えて、互換性の理由から、package.jsonスクリプトを介してシンボリックリンクを作成しないことをお勧めします。

別の方法として、次のように.storybook /webpack.config.jsファイルのcopy-webpack-pluginを使用することをお勧めします。

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = config => {
  function resolve(dir) {
    return path.join(__dirname, '..', dir);
  }

  // Other configuration properties

  config.plugins.push(
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, 'static-foo'),
        to: '.'
      },
      {
        from: path.resolve(__dirname, '../static-bar'),
        to: './bar'
      }
    ])
  );

  return config;
}

例えばこれは、ディレクトリの内容をマウントします.storybook/static-fooにhttp://localhost:6006/との内容static-barにhttp://localhost:6006/bar/ 。

また、 pushを使用してplugins配列に追加し、StorybookWebpackの構成を壊す可能性のある他のプラグインの上書きを回避することにも注意してください。

将来の参考のために、シンボリックリンクはまったく問題なく使用できます。 それらを相対パスで使用する必要がある場合は、次のように-rスイッチを使用するだけです。ln-rsdir1 dir2

個人的には、ストーリーブックが静的ディレクトリ全体をコピーするのに適していると思われる場合は、ドキュメントに明確に記載する必要があると思います。 それ以外の場合は、代わりに適切なシンボリックリンクを作成する動作に切り替える必要があります。 過度のディスク容量使用によりサーバーがクラッシュしていたため、コピーのことを知りました。

したがって、基本的には公式の組み込みソリューションはなく、すべての「ソリューション」はランダムなくだらないハックです:)

すべての開発者が同じOSを使用しているわけではない場合に備えて、互換性の理由から、package.jsonスクリプトを介してシンボリックリンクを作成しないことをお勧めします。

別の方法として、次のように.storybook /webpack.config.jsファイルのcopy-webpack-pluginを使用することをお勧めします。

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = config => {
  function resolve(dir) {
    return path.join(__dirname, '..', dir);
  }

  // Other configuration properties

  config.plugins.push(
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, 'static-foo'),
        to: '.'
      },
      {
        from: path.resolve(__dirname, '../static-bar'),
        to: './bar'
      }
    ])
  );

  return config;
}

例えばこれは、ディレクトリの内容をマウントします.storybook/static-fooにhttp://localhost:6006/との内容static-barにhttp://localhost:6006/bar/ 。

また、 pushを使用してplugins配列に追加し、StorybookWebpackの構成を壊す可能性のある他のプラグインの上書きを回避することにも注意してください。

これは機能しません;）

これは機能する構成です：

.storybook / webpack.config.js
（静的フォルダーがプロジェクトのルートフォルダーにあると仮定します）

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = async ({ config }) => {

  function resolve(dir) {
    return path.join(__dirname, '..', dir);
  }

  // Other configuration properties

  config.plugins.push(
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../../static'),
        to: './static'
      }
    ])
  );

  return config;
}

@mtrabelsiはいくつかの理由で私のために動作しません...

また、 .storybookフォルダーはrootから1レベルの深さにあり、2倍の深さではないため、タイプがあると思います。 したがって、次のように切り替える必要があります。
from - from: path.resolve(__dirname, '../../static')
to - from: path.resolve(__dirname, '../static')

"copy-webpack-plugin"： "^ 5.0.4"
すべての道は正しいです。 ダブルチェック。

更新
.storybook/フォルダー内にmiddleware.jsファイルを作成することで、 @ BradMcGonigleの回答が上位にあることがわかりました。

const express = require('express');
const path = require('path');

module.exports = router => {
  router.use('/docs', express.static(path.join(__dirname, '..', 'docs')));
}

@BiosBoyは、ここでの混乱を避けるために、私のプロジェクト構造についてのアイデア（あなたが知る必要があるものだけ）：

My_sweet_projet_ROOT_DIR / components / .storybook / webpack.config.js
My_sweet_projet_ROOT_DIR / static

また、next.jsをメインアプリケーションとして使用し、componentsフォルダーからreactコンポーネントを消費します。

ここに私のセットアップ（あなたはあなたの側でそれを再現することができます-私はあなたを信頼します：D）

My_sweet_projet_ROOT_DIR / package.json

{
  "name": "sweet_like_butter",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "next": "^8.1.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "styled-components": "^4.2.0"
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "devDependencies": {
    "babel-plugin-styled-components": "^1.10.0"
  }
}

My_sweet_projet_ROOT_DIR / next.config.js

const withCSS = require('@zeit/next-css')
module.exports = withCSS()

ベースタグを使用することで、同様の問題を回避することができました。

1. .storybookディレクトリにmanager-head.htmlファイルを作成します。 https://storybook.js.org/docs/configurations/add-custom-head-tags/
2. 追加

<head>
  <script>
    const hostname = window.location.hostname
    if (hostname !== "" && hostname !== "localhost") {
      const script = document.createElement('base')
      script.href = '/storybook-static/'
      document.getElementsByTagName('head')[0].appendChild(script)
    }
  </script>
</head>

（script.href =任意のパスへ）

index.html内のファイルは、指定されたプレフィックスで取得されるようになりました

この動作をStorybookに組み込むべきではありません。ここで、 -s ./staticフラグを立てると、ストーリーブックでも本番環境と同じようにパスが機能しますか？ Storybookに静的ディレクトリが./staticであると伝えると、相対パス（ ./static/image.pngなど）を代わりに./image.pngするか、間抜けなシンボリックリンクを使用する必要があることは無意味に思えます🤔

@eckmLJE上記で投稿したスニペットを使用する場合、追加のWebpack構成やシンボリックリンクがなくても機能するはずです。 ただし、ビルドプロセスの一部としてこれを自動的に出力することを検討できます。

私はまだ2020年に問題に直面しています...
私の場合は非常に単純です。私のpackage.jsonは次のスクリプトがあります： "storybook": "start-storybook -s ./dist/img -p 8888"

したがって、 npm run storybookを実行すると、 info => Loading static files from: /home/vagrant/projects/MySuperProject/web/themes/ofb/ofb_ui/dist/img .表示されます。

しかし、このURLを使用してブラウザからdist/imgディレクトリ内のファイルにアクセスしようとすると、機能しません： http://localhost:8888/myImage.png .. ..

だからみんな、それはバグですか、それとも私は何か間違ったことをしていますか？

@ndelangenこれを6.0の

CopyWepbackPluginのAPIが変更されたようで、次のような@mtrabelsiソリューションにpatternキーを追加する必要があります。

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = async ({ config }) => {
  config.plugins.push(
    new CopyWebpackPlugin({
      pattern: [
        {
          from: path.resolve(__dirname, '../../static'),
          to: './static'
        }
      ]
    })
  );

  return config;
}

この問題に関連する2セントを追加します。 密接に関連していると思いますが、私のソリューションは@mtrabelsiとは異なり、 build-storybookコマンドの結果である./staticディレクトリにアセットをコピーするだけでは不十分であることがわかりました。 具体的には、静的アプリをhttp://example.com/docsから静的アプリを提供するTomcatサーバーにデプロイする場合、docsはサーバー上のTomcat webapps /にあるディレクトリです。

サブパスが原因で、/ staticディレクトリ内の/ cssディレクトリ外のファイルはロードされませんでした。 私は（これらが展開されたバージョンにロードするために失敗した静的な資産だった）画像やフォントの相対パスを使用しています。 したがって、 https://example.com/img/path/to/my/imageようなリクエストは、/ staticを追加する必要があるときに失敗しました。つまり、 https://example.com/static/img/path/to/my/image私のソリューションは、私が言ったように、 @ mtrabelsiに非常に近い

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = async ({ config }) => {

  function resolve(dir) {
    return path.join(__dirname, '..', dir);
  }

  // Other configuration properties

  config.plugins.push(
    new CopyWebpackPlugin({
      pattern: [
        {
          from: path.resolve(__dirname, './_assets'), // My static font and images are located in the .storybook dir
          to: './' // Drop both the fonts/ and img/ directory into the root of the build output.
        }
      ]
    })
  );

  return config;
}

この後、画像とフォントが適切に読み込まれました。

@tmeasdayの提案： start-storybookとbuild-storybook両方に表示されるように、これをmain.jsオプションにできないのはなぜですか。

@ vcastro45 start- storybookの両方でこれをテストしましたが、機能しているようです（ nextブランチでテスト済み）。

複製レポを作成していただけませんか？

@shilman可能ですが、プリセットセットアップをから持ち上げる必要があります
https://github.com/storybookjs/storybook/blob/9ea455a1746c489b7364448212663f2445af8a8b/lib/core/src/server/manager/manager-config.js#L101 -L102

ここの前に：
https://github.com/storybookjs/storybook/blob/19c2420db80fcb3b89b34cdbbe03bf9010b0b3b2/lib/core/src/server/build-static.js#L190 -L191

そして、それをビルド/開発チェーンのすべての下位関数に渡します。
これはかなりのリファクタリングであり、1日でできることではありません。

また、すべてをTSに移行したいもう1つの瞬間でもあります。 とにかくlib / coreのファイルの50％に触れているので。

@ndelangen OOF、今はやめましょう🙈

ええ、いつかやります

@ndelangen私は＃11370で@tmeasdayとの議論あたりの回避策を文書化してきました。 この構成をmain.jsに移動し、重大な変更ではない機能として6.xでこのユースケースをサポートするオプションを追加することを提案します。

/staticパス上の./publicから静的ファイルを提供するstart-storybook -p 6006 -s "./public:/static"ようなソリューションが実装されていると思いますか？ それは非常に柔軟な使用法につながり、私たちの多くがすでに精通しているパスマッピングのDockerの規則に適合します。

皆さんこんにちは！ 最近、この問題はあまり進んでいないようです。 それでも質問、コメント、バグがある場合は、遠慮なく議論を続けてください。 残念ながら、すべての問題に取り組む時間がありません。 私たちはいつでも寄付を受け付けていますので、助けが必要な場合はプルリクエストを送ってください。 非アクティブな問題は30日後にクローズされます。 ありがとう！

@nfroidureそれは確かに面白いアイデアです！

@ndelangenよろしければ、PRで試してみることができます。 合併する可能性はありますか？

@nfroidureは実行可能です：
コードは次のようになります。
https://github.com/storybookjs/storybook/blob/9182d9f5ddbe136e9cd5fc9f11fa962a3cfe08f1/lib/core/src/server/build-dev.js#L77 -L93

さて、私はここに何かを持っています： https ：

一部のテストは失敗していますが、それらの失敗と私の変更との間にリンクが見当たりません。

LMKWYT;）

このPR @ nfroidureをありがとう！

今週見ていきます！

ZOMG !! この問題を参照するPR＃12222を含むhttps://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.6をリリースしました。 今すぐアップグレードしてお試しください！

このプレリリースは@next NPMタグにあります。

この問題を閉じます。 まだまだやることがあると思われる場合は、再度開いてください。

この新機能の使用方法の例はありますか？