nx 服务 2 个应用程序 - Javascript

nx 是一款帮助 JavaScript 开发人员构建现代 Web 应用程序的工具。它基于 Angular CLI 构建，同时提供了大量的插件和扩展，可以帮助你快速创建、测试和部署应用程序。

在本文中，我们将介绍如何使用 nx 服务 2 个应用程序。我们将使用一个 Angular 应用程序和一个 React 应用程序作为示例。

准备工作

在开始之前，请确保已经安装了 nx。如果您还没有安装，可以通过以下命令安装：

npm install -g nx

安装完成后，您需要创建一个新的 nx 项目。可以通过以下命令创建：

npx create-nx-workspace my-workspace --preset=empty

命令将创建一个名为 "my-workspace" 的空白工作区。在这个工作区中，我们将添加我们的应用程序。

创建 Angular 应用程序

首先，我们将创建一个 Angular 应用程序。可以通过以下命令创建：

nx generate @nrwl/angular:app my-angular-app

此命令将生成一个名为 “my-angular-app” 的 Angular 应用程序。我们可以通过以下命令启动应用程序：

nx serve my-angular-app

这将启动一个开发服务器，并在默认端口上运行应用程序。在浏览器中打开 http://localhost:4200，可以看到应用程序正在运行。

创建 React 应用程序

接下来，我们将创建一个 React 应用程序。可以通过以下命令创建：

nx generate @nrwl/react:app my-react-app

此命令将生成一个名为 "my-react-app" 的 React 应用程序。我们可以通过以下命令启动应用程序：

nx serve my-react-app

这将启动一个开发服务器，并在默认端口上运行应用程序。在浏览器中打开 http://localhost:4201，可以看到应用程序正在运行。

配置代理

现在，我们已经成功地启动了两个应用程序，但是我们如何让这两个应用程序可以相互交互呢？一种常见的方法是使用代理。代理可以将服务器请求转发到不同的 URL 或端口。

我们可以通过创建一个名为“proxy.conf.json”的文件来定义我们的代理规则。在这个文件中，我们可以定义一个将 http://localhost:4201/api 转发到 http://localhost:4200/api 的规则。

{
  "/api": {
    "target": "http://localhost:4200",
    "secure": false
  }
}

我们需要更新 Angular 应用程序的启动命令，以便它能够使用代理配置。请在 package.json 中添加以下命令：

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

现在，我们可以使用以下命令启动 Angular 应用程序：

npm run start:proxy my-angular-app

这将在使用代理配置的情况下启动 Angular 应用程序。现在，我们可以在 React 应用程序中使用以下代码发送请求：

fetch('/api/items')
  .then(response => response.json())
  .then(data => console.log(data));

这会在 Angular 应用程序中的 /api/items 端点上获取数据，并将其显示在控制台中。

结论

通过使用 nx，我们可以轻松地创建和管理多个应用程序，并使用代理配置使它们在同一服务器上运行，实现相互交互。这使得开发和测试多个应用程序变得更加容易和高效。