web-dev-qa-db-ja.com

環境変数を使用したベースhrefの設定

ビルド環境の構成に基づいて、<base href=""/>タグのhref値を設定する必要があります。

例えば：

ステージングには<base href="/staging" />が必要です

製品には<base href="/" />が必要です

現在の設定：

ビルドコマンド：

"build": "sh -ac '. .env.${REACT_APP_ENV}; react-scripts build'",

"build:staging": "REACT_APP_ENV=staging npm run build",

"build:prod": "REACT_APP_ENV=production npm run build",

.env.staging.js：

REACT_APP_BASE_HREF=/staging

index.html：

....

<base href="" + process.env.REACT_APP_API_URL />

....

これはindex.htmlでは機能しないようです。同様の設定はJSファイルでも機能しますが

（おそらく、JSファイルが解析されて単一のファイルにバンドルされ、バンドラーがその時点で値を読み取るためです）

試したこと：

index.html：

<base href=process.env.REACT_APP_API_URL />

<base href="process.env.REACT_APP_API_URL" />

<base href="%process.env.REACT_APP_API_URL%" />（PUBLIC_URL変数と同様）

ブラウザルーターと一緒にbasenameプロパティを設定しても、問題は解決しません。

reactjsdeploymentcreate-react-appreact-router-v4
6
Manmeet S. Oberoi

この問題は解決されました。次の手順を実行します：

  1. Package.jsonでhomepageキーを""に設定します
  2. .env.stagingファイルでPUBLIC_URL=/surveyを設定します
  3. <base href>を使用する必要はありません。 HTMLファイルから削除できます

  4. スタイルシートのリンクをに変更します

    <link rel="stylesheet" href="%PUBLIC_URL%/vendor/bootstrap/css/bootstrap.min.css">

Process.envを追加する必要はありません

4
Manmeet S. Oberoi

できるよ：

    <base href="%PUBLIC_URL%/"> <!-- Note the slash at the end -->
  • PUBLIC_URLは、process.envからアクセスできる環境変数です。
  • ターミナルPUBLIC_URLまたはexport PUBLIC_URL=/subdirで.env env変数を設定できます（create-react-appをチェックしてください。内部でdotenvを使用します）。
  • package.jsonのhomepageを/subdirに設定することもできます。これも機能します。
  • PUBLIC_URLが設定されていない場合、ホームページの値を取得しています。

index.html内のリンクにプレフィックスを付けるだけでよい場合は、ベースタグは必要ありません。ベースタグは、たとえば画像リンクに役立ちます。コンポーネント内にあるもの：

domain.com/でアプリを提供する場合は、次のことができます。

<img src="/assets/duck.jpg" />

代わりに、domain.com/subdir/でアプリを提供する場合は、次のことができます。

<img src="/subdir/assets/duck.jpg" />

または、上記のようにベースタグを設定した場合：

<img src="assets/duck.jpg" /> <!-- Base tag only work with relative paths, same as ./assets/duck.jpg -->

上記に注意してください：src="assets/duck.jpg"はフロントページ（/subdir）withoutベースタグ！画像のパスは、現在のパスを基準にしています。つまり、/subdir/some-routeでは、Webブラウザはサーバー上の/subdir/some-route/assets/duck.jpgで、ベースタグなしで検索されます。ベースタグを使用すると、任意のルートに移動できます。各画像のsrcパスは、現在のパスを無視し、ベースタグのhrefprop値から開始します。

scss（sass）ファイルにbackground-imageがある場合は、次のようにhtmlに移動することをお勧めします。

<section style={{backgroundImage: `url('assets/background-form.jpg')`}}>
 ...

私にとってのSassは、上記の相対パスでコンパイルしていませんでした。また、アセットフォルダー../../public/assets/background-form.jpgへの相対パスを作成することもできますが、ModuleScopePluginフォルダーの外部に相対パスをリンクすることを禁止する特別な制限srcのため、失敗します（ ここ を参照してください。

0
Ambroise Rabier