[英]How To Build a web.config for a react app using azure + IISNode + express
我按照本教程https://daveceddia.com/create-react-app-express-backend/和https://daveceddia.com/deploy-react-express-app-heroku/构建了我的反应应用程序。 我知道我不会发布到 Heroku,因为我使用的是 azure Web 应用程序服务,但由于我的项目结构,我使用代理同时托管后端和前端。 当我在 localhost 上运行我的应用程序时,一切正常,我的反应路由工作正常,所以我知道这不是我的代码的问题。 我检查了我的日志并且我的请求到达了正确的端点,但是,由于 403、500 和 404,我的前端都没有呈现。 我已将其指向我的 web.config 文件,但我不知道它应该是什么样子。 关于我要渲染的文件的一些信息在这里
继承人 github repo 以及 incase 这可以帮助https://github.com/ecoulson/OverlakeASB
index.html 的路径:/client/public/index.html
前端路径:/client
这是我的 package.json
{
"name": "overlakeasb",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node server.js 3001",
"heroku-postbuild": "cd client && npm install && npm run build",
"postinstall": "cd client && npm install && npm run build"
},
"engines": {
"node": "8.11.1",
"npm": "5.6.0"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.0-14",
"@fortawesome/free-brands-svg-icons": "^5.1.0-11",
"@fortawesome/free-regular-svg-icons": "^5.1.0-11",
"@fortawesome/free-solid-svg-icons": "^5.2.0",
"@fortawesome/react-fontawesome": "0.1.0-11",
"azure-keyvault": "^3.0.4",
"cookie-parser": "~1.4.3",
"debug": "~2.6.9",
"easy-rbac": "^3.1.0",
"easy-session": "^2.0.1",
"express": "~4.16.0",
"express-session": "^1.15.6",
"http-errors": "~1.6.2",
"i": "^0.3.6",
"jade": "~1.11.0",
"jquery": "^3.3.1",
"moment": "^2.22.2",
"morgan": "~1.9.0",
"mssql-connection-string": "^0.1.0",
"mysql": "github:mysqljs/mysql",
"node-fetch": "^2.2.0",
"npm": "^6.2.0",
"q": "^1.5.1",
"rc-dropdown": "^2.2.0",
"rc-menu": "^7.2.6",
"react": "^16.4.2",
"react-addons-css-transition-group": "^15.6.2",
"react-animate-height": "^2.0.3",
"react-contextmenu": "^2.9.3",
"react-dom": "^16.4.2",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-transition": "^1.2.1",
"react-select": "^2.0.0",
"react-tooltip": "^3.6.1",
"tedious": "^2.6.3",
"tedious-connection-pool": "^1.0.5"
}
}
这是我现在的 web.config
<configuration>
<system.webServer>
<webSocket enabled="false" />
<handlers>
<!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
<add name="iisnode" path="server.js" verb="*" modules="iisnode"/>
</handlers>
<defaultDocument enabled="true">
<files>
<add value="/client/public/index.html" />
</files>
</defaultDocument>
<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="/client/public/index.html" />
</rule>
</rules>
</rewrite>
<tracing>
<traceFailedRequests>
<add path="*">
<traceAreas>
<add provider="WWW Server" areas="Security" verbosity="Verbose" />
</traceAreas>
<failureDefinitions statusCodes="404.2" />
</add>
</traceFailedRequests>
</tracing>
</system.webServer>
<system.applicationHost>
<traceFailedRequestsLogging enabled="true" />
</system.applicationHost>
</configuration>
您可以尝试添加
<globalModules>
<add name="iisnode" image="<path-to-iisnode.dll>" />
</globalModules>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.