create-react-appを使用してAzureにデプロイする

debugcn 投稿 Dev

FacundoGFlores

Reactアプリの開発にcreate-react-appを使用しています。次に、バンドルをクラウドに公開したいと思います。だから私はしました：

npm run build

buildリポジトリを初期化するフォルダが作成されました。

git init

その後、原点を追加しました

git remote add origin https://mysiteonazure.com/app.git

最終的にファイルをコミットしてプッシュしました。だから私は自分のアプリを見ることができました。URLを使用してナビゲートしたいときに問題が発生したため、次の場所に移動します。

http://mysiteonazure.com/login

動作しませんでした。

そこで、次の記事にたどり着きました。MicrosoftAzureへのcreate-react-appのデプロイ

だから私のビルドは：

build-azure
|_.git
|_static
|_asset-manifest-json
|_favicon.ico
|_index.html

そして今、私は追加しました web.config

build-azure
|_.git
|_static
|_asset-manifest-json
|_favicon.ico
|_index.html
|_web.config

と：

<?xml version=”1.0"?>
<configuration>
 <system.webServer>
 <rewrite>
 <rules>
 <rule name=”React 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=”^/(api)” negate=”true” />
 </conditions>
 <action type=”Rewrite” url=”/” />
 </rule>
 </rules>
 </rewrite>
 </system.webServer>
</configuration>

しかし、メインページに移動すると、次のようhttp://mypage.azurewebsite.netになります。

内部サーバーエラーが発生したため、ページを表示できません。

どうすればこの問題を解決できますか？または、アプリを正しく公開するにはどうすればよいですか？

FacundoGFlores

詳細な情報を考えると、問題は引用符でしweb.configた。指定されたソースからをコピーしましたが、他の引用符が含まれていたため、実際web.configは次のようになります。

<?xml version="1.0"?>
<configuration>
 <system.webServer>
 <rewrite>
 <rules>
 <rule name="React 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="^/(api)" negate="true" />
 </conditions>
 <action type="Rewrite" url="/" />
 </rule>
 </rules>
 </rewrite>
 </system.webServer>
</configuration>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]