Question

我正在使用create-react-app开发我的React应用程序。现在我想在云上发布捆绑包。所以我做了：

npm run build

它创建了一个build文件夹，我在其中初始化了一个仓库：

git init

然后添加了原点

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

最终提交并推送文件。所以我能够查看我的应用程序。当我想使用URL导航时出现问题，所以转到：

http://mysiteonazure.com/login

没用。

所以我来到下面的文章Deploying create-react-app on Microsoft Azure

所以我的构建有：

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我得到了：

由于内部服务器错误，页面无法显示发生。

我该如何解决这个问题？或者，我该如何正确发布我的应用程序？

Answer 1

鉴于详细信息，问题是引号，我复制了来自给定来源的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>

使用create-react-app在azure上进行部署

1 个答案: