角度服务于不同的端口 - Javascript

在现代web应用程序中，经常需要同时使用多个端口来提供服务。Angular是一种流行的Javascript框架，可以用于构建单页应用程序（SPA），提供可扩展的架构和易于维护的代码。在本文中，我们将探讨如何使用Angular来服务于不同的端口。

服务端

Angular应用程序本质上是静态的，需要由web服务器来提供服务。在本文中，我们将使用Node.js和Express.js作为我们的服务器端。我们创建一个简单的Express.js服务器，并为其添加一个静态资源目录，以托管我们的Angular应用程序。

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

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

app.listen(3000, () => {
  console.log('Server started on port 3000!');
});

在Express.js服务器中，我们使用express.static()中间件来添加一个静态资源目录。__dirname是当前文件的绝对路径。我们还使用listen()方法来启动服务器并指定端口号。在本例中，我们使用3000作为我们的端口号。

客户端

Angular应用程序需要运行在Web浏览器中。当我们访问浏览器时，我们需要指定我们的Angular应用程序所在的端口号。在本文中，我们将使用Angular CLI来创建我们的Angular应用程序。

我们首先需要安装Node.js和Angular CLI。然后在终端上运行以下命令：

ng new my-app

这会创建一个新的Angular应用程序，并为其生成一些基本文件。我们需要运行以下命令来构建并打包我们的Angular应用程序：

ng build

这将生成一个dist目录，其中包含我们的Angular应用程序的所有静态文件。

服务于多个端口

现在，我们已经准备好了服务于多个端口。我们想要使用一个端口号来提供我们的Angular应用程序，而使用另一个端口号来提供我们的API。

我们需要使用Angular CLI的proxy配置来配置我们的Angular应用程序。在我们的Angular应用程序的根目录下，我们需要创建一个名为proxy.conf.json的新文件，其中包含以下内容：

{
  "/api/*": {
    "target": "http://localhost:3001",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

这会将我们的API请求发送到我们的后端服务器上的端口3001。

我们还需要更改我们的Angular应用程序的package.json文件中的start命令，以在端口号4200上启动代理。我们将这样做，以便代理可以处理由Angular应用程序发出的所有API请求。

"start": "ng serve --proxy-config proxy.conf.json"

现在，我们可以使用以下命令来启动我们的Express.js服务器：

node server.js

这会在端口号3000上启动我们的Express应用程序。我们可以使用以下命令来启动我们的Angular应用程序：

npm start

这将在端口号4200上启动我们的Angular应用程序，并使用我们的代理配置将所有API请求传递给我们的Express.js应用程序。现在，我们可以在浏览器中访问我们的Angular应用程序，并使用API请求访问我们的后端服务器。

结论

在本文中，我们探讨了如何使用Angular和Express.js服务于不同的端口。我们看到了如何在服务器端使用Express.js，并在客户端使用Angular CLI创建我们的应用程序。通过代理配置，我们能够将API请求从我们的Angular应用程序传递到我们的Express.js服务器。最终，我们现在可以同时服务于多个端口，以提供在web应用程序中经常需要的功能。