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

Question

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

\n\n

npm run build\n

\n\n

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

\n\n

git init\n

\n\n

然后添加原点

\n\n

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

\n\n

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

\n\n

http://mysiteonazure.com/login\n

\n\n

不工作。

\n\n

所以我来到了下面的文章在 Microsoft Azure 上部署 create-react-app

\n\n

所以我的构建有：

\n\n

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

\n\n

现在我添加了web.config

\n\n

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

\n\n

和：

\n\n

<?xml version=\xe2\x80\x9d1.0"?>\n<configuration>\n <system.webServer>\n <rewrite>\n <rules>\n <rule name=\xe2\x80\x9dReact Routes\xe2\x80\x9d stopProcessing=\xe2\x80\x9dtrue\xe2\x80\x9d>\n <match url=\xe2\x80\x9d.*\xe2\x80\x9d />\n <conditions logicalGrouping=\xe2\x80\x9dMatchAll\xe2\x80\x9d>\n <add input=\xe2\x80\x9d{REQUEST_FILENAME}\xe2\x80\x9d matchType=\xe2\x80\x9dIsFile\xe2\x80\x9d negate=\xe2\x80\x9dtrue\xe2\x80\x9d />\n <add input=\xe2\x80\x9d{REQUEST_FILENAME}\xe2\x80\x9d matchType=\xe2\x80\x9dIsDirectory\xe2\x80\x9d negate=\xe2\x80\x9dtrue\xe2\x80\x9d />\n <add input=\xe2\x80\x9d{REQUEST_URI}\xe2\x80\x9d pattern=\xe2\x80\x9d^/(api)\xe2\x80\x9d negate=\xe2\x80\x9dtrue\xe2\x80\x9d />\n </conditions>\n <action type=\xe2\x80\x9dRewrite\xe2\x80\x9d url=\xe2\x80\x9d/\xe2\x80\x9d />\n </rule>\n </rules>\n </rewrite>\n </system.webServer>\n</configuration>\n

\n\n

但现在当我进入主页时：http://mypage.azurewebsite.net我得到：

\n\n

\n

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

\n

\n\n

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

\n

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>