javascript - Azure:将前端 (React) 连接/代理到后端 (Express/node.js)

Question

我目前正在尝试将前端 (React) 连接到 Azure 应用服务中的后端 (Express/nodejs)。我使用的是 Windows，因为“虚拟应用程序和目录”目前不适用于 Linux。然而，根据我的研究，在这种情况下这是必要的。

后端示例:server.js

const express = require('express');
const app = express();
const port = 3003;
require("dotenv").config(); // For process.env

[...]

app.get("/api/getBooks", async (req, res) => {
    const books = await Books.find();
    res.send(books);
});

前端示例:App.js

  const getBooks = () => {
    axios.get('/api/getBooks')
      .then(res => {
        setBooks(res.data);
        console.log("Got books: ")
        console.log(res.data);
      })
      .catch(err => {
        console.log(err);
      })
  }

Azure:文件夹结构

site/server/server.js (Express)
site/wwwroot/index.html (React)

我通过“开发工具/控制台”成功执行了“npm install”。

两者已使用以下配置通过 Azure 中的虚拟应用程序进行连接。

Virtual applications

应用程序通常会成功加载。但是，与后端的连接无法正常工作。

如何在 Azure 上启动 Node.js 服务器并使代理正常工作？

我尝试通过控制台上的“Node 服务器”启动服务器。但这似乎不起作用。

Answer 1

我发现了两种可能的方法来解决这个问题。

假设您有一个客户端 (client/App.js) 和一个服务器 (server/server.js)。

通过node.js/Express 为React 应用程序提供服务

基于上面的架构，这里需要稍微改变一下结构。因为React应用程序不再通过自己的服务器输出，而是直接通过Express输出。

在server/server.js中，声明express后必须调用以下函数。

app.use(express.static("../client/build"));

定义 API 的一些端点后，最后定义的 API Node 是默认路由 - React 构建的静态输出。

app.get("/", (res) => {
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
});

使用 FTP 客户端，您现在可以创建 /client/build 目录，其中将包含构建的 React 应用程序。当然，也可以使用其他目录结构。

然后将构建的 React 应用程序中的客户端文件上传到那里。

最好通过 Visual Studio Code 和 Azure 插件从服务器进行部署。

在上述结构中，/server 将部署到您的 Azure 扩展中(Azure/App Services --> 右键单击​​“myapp” --> 部署到 Web应用程序...)

创建两个应用服务

例如:myapp.azurewebsites.net 和 myapp-api.azurewebsites.net

myapp 必须仅包含 wwwroot 目录中构建的 React 应用程序 (/build)。这可以通过 FTP 来实现。

从/server 到 *myapp-api 的部署最好通过 Visual Studio Code 和 Azure 插件完成。

在上述结构中，/server 将部署到 Azure 扩展中的 myapp-api(Azure/App Services --> 右键单击​​“myapp-api”--> 部署到 Web 应用程序...)

还值得一提的是，应配置CORS，以便只能从myapp.azurewebsites.net进行API调用。这可以在 Azure 门户中进行配置。

<小时/>

有时，必须随后通过 Azure 门户中的 SSH 控制台安装 Node 依赖项。对我来说，它有时会自动起作用，有时则不会。

为此，只需更改到(/server 的)wwwroot 目录并执行以下命令。

npm cache clean --force && npm install

将其与 React Router 结合

React Router 通常与 React 一起使用。这可以轻松地与 Express 的静态服务 Web 应用程序结合起来。

https://create-react-app.dev/docs/deployment/#other-solutions

Excerpt

How to handle React Router with Node Express routing

https://dev.to/nburgess/creating-a-react-app-with-react-router-and-an-express-backend-33l3