我如何在單個 Azure Web App 中托管 Express static 站點和 API

Question

我有一個我認為非常簡單的 Express 應用程序。 事實上，我在不到一個小時的時間內將其安裝並在我的筆記本電腦上運行。 它正在部署到 Azure Web 讓我抓狂的應用程序！

我有一個簡單/靜態的 web 應用程序，它也有自己的 API。因此，對 /website.com/api 的請求被處理為 API（基本上，轉發到不同的服務器以避免 CORS 問題），其他所有內容均由 static 提供場地面積。

這是整個 Express 應用程序：

 import express from 'express' import fetch from 'node-fetch' const app = express() const API_SERVER_URL = 'https://my-web-site.com/' app.listen(3000, () => console.log('Express listening at port 3000')) app.use(express.static('public')) app.use(express.json({ limit: '1mb' })) app.post('/api', async (request, response) => { const paramStrArr = request.originalUrl.split('?') const paramStr = paramStrArr.length > 1? '?' + paramStrArr[1]: '' const results = await fetch(API_SERVER_URL + paramStr, { method: 'POST', headers: { "Content-type": 'text/plain', "Cache-Control": "no-cache" }, body: JSON.stringify(request.body) }) const responseBody = await results.text() response.send(responseBody) }) app.get('/api', async (request, response) => { const paramStrArr = request.originalUrl.split('?') const paramStr = paramStrArr.length > 1? '?' + paramStrArr[1]: '' const results = await fetch(API_SERVER_URL + paramStr, { method: 'GET', headers: { "Content-type": 'application/json', "Cache-Control": "no-cache" } }) response.send(await results.text()) })

當我從本地主機運行時，這非常有效。 Static 內容呈現。 API 通話效果很好！

事實上，由於 Web 應用程序的 rest 基本上是公用文件夾中的 static 站點，這似乎是與此問題相關的唯一部分。 沒有安全感。 一點也不復雜……我是這么想的。

部署到 Azure Web 應用程序后，static 頁面加載並顯示良好（即 my-web-site.com/ 返回預期的 HTML 頁面）。 但是對 my-web-site.com/api/ 的任何 POST 或 GET 都會返回 404 錯誤。

我的猜測是 Azure 的服務器正在尋找 ./api/ 文件夾（和/或相應的 index.html），沒有找到並返回 404 - 而不是通過我的根 index.js 路由請求。

我找到了關於重定向的舊 Azure 文檔，但是這些說明已經過時並且似乎不適用於此處（即由於現在缺少選項等原因而無法遵循）。 我希望通過某種方式在控制台中執行此操作（即在 Web App settings/config.networking 中）； 但我什么也沒找到。

我嘗試創建一個 web.config 來重定向呼叫。 但如果這是解決方案，我做錯了什么。 我可以分享 - 如果需要 - 但我希望有人先驗證我是否朝着正確的方向前進。 我懷疑我遺漏了一些非常簡單的東西。

Answer 1

您可以將 static 中間件注冊更新為：

var path = require('path');


app.use('/static', express.static(path.join(__dirname, 'public')));

在這里，我們為 static 內容明確定義路由 /static（或您喜歡的任何名稱）。

有點奇怪，來自https://github.com/Azure-Samples/app-service-web-nodejs-get-started的工作示例對我來說很好用。