如何在 IIS 上部署 Angular 和 Node.js 应用程序

Question

我有 Angular 17 项目，以 .Net core 作为后端

我在 Angular 项目中添加了 Node.js 作为后端

在我的本地主机上完美工作，但在生产中无法正常工作，我收到“方法不允许”

服务器.js

const express = require("express");
const multer = require("multer");
const path = require("path");
const cors = require("cors");

const app = express();
const PORT = 4000;

app.use(cors());

const storage = multer.diskStorage({
    destination: function(req, file, cb) {
        cb(null, "../src/assets/Folder/");
    },
    filename: function(req, file, cb) {
        cb(
            null,
            file.fieldname + "-" + Date.now() + path.extname(file.originalname)
        );
    },
});
const fileFilter = (req, file, cb) => {
    // Check if file is an image or video
    if (
        file.mimetype.startsWith("image/") ||
        file.mimetype.startsWith("video/")
    ) {
        cb(null, true);
    } else {
        cb(new Error("Only image and video files are allowed"));
    }
};

const upload = multer({
    storage: storage,
    fileFilter: fileFilter,
    limits: { fileSize: 2000000 },
});

app.post("/upload", upload.single("file"), (req, res) => {
    if (!req.file) {
        return res.status(400).json({ message: "No file uploaded" });
    }
    res.status(200).json({
        message: "File uploaded successfully",
        filename: req.file.filename,
    });
});

app.use("uploads", express.static("uploads"));

// Error handling middleware
app.use((err, req, res, next) => {
    if (err instanceof multer.MulterError) {
        // Multer error occurred (e.g., file size exceeded)
        return res.status(400).json({ message: err.message });
    } else if (err) {
        // Other errors (e.g., unsupported file type)
        return res.status(400).json({ message: err.message });
    }
    next();
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

proxy.config.json

{
    "/api/**": {
        "target": "http://demo.example.com",
        "secure": false,
        "changeOrigin": true,
        "pathRewrite": {
            "^/api": ""
        }
    }
}

网络配置

<?xml version="1.0" encoding="utf-8"?>
<configuration>

<system.webServer>
  <rewrite>
    <rules>
 <rule name="Angular 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="^.*/admmmin" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
      </rule>

           <rule name="redirect1" stopProcessing="true">
                        <match url="^(.*)Admin" />
                 
                    <conditions logicalGrouping="MatchAny">
                        <add input="{HTTP_HOST}{REQUEST_URI}" pattern="(.*)/admin/(.*)" />
                    </conditions>
                    
                </rule>
    </rules>
  </rewrite>
</system.webServer>

</configuration>

那么如何解决呢？ 可以将其发布到 dist 文件夹然后将其作为 Angular 上传吗？

Answer 1

Angular 17 在

browser

子文件夹中生成其构建版本，除了添加一个将文件向上移动一级的命令之外，没有办法解决这个问题。然而，这个 web.config 应该能够将所有请求重新路由到 index.html

<?xml version="1.0" encoding="utf-8"?>
<configuration>

<system.webServer>
  <rewrite>
    <rules>
      <rule name="Browser subfolder" stopProcessing="false">
        <match url="(.*)" />
        <conditions logicalGrouping="MatchAny">
          <add input="{REQUEST_FILENAME}" pattern="^browser/" negate="true" />
        </conditions>
        <action type="Rewrite" url="/browser/{R:1}" />
      </rule>
      
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="./browser/index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

</configuration>