在Azure App Service中部署前端和后端应用程序的最佳方法是什么？

Question

我们正在使用Reactjs开发前端应用程序，使用Nodejs开发后端应用程序，但我对Azure App Service中后端部署的工作流程不是很熟悉。我们已经成功部署了前端，并且它现在在一个App Service URL上运行，但是我不确定该如何处理后端。我们的前端和后端代码位于两个不同的仓库中，并且有两个不同的流水线。以下是进一步的细节：

前端代码（Reactjs，Typescript）- 1个单独的仓库，1个单独的流水线，在不同的App Service URL上成功部署（但由于需要与后端通信而导致访问被拒绝）

流水线任务（npm install，npm run build，发布构建工件）

后端代码（Nodejs）- 1个单独的仓库，1个单独的流水线，在不同的App Service URL上部署但无法正常工作

流水线任务（npm install，归档文件，发布构建工件）

我创建的这两个Web App类型的App Service具有相同的App Service计划。现在我不知道后端将如何运行，当我们的前端代码调用后端时。

我是否做得正确，或者您是否有任何想法，以便我的后端在后台运行？

- Deegee

---

应该按照你所说的那样工作：你可以在两个不同的应用服务中部署它们。你的React前端只需要拥有后端应用服务的URL，而不是假设后端正在相同的URL上运行。你这样做了吗？ - silent

是的，但每次我测试后端（点击后端的应用服务URL）时，它会重定向到前端的链接。两个URL都已添加到应用注册的RedirectURI中。有什么想法为什么会这样？ - Deegee

看起来你已经为后端启用了身份验证？而且，当你直接访问后端时，它会重定向？是这样吗？ - Prawin

嗨@Prawin，不，我没有在应用服务中启用身份验证，但我确实将我的后端应用服务URL添加到了应用注册的身份验证-重定向URI中。我的设置正确吗？ - Deegee

你可以参考我在另一篇帖子中的回答。你可以将两个项目放入一个应用服务中，并使用虚拟应用程序进行部署。 - Jason Pan

嗨Deegee， 还没有收到你的最新信息，对你有帮助吗？或者如果你有任何疑虑，请随时在这里分享，我们会检查并帮助你。 - Vito Liu

Answer 1

尝试在你的nodejs后端app.js文件中使用cors，可能是阻止前端应用程序访问后端的原因。

通常我们做的是：

1. 将前端应用程序（如React、Angular等）部署在单独的应用服务上。
2. 将nodejs应用程序部署在另一个应用服务上。
3. 从前端调用nodejs应用程序的API。

或者，

我们使用gulp文件在同一台服务器上设置和运行客户端和服务器，并将该项目部署在应用服务上。 在这种情况下，没有跨站点通信。 这是最受欢迎的方法。

- Priyanshu Tiwari