反応ルータのクリーンURLをIISに設定するにはどうすればよいですか？

Question

React-Routerは、ReactJSアプリが簡単なルーティングコンポーネントを介してSPAになることを可能にします。 IISにデプロイするときは、bashHistoryを使用してセットアップするとすべて正常に動作します。ただし、browserHistoryを使用しようとすると、IISはReact-Routerがルートを取得して解決できるようにする代わりに、ディレクトリを返そうとしています。 React-RouterをIIS環境で動作させるように設定するにはどうすればよいですか？

Answer 1

React-RouterをIISと連携させるための鍵は、URL書き換えルールをセットアップすることです。他のユーザーがIISでAngularJS SPAアプリケーションを設定している様子を見て、私は以下の解決策を考え出しました。ファイルされていないとディレクトリされていない任意のURLルートをキャッチするサーバー（開発・生産）

セットアップルール上

1. をダウンロードしてインストールしURL Rewrite。オプションで、定期的に配信する実際のディレクトリをすべて無効にすることができます。詳細情報は、お使いのベースのHTMLページ（index.htmlを）あなたのアプリケーションへhref属性を持つ<base/>タグを追加するには<?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <rewrite> <rules> <rule name="ReactRouter Routes" stopProcessing="true"> <match url=".*" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> <add input="{REQUEST_URI}" pattern="^/(docs)" negate="true" /> </conditions> <action type="Rewrite" url="index.html" /> </rule> </rules> </rewrite> </system.webServer> </configuration>

2. Microsoft's Documentationにここで見つけることができます。ただ、興味のある人のために、この答えに構築

   <base href='/path/to/my/app'/>

Answer 2

。あなたが私のようなもので、スクリプトを介してアプリを導入する必要がある場合。上記のWeb設定を作成するために必要なPowerShellスクリプトを以下に示します。

これは、サーバーにURL書き換えをインストールします。

#Install IIS UrlRewrite 
    If(Test-Path c:/msi) { 
    Invoke-WebRequest 'http://download.microsoft.com/download/C/F/F/CFF3A0B8-99D4-41A2-AE1A-496C08BEB904/WebPlatformInstaller_amd64_en-US.msi' -OutFile c:/msi/WebPlatformInstaller_amd64_en-US.msi 
    Start-Process 'c:/msi/WebPlatformInstaller_amd64_en-US.msi' '/qn' -PassThru | Wait-Process 
    cd 'C:/Program Files/Microsoft/Web Platform Installer'; .\WebpiCmd.exe /Install /Products:'UrlRewrite2,ARRv3_0' /AcceptEULA /Log:c:/msi/WebpiCmd.log 
    } 
    else { 
    New-Item c:/msi -ItemType Directory 
    Invoke-WebRequest 'http://download.microsoft.com/download/C/F/F/CFF3A0B8-99D4-41A2-AE1A-496C08BEB904/WebPlatformInstaller_amd64_en-US.msi' -OutFile c:/msi/WebPlatformInstaller_amd64_en-US.msi 
    Start-Process 'c:/msi/WebPlatformInstaller_amd64_en-US.msi' '/qn' -PassThru | Wait-Process 
    cd 'C:/Program Files/Microsoft/Web Platform Installer'; .\WebpiCmd.exe /Install /Products:'UrlRewrite2,ARRv3_0' /AcceptEULA /Log:c:/msi/WebpiCmd.log 
    } 

次に、ルールを追加する方法を示します。

Add-WebConfigurationProperty -pspath "$IISPath\MyWebsite" -filter "system.webServer/rewrite/rules" -name "." -value @{name='Home';stopProcessing='True'} 
Set-WebConfigurationProperty -pspath "$IISPath\MyWebsite" -filter "system.webServer/rewrite/rules/rule/match" -name "url" -value ".*" 

Add-WebConfiguration -pspath "$IISPath\MyWebsite" -filter "system.webServer/rewrite/rules/rule[@name='Home']/conditions" -value @{ input="{REQUEST_FILENAME}"; matchType="IsFile"; negate="true" } 
Add-WebConfiguration -pspath "$IISPath\MyWebsite" -filter "system.webServer/rewrite/rules/rule[@name='Home']/conditions" -value @{ input="{REQUEST_FILENAME}"; matchType="IsDirectory"; negate="true" } 
Add-WebConfiguration -pspath "$IISPath\MyWebsite" -filter "system.webServer/rewrite/rules/rule[@name='Home']/conditions" -value @{ input="{REQUEST_URI}"; pattern="^/(docs)"; negate="true" } 

Set-WebConfigurationProperty -pspath "$IISPath\MyWebsite" -filter "system.webServer/rewrite/rules/rule/action" -name "type" -value "Rewrite" 
Set-WebConfigurationProperty -pspath "$IISPath\MyWebsite" -filter "system.webServer/rewrite/rules/rule/action" -name "url" -value "index.html" 

これらのスクリプトは、PowershellのInvoke-Commandを使用してローカルまたはリモートで実行できます。

はまた、私はルータの警告とのindex.htmlに私のヘッダーにベースタグを使用してと反応していくつかの問題がありました。このリンクはかなり役に立ちます。

https://github.com/ReactTraining/react-router/issues/4006

私は基本的に私のバージョン3.xにパッケージと履歴パッケージルーター反応し、非推奨の警告を取り除くために、私のルータの設定を設定変更します。これは私の反応ルータです。

import { useRouterHistory } from 'react-router' 
import { createHistory } from 'history' 

const history = useRouterHistory(createHistory)({ 
basename: '/base-path' 
}) 

ReactDOM.render(
    <Router history={history}> 
....