如何使用 azure + IISNode + express 為 React 應用程序構建 web.config

Question

我按照本教程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>

Answer 1

您可以嘗試添加

<globalModules>
<add name="iisnode" image="<path-to-iisnode.dll>" />
</globalModules>