Azure Web App无法访问已部署HTML/JS文件问题咨询

完全可以将静态HTML+原生JS项目部署到Azure Web App（非Static Web App），你遇到的问题是因为Node.js运行时默认不会自动托管静态文件，需要做简单配置来解决。

解决步骤 #

方法一：用Express托管静态文件（推荐） #

Node.js运行时默认会寻找启动文件（如server.js），添加一个轻量的Express服务器就能帮你托管静态资源：

1. 在/home/site/wwwroot目录下创建server.js文件，内容如下：

const express = require('express');
const path = require('path');
const app = express();

// 托管当前目录下的所有静态文件
app.use(express.static(__dirname));

// 处理路由请求，优先匹配对应HTML文件，默认返回index.html
app.get('*', (req, res) => {
  const targetPath = path.join(__dirname, req.path);
  res.sendFile(targetPath, (err) => {
    if (err) res.sendFile(path.join(__dirname, 'index.html'));
  });
});

// 监听Azure分配的端口
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

2. 在同目录创建package.json，声明依赖和启动脚本：

{
  "name": "static-web-app",
  "version": "1.0.0",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.18.2"
  }
}

3. 将这两个文件上传到wwwroot目录，或通过VS Code重新部署包含这两个文件的build文件夹，之后重启Web App即可。

方法二：直接配置Web服务器（无需Node.js代码） #

如果不想用Express，可根据Web App的操作系统调整配置：

• Linux环境：
  创建.htaccess文件（适用于Apache环境），添加以下内容：

  DirectoryIndex index.html
  <FilesMatch "\.(html|js|css)$">
    Header set Content-Type "text/html; charset=UTF-8"
  </FilesMatch>
  

• Windows环境：
  创建web.config文件，配置IIS托管静态文件：

  <?xml version="1.0" encoding="UTF-8"?>
  <configuration>
    <system.webServer>
      <defaultDocument>
        <files>
          <add value="index.html" />
        </files>
      </defaultDocument>
      <staticContent>
        <mimeMap fileExtension=".html" mimeType="text/html" />
        <mimeMap fileExtension=".js" mimeType="application/javascript" />
        <mimeMap fileExtension=".css" mimeType="text/css" />
      </staticContent>
    </system.webServer>
  </configuration>
  

问题原因说明 #

• 访问/index.html提示Cannot GET /index.html：Node.js运行时默认把所有请求当作路由处理，没有配置静态文件托管时，无法识别静态文件请求，返回404。
• 发布模型设为“Code”完全支持静态文件，只是需要配置对应的托管规则，让服务器知道如何处理静态资源请求。

内容的提问来源于stack exchange，提问作者Jakub97