ng-build上的端口和代理配置

Question

我有一个前端在int.myapp.com上运行,它是在int.backend.myapp.com上的后端.我以为我可以像这样使用proxy.config.json进行代理:

 "/api": {
    "target": "https://int.backend.myapp.com",
    "secure": true,
    "changeOrigin": true
  }

在我的package.json文件中

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

一切都适用于我的开发环境.

但是当我为生产而建立:

ng buil --prod

并部署在firebase上

firebase deploy

Web应用程序无法与API通信

我该怎么做才能解决它？

Answer 1

万一其他人遇到这个问题，我找到了一个解决方法，如果你仍然想在本地运行你的生产 angular 应用程序，请使用 http-server 应用程序：

npm install -g http-server

构建您的生产应用程序：

ng build --prod

转到您的 dist/[YOUR_APP_NAME_FOLDER] 文件夹：

cd dist/[YOUR_APP_NAME_FOLDER]

运行 http-server 应用程序并使用您要指向的后端代理传递代理选项（--proxy 或 -P）：

 http-server -c-1 -P http://localhost:3000 .

Answer 2

在将应用程序部署到生产期间：配置服务器以将丢失文件的请求重定向到index.html。在此处了解有关服务器端重定向的更多信息https://angular-doc.ru/guide/deployment#fallback。

到远程服务器的基本部署

对于最简单的部署，创建生产版本并将输出目录复制到 Web 服务器。

从生产构建开始：

content_copy ng build --prod 将输出文件夹（默认为 dist/）中的所有内容复制到服务器上的文件夹中。

配置服务器以将丢失文件的请求重定向到index.html。下面详细了解服务器端重定向。