web-dev-qa-db-ja.com

Reactルート用にApacheサーバーをセットアップする方法は？

ローカル開発サーバーで素晴らしいアプリを実行していますが、本番環境対応ファイルをApacheのhtdocsディレクトリに直接ダンプしても機能しませんでした。

ここに私が持っているものがあります：

/var/www/index.html
/var/www/bundle.js

そして、私が持っています

DocumentRoot /var/www

/etc/Apache2/sites-available/000-default.conf

事実は
1）。アクセスすると http：//...com/ ログインページに移動します
2）。リンクをクリックした後

<Link to="main"><button>Log In</button></Link>

ブラウザの場所フィールドのコンテンツは次のようになります。

http://...com/main

3）。このURL（ http：//...com/main ）をリロードすると、

The requested URL /main was not found on this server

Reactでのぼうぼう：

    <Router history={browserHistory }>
      <Route path="/" component={TopContainer}>
          <IndexRoute component={Login} />
          <Route path='main' component={MainContainer} />   
      </Route>
</Router>

Apache構成で他に何が欠けていますか？

ありがとう

apachereactjswebpack
23
Mark Qian

VirtualHost設定を変更します（通常、/etc/httpd/conf.d\vhosts.conf）次のRewrite *行を追加します。

<VirtualHost *:8080>
  ServerName example.com
  DocumentRoot /var/www/httpd/example.com

  <Directory "/var/www/httpd/example.com">
    ...

    RewriteEngine on
    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]
    # Rewrite everything else to index.html to allow html5 state links
    RewriteRule ^ index.html [L]
  </Directory>
</VirtualHost>

これは、存在するファイルを提供するようにApacheに指示しますが、存在しない場合は、/index.htmlではなく404: not found。

ここから完全に盗まれた完全な回答

33
Hinrich

上記の解決策はbuntでも機能しますが、少し苦労したので、これを機能させるために必要な手順を次に示します。

上記の構成を配置する必要があるファイルの場所は、

/etc/Apache2/sites-enabled

デフォルトは

/etc/Apache2/sites-enabled/000-default.conf

次に、RewriteEngineが実行されていることを確認する必要があります（そうしないと、Apacheサーバーを再起動するとエラーが発生します）。

Sudo a2enmod rewrite

最後に、Apacheサーバーを再起動します

Sudo /etc/init.d/Apache2 restart

今、それはうまくいくはずです。

デフォルトの構成を使用している場合（Webサイトのルートは/var/www/htmlの下にあります）、配置するだけです。

<Directory "/var/www/html">
    RewriteEngine on
    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]
    # Rewrite everything else to index.html to allow html5 state links
    RewriteRule ^ index.html [L]
</Directory>

上記の<VirtualHost ...>の下のファイルに

9
Matus Dubrava

このリンクのようです（ https://gkedge.gitbooks.io/react-router-in-the-real/content/Apache.html ）は、必要なものだけです...

この設定は、SPAに役立ちます。

これは、存在するファイルを提供するようにApacheに指示しますが、それらが存在しない場合は、404ではなく/index.htmlを提供するだけです：見つかりません

あなたの問題が解決することを願っています！

7
Franck Wlodarezack

.htaccessとサブディレクトリを使用する必要がある場合は、次のようにしてください。

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
2
Ali Nouman

これまでに投稿された解決策はどれも、欠落しているリソースが404ではなく誤って200を返すという問題に対処しているように見えません。

私の解決策は、ブラウザがページに移動するときにHTMLを要求する（Firefoxは_text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8_を要求する）が、最初のロード（JSファイルがインポートされた） _<script>_を介して、またはES6モジュールが_*/*_を要求すると、CSSファイルは_text/css,*/*;q=0.1_を要求し、fetch() AP​​Iを介してJSONにアクセスすると_application/json, text/plain, */*_が指定されます。 ）。その仮定に依存することにより、存在しないファイル（シングルページアプリ内でのみ機能するルートなど）にアクセスしようとするときに、SPAが名前が変更されたCSSファイル、またはJSONファイルがありません。

EDIT：MDNには一般的な値のリストがあります Acceptヘッダー。

_<Directory  "/var/www/httpd/example.com">
    RewriteEngine on

    # Browsers will specifically ask for HTML (among other things) on initial page load
    # That is, if the *user* tries to access a *nonexisting* URL, the app is loaded instead
    # but if a webpage attempts to load a missing resource it will return 404.
    # (You can still go to /myreactapp/favicon.ico, but a missing /myreactapp/favicon.png resource won't return 200)

    # if (HTTP_ACCESS.contains('text/html') && file_not_exists(REQUEST_FILENAME))
    RewriteCond %{HTTP_ACCEPT} text/html
    RewriteCond %{REQUEST_FILENAME} !-f
        RewriteRule ^ index.html [last]

    # Any ressources loaded by index.html should behave correctly (i.e: Return 404 if missing)
    RewriteRule ^ - [last]

    AllowOverride None
    Options FollowSymLinks Multiviews 
    Require all granted
</Directory>
_
2
VLRoyrenn

私にとってうまくいったことは、ここで答えとコメントの多くを反映しています：

  1. Sudo a2enmod rewrite
  2. /etc/Apache2/Apache2.conf
  3. これを貼り付けます：
<Directory "/var/www/<PATH_TO_YOUR_ROOT>">
    RewriteEngine on
    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]
    # Rewrite everything else to index.html to allow html5 state links
    RewriteRule ^ index.html [L]
</Directory>
  1. Sudo service Apache2 restart

以前の回答が示唆したように、サイト固有のconfファイルへの貼り付けは機能しませんでした。

1
Lawrence Witt

このディレクトリに行きます

  1. / etc/Apache2/sites-available

  2. ファイルを開く：000-default.conf

  3. その許可を変更する：777

  4. ファイルの下部にコードを貼り付けます

RewriteEngine on 

# Don't rewrite files or directories 

RewriteCond %{REQUEST_FILENAME} -f [OR] 

RewriteCond %{REQUEST_FILENAME} -d 

RewriteRule ^ - [L] 

# Rewrite everything else to index.html to allow html5 state links 

RewriteRule ^ index.html [L]
  1. サーバーを再起動します
0
Ashish Kumar Mishra