web-dev-qa-db-ja.com

create-react-app npm run buildコマンド

私は小さなReact）でアプリケーションを構築しましたcreate-react-app、それはローカルサーバーから正常に実行されますnpm startを実行した後、これまでのところOK。

ただし、npm run buildを実行すると、プロセスは正しく実行されるように見えます（バンドルされたjsファイルとindex.htmlファイルを含むビルドフォルダーが作成されます）が、ブラウザーでindex.htmlを開くと何もレンダリングされません。私は何が欠けていますか？

さておき：また、リモートサーバーにアップロードしようとしましたが、URLにアクセスするとブラウザが戻ってきました...

禁止：このサーバーにアクセスする権限がありません。

...誰かがこれを解決する方法を知っているなら、私もそれを感謝します。

reactjsbuildnpmcreate-react-app
18
Paulos3000

ただし、npm run buildを実行すると、プロセスは正しく実行されるように見えます（バンドルされたjsファイルとhtml.indexファイルを含むビルドフォルダーが作成されます）が、ブラウザーでindex.htmlを開くと何もレンダリングされません。私は何が欠けていますか？

npm run buildを実行すると、関連する指示が出力されます。

enter image description here

index.htmlを開くことはできません。これは静的ファイルサーバーで提供されるであるためです。
これは、ほとんどのReactアプリがクライアント側のルーティングを使用しており、file:// URLを使用してこれを行うことができないためです。

本番環境では、Nginx、Apache、Node（例：Express）、またはその他のサーバーを使用して静的アセットを提供できます。サイドルーティングでは、index.htmlだけでなく、/*などの未知のリクエストに対して/を提供します。

開発中、これにはpushstate-serverを使用できます。クライアント側のルーティングでうまく機能します。これは、印刷された指示書で行うべきことをまさに示しています。

また、リモートサーバーにアップロードしようとしましたが、URLにアクセスすると、ブラウザーはForbiddenで戻ってきました。このサーバーにアクセスする権限がありません。

buildフォルダー自体ではなく、buildフォルダーのコンテンツをアップロードする必要があります。そうしないと、サーバーはindex.html内にあるためbuild/index.htmlを見つけることができず、失敗します。サーバーがトップレベルindex.htmlを検出しない場合、デフォルトで提供されるファイルの設定に関するサーバーのドキュメントを参照してください。

20
Dan Abramov

ここでは、2つの可能な方法でこの問題を解決できます。

1.ルーティング履歴をbrowserHistoryではなく「hashHistory」に変更します

 <Router history={hashHistory} >
   <Route path="/home" component={Home} />
   <Route path="/aboutus" component={AboutUs} />
 </Router>

次のコマンドを使用してアプリをビルドします

Sudo npm run build

次に、ビルドフォルダーをvar/www /フォルダーに配置します。これで、各URLに＃タグを追加することで、アプリケーションは正常に動作します。のような

localhost /＃/ home localhost /＃/ aboutus

解決策2：browserHistoryを使用して＃タグがない場合、

ルーターに履歴= {browserHistory}を設定し、Sudo npm run buildを使用してビルドします。

404が見つからないページを解決するには、「conf」ファイルを作成する必要があります。confファイルは次のようになります。

ターミナルを開き、以下のコマンドを入力します

cd/etc/Apache2/sites-available ls nano sample.conf以下の内容を追加します。

 <VirtualHost *:80>
    ServerAdmin [email protected]
    ServerName 0.0.0.0
    ServerAlias 0.0.0.0
    DocumentRoot /var/www/html/

    ErrorLog ${Apache_LOG_DIR}/error.log
    CustomLog ${Apache_LOG_DIR}/access.log combined
    <Directory "/var/www/html/">
            Options Indexes FollowSymLinks
            AllowOverride all
            Require all granted
    </Directory>
</VirtualHost>

次のコマンドを使用して、sample.confファイルを有効にする必要があります。

cd /etc/Apache2/sites-available
Sudo a2ensite sample.conf

次に、SudoサービスApache2のリロードまたは再起動を使用して、Apacheサーバーをリロードするように求められます

次に、localhost/buildフォルダーを開き、以下の内容の.htaccessファイルを追加します。

   RewriteEngine On
   RewriteBase /
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteCond %{REQUEST_FILENAME} !-l
   RewriteRule ^.*$ / [L,QSA]

これでアプリは正常に動作しています。

注：0.0.0.0 ipをローカルIPアドレスに変更します。

他の人の役に立つことを願っています。

6
Venkatesh Somu

「Webサーバーfor Chrome」拡張機能は非常に使いやすいです。それをインストールし、ディレクトリを〜/ my-react-app/build /に設定します

2
blackops
  1. cdをビルドフォルダーに、
  2. python -m SimpleHTTPServer 8080ポート8080でサーバーを起動するには、
  3. アドレスに移動localhost:8080/index.htmlブラウザで。
2
Abdullah Malik

私は同じコマンドを実行しようとしましたが、反応するアプリも白い画面を表示していました。メインのjsファイルはファイルへの相対パスを取得し、新しいブラウザでjsファイルを開くとエラーが表示されました。「あなたのファイルが見つかりませんでした」.

1
Pawan Jasoria

index.htmlをクリックしてプロダクションビルドを実行することはできません。以下のようにスクリプトを変更する必要があります。

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "deploy": "serve -s build"
  }

npm run-script buildを実行した後、npm run-script deployを実行すると、このようなものが得られます。これは、本番ビルドをロードできる場所です。

npm install -gは、npm run-script deployを実行する前に機能します。

enter image description here

1
Viraj

https://www.taniarascia.com/getting-started-with-react/ および最終スクリプトはGitHubにあります。

npm run build->は、index.htmlと静的フォルダーを含むフォルダービルドを作成します。 index.htmlをクリックするだけで、新しいブラウザのタブで開きます。ただし、空白ページのみが表示されます。どうして？動作させるにはサーバーが必要だからです。

解決策：

ファイルを他のフォルダーに移動します。 VC Code。index.htmlを開き、右クリック-> select：ライブサーバーで開く。関連するIPアドレスとポートを使用してブラウザーで新しいタブを開きます。

または、xamppを使用してlocalhostで実行できます。

XAMPPサーバーを開きます。ローカルホストに配置します。そして、それは機能しなければなりません。

0
Sulung Nugroho

create-react-appでアプリケーションをビルドした後 create-react-app

コマンドを実行npm run buildその後、コマンドを実行npm install -g serve＆最後にserve -s build

より詳細な情報は、ここから見つけることができます create-react-app-deployment

0
Anurag Tomar

index.htmlファイルを開きます。端近くまでスクロールすると、表示されます

<script src="/static/js/2.b5125f99.chunk.js"></script><script src="/static/js/main.fcdfb32d.chunk.js"></script></body></html>

2つのsrc属性の前にドットを追加するだけです：

<script src="./static/js/2.b5125f99.chunk.js"></script><script src="./static/js/main.fcdfb32d.chunk.js"></script></body></html>

また、スタイルがある場合は、表示される最初の近くでスクロールする必要があります。

<link href="/static/css/main.1eabf3ab.chunk.css" rel="stylesheet">

また、href属性の前にドットを配置します

<link href="./static/css/main.1eabf3ab.chunk.css" rel="stylesheet">

注：ファイル名は同じである場合とそうでない場合があります

また、サーバーを使用しているときにこれを元に戻すか、npm run buildを再度実行してください（あなたがしないとどうなるかわかりません）

0
kyle belle