web-dev-qa-db-ja.com

カスタムPUBLIC_URLでcreate-react-appプロジェクトをビルドできません

私はしようとしています

PUBLIC_URL=http://xxxx.com npm run build

最新のcreate-react-scriptを使用してビルドされたプロジェクトで。

ただし、%PUBLIC_URL%内のpublic/index.htmlの出現は、期待値PUBLIC_URLではなく、空の文字列に置き換えられます。

public/index.htmlには次のようなコードが含まれます

<script src="%PUBLIC_URL%/static/js/jarvis.widget.min.js"></script>

インターネット検索とスタックオーバーフローの時間は、PUBLIC_URLについてほとんど書かれていないことを示しています。 GitHubからcreate-react-appを複製し、コードを閲覧していますが、まだ啓発されていません。

誰が私が間違っているのかについての提案はありますか？

javascriptreactjscreate-react-app
37
Gulliver Smith

他の回答がうまく機能しない場合は、package.jsonにhomepageフィールドもあります。 npm run buildを実行すると、次のようなメッセージが表示されます。

The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

package.jsonのルートフィールドの1つとして追加するだけです。

{
  // ...
  "scripts": {
    // ...
  },
  "homepage": "https://example.com"
}

homepageまたはPUBLIC_URLで正常に設定されると、代わりに次のようなメッセージが表示されます。

The project was built assuming it is hosted at https://example.com.
You can control this with the homepage field in your package.json.
28
redbmk

これはPUBLIC_URL変数の使用方法ではありません。 ドキュメント に従って、HTMLでPUBLIC_URLを使用できます。

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

またはJavaScriptで：

render() {
  // Note: this is an escape hatch and should be used sparingly!
  // Normally we recommend using `import` for getting asset URLs
  // as described in “Adding Images and Fonts” above this section.
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

PUBLIC_URLは、選択した値に設定するものではなく、Webpackのビルドシステム外のデプロイメントにファイルを保存する方法です。

これを表示するには、CRAアプリを実行して、これをsrc/index.jsファイルに追加します。

console.log('public url: ', process.env.PUBLIC_URL)

URLが既に存在することがわかります。

詳細は CRA docs をご覧ください。

12
Toby

ビルドで次のようなものを探している私のような人々：

<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">

https://dsomething.cloudfront.netでpackage.jsonをhomepageに設定しても機能しません。

1.クイックソリューション

次のようにプロジェクトをビルドします。
（windows）

set PUBLIC_URL=https://dsomething.cloudfront.net&&npm run build`

（Linux）

PUBLIC_URL=https://dsomething.cloudfront.net npm run build

（マック）
- わからない -

そして、あなたは得るでしょう

<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">

あなたの構築されたindex.htmlで

2.永続的かつ推奨されるソリューション

プロジェクトのルート（package.jsonがある場所）に.envというファイルを作成します。
このファイルに次のように記述します（URLの前後に引用符はありません）：

PUBLIC_URL=https://dsomething.cloudfront.net

通常どおりプロジェクトをビルドします（npm run build）
これにより、index.htmlも生成されます。

<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">

3.奇妙な解決策

これをpackage.jsonに追加します
"homepage"： " http：//：//dsomething.cloudfront.net "、

次に、index.htmlが生成されます：

<script type="text/javascript" src="//dsomething.cloudfront.net/static/js/main.ec7f8972.js">

これは基本的に次と同じです：

<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">

私の理解で。

Githubの問題Githubのコメント

7
Vaibhav Vishal

ドキュメント をご覧ください。 PUBLIC_URLを取得する.envファイルを持つことができます

あなたはそれが何のために使われたことを覚えておくべきですが-

この変数を使用して、指定したURL（ホスト名を含む）に対してアセットを逐語的に参照させることができます。これは、CDNを使用してアプリケーションをホストする場合に特に便利です。

6
Dave

実際、環境変数の設定方法はオペレーティングシステムによって異なります。

Windows（cmd.exe）

set PUBLIC_URL=http://xxxx.com&&npm start

（注：空白の欠如は意図的なものです。）

Linux、macOS（Bash）

 PUBLIC_URL=http://xxxx.com npm start

推奨： cross-env

{
  "scripts": {
    "build": "cross-env PUBLIC_URL=http://xxxx.com npm start"
  }
}

参照： create-react-app/README.md＃adding-temporary-environment-variables-in-your-Shell in master・facebookincubator/create-react-app

5
JimmyLv

あなたが間違っているのは、PUBLIC_URLとprocess.env.PUBLIC_URLが同じ値を持つことを期待することです。

create-react-appには2つの異なるPUBLIC_URLがあります。

  1. プロセス環境またはpackage.jsonホームページにあるもの。
  2. ノードprocess.envにあるもの。

プロセス環境PUBLIC_URLは、package.jsonホームページをオーバーライドします。スキーム、ホスト、パスを含む完全なURLにすることができます。ホストを使用して、正しい展開手順を示します。

Process.env.PUBLIC_URLは、プロセス環境PUBLIC_URLまたはホームページからのパスのみです。

したがって、実行すると

PUBLIC_URL=http://example.com npm run build

Reactには、

process.env.PUBLIC_URL === ''

あなたが持っていた場合

PUBLIC_URL=http://example.com/foo npm run build

Reactには

process.env.PUBLIC_URL === '/foo'
4
Marko Kohtala

設定できない理由がわかりません。 source では、PUBLIC_URLはhomepageよりも優先されます

const envPublicUrl = process.env.PUBLIC_URL;
...
const getPublicUrl = appPackageJson =>
  envPublicUrl || require(appPackageJson).homepage;

コードにブレークポイントを設定して、環境変数をオーバーライドしているロジックを確認してください。

0
dosentmatter

この問題は、githubページで反応アプリをホストしようとすると明らかになります。

これを修正した方法、

app.tsxというメインアプリケーションファイルで、ルーターを含めます。ベース名を設定します。たとえば、<BrowserRouter basename="/Seans-TypeScript-ReactJS-Redux-Boilerplate/">

相対URLであることに注意してください。これにより、ローカルで実行され、ホストされる機能が完全に簡素化されます。 basename値は、GitHubのリポジトリタイトルと一致します。これは、GitHubページが自動作成するパスです。

それが私がする必要があるすべてです。

GitHubページでホストされている作業例を参照してください

https://sean-bradley.github.io/Seans-TypeScript-ReactJS-Redux-Boilerplate/

0
Sean Bradley

ここに記載 create-react-appはREACT_APP_で始まる環境変数のみをインポートするため、PUBLIC_URLは@redbmkで述べたように、homepagepackage.jsonファイルの設定。

0
TobyG