javascript - 如何在单个 Azure Web App 中托管 Express 静态站点和 API

Question

我有一个我认为非常简单的 Express 应用程序。事实上，我在不到一个小时的时间内就将其安装并在我的笔记本电脑上运行。它正在部署到 Azure Web App，这让我抓狂!

我有一个简单/静态的网络应用程序，它也有自己的 API。因此，对/website.com/api 的请求将作为 API 处理(基本上，转发到不同的服务器以避免 CORS 问题)，而其他所有内容都由静态站点区域提供。

这是整个 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())
})

当我从本地主机运行时，这非常有效。静态内容呈现。 API 调用效果很好!

事实上，由于 Web 应用程序的其余部分基本上是公共(public)文件夹中的静态站点，这似乎是与此问题相关的唯一部分。没有安全感。这一点也不复杂……至少我是这么认为的。

部署到 Azure Web App 后，静态页面加载并显示得很好(即 ​​my-web-site.com/返回预期的 HTML 页面)!但是任何对 my-web-site.com/api/的 POST 或 GET 操作都会返回 404 错误。

我的猜测是，Azure 的服务器正在寻找 ./api/文件夹(和/或相应的 index.html)，没有找到并返回 404 - 而不是通过我的根 index.js 路由请求。

我发现了有关重定向的旧 Azure 文档，但这些说明已过时，并且似乎不适用于此处(即，由于现在缺少选项等原因，实际上无法遵循)。我期望通过某种方式在控制台中执行此操作(即在 Web 应用程序设置/配置/网络中)；但我什么也没找到。

我尝试创建一个 web.config 来重定向调用。但如果这是解决方案，那么我做错了什么。如果需要的话，我可以分享这一点，但我希望有人首先验证我是否朝着正确的方向前进。我怀疑我错过了一些非常简单的东西。

Answer 1

您能否将静态中间件注册更新为:

var path = require('path');


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

在这里，我们为静态内容显式定义路由/static (或任何您喜欢的名称)。

这有点奇怪，来自https://github.com/Azure-Samples/app-service-web-nodejs-get-started的工作样本对我来说效果很好。