如何在同一端口 4200 上运行 angular 4 app 和 nodejs api 用于生产和开发？

Posted 2023-02-23

【中文标题】如何在同一端口 4200 上运行 angular 4 app 和 nodejs api 用于生产和开发？

【英文标题】：how to run angular 4 app and nodejs api on same port 4200 for both production and development?

【发布时间】：2018-02-21 16:37:06

【问题描述】：

我创建了 Angular 4 应用程序，我可以使用 ng serve --open 运行它，它在 localhost:4200 上运行， 我想要的是我还在同一个角度项目中使用nodejs 创建了 api，现在我想在localhost:4200/api 运行该 API，所以我尝试了这样的事情

我的 angular 4 和 nodejs 结构看起来像这样

/dist
/server
  /routes
  /server
/src
app.js
package.json

在我使用的 app.js 中

app.use(express.static(path.join(__dirname, 'dist')));
app.use('/app/api', apiRoutes);
const port = process.env.PORT || '3000';
server.listen(port, () => console.log(`API running on localhost:$port`));

一旦我使用nodemon app.js 运行并转到localhost:3000，它就会运行我的 Angular 应用程序，它很好，而我在 localhost:3000/app/api 运行它也可以正常工作，

但是当我在 Angular 应用程序中进行更改时，它不会自动刷新我的应用程序，因为它当前正在运行节点应用程序以进行刷新，我需要运行 ng build 并且它会影响我对 Angular 应用程序的新更改

所以，我想要的是运行ng serve --open，它将运行 Angular 应用程序但不运行节点 js api，所以想要同时运行两者，一旦我从 Angular 应用程序或节点 js 应用程序中更改任何内容，它必须自动刷新。

【问题讨论】：

您希望在同一端口上为客户端和服务器提供服务，仅用于开发还是用于生产？

@Jarek 我想在同一端口上为客户端和服务器提供服务，仅用于开发和生产。

【参考方案1】：

1.首先为您构建 Angular 6 应用程序 运行 ng build --watch

2.来自 nodejs 应用程序 写这个中间件 app.use(express.static(path.join(__dirname, './client/dist/client'))); 因为指向client/dist/client的文件夹是angular 6 app的build文件夹。

然后运行 ​​nodemon --inspect app.js

确保对这样的文件夹进行分层

/myproject /client /dist /client /.... /index.html /app.js /.....

从 app.js 监听你想运行的端口 并运行 localhost:portno

希望对你有帮助

【讨论】：

没有什么可以给 -1 的，因为如果您想在同一端口上使用节点构建您的角度应用程序，并且还给它一个构建文件夹的公共路径，这就是这个问题的答案并运行 nodemon --inspect app.js

我和你在一起，中立。

【参考方案2】：

Daniel Kagan 在媒体上有一篇很棒的博客解释了所有内容，这里是链接。 Hot deploy 它解释了客户端热部署我添加了更多代码来进行客户端和服务器热部署。

这个答案纯粹是为了开发热重载

第一步。

安装concurrently和nodemon

npm i 并发

npm i nodemon

您也可以使用 -g 标志全局安装

第二步。

打开你的服务器 package.json 文件， 并添加以下四行。 注意我在客户端文件夹中有我的角度代码，所以我做了 cd client

"buildclient": "cd client && ng build",
"runclient": "cd client && npm start",
"devstart": "nodemon --inspect ./bin/www",
"dev": "npm run buildclient & concurrently --kill-others \"npm run runclient\" \"npm run devstart\""

如果您不想检查节点应用程序，请删除 --inspect 标志。

第三步。

转到您的 angular 文件夹并创建文件 proxy.conf.json 将以下行添加到文件中。

 
   "/api/*": 
   "target": "http://localhost:3000",
   "secure": false,
   "changeOrigin": true
 
 

第四步。

在 Angular 的 package.json 文件中添加以下命令

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

第五步。

在服务器的公共文件夹中创建 angular build 输出目录。为此，请转到 angular.json 将 build outputPath 更改为 ../public 以下是 JSON sn-p。

"options": 
        "outputPath": "../public",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "src/styles.css"
        ],
        "scripts": []
      ,

第六步。

确保您的 node express server app.js 文件从公共文件夹中读取静态文件。

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

第七步。

npm 运行开发

完成 goto http://localhost:4200 你可以在那里看到你的应用程序 :) 所有对 /api 的调用都将到达 node express 服务器。

对服务器或客户端的任何更改都将自动热部署。

注意我使用Express application generator 创建我的服务器并使用Angular CLI 创建角度应用程序。如果您以其他方式执行此操作，则某些文件可能不存在

【参考方案3】：

您不能在同一个端口上运行两个不同的应用程序。当您运行ng serve 时，Angular-cli 在后台使用 nodejs 服务器（技术上它是 webpack-dev-server），这意味着该端口已在使用中。

有两种可能的解决方案。

使用您的节点应用程序来提供静态前端文件。那么你就不能真正使用ng serve（这可能是你在现场运行时会做的）。

使用带有不同端口的 nodejs，并使用 Angular 的代理配置，让 Angular 认为 api 端口实际上是 4200（这可能是开发期间最好的）。

我认为这主要是开发过程中的一个问题，因为您很可能不会（也不应该）实时使用ng serve，所以选项 2 是我的最佳建议。

要配置代理，请在 Angular 应用程序根目录中创建一个名为 proxy.config.json 的文件，其中包含以下内容：

  "/api/*": 
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
  

然后，当您运行 ng serve 时，您将改为使用 ng serve --proxy-config proxy.config.json 运行它。

Here's a link to the documentation

---

这是为生产构建时的替代方案（上述解决方案 1）：

要在生产环境中使用ng build --prod 到create a production ready Angular build，然后（假设您在节点服务器上使用Express），使用app.use(express.static('dist/')) 之类的东西，如Express documentation 中所述。我自己没有使用节点（我使用的是 .NET Core），所以恐怕我无法提供更多详细信息。

【讨论】：

还写了关于在服务器端预渲染 javascript 的可能性：github.com/angular/angular-cli/wiki/stories-universal-rendering

这绝对是需要考虑的事情，谢谢。

@NikolajDamLarsen 我得到了像[HPM] Error occurred while trying to proxy request /api/users from localhost:4200 to http://localhost:3000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)这样的错误

你也在运行你的节点服务器吗？

尝试将"changeOrigin": true, 添加到代理配置中。