如果它们是分开的，如何部署后端和前端项目？

Posted 2023-02-22

【中文标题】如果它们是分开的，如何部署后端和前端项目？

【英文标题】：How to deploy backend and frontend projects if they are separate?

【发布时间】：2016-05-28 12:33:44

【问题描述】：

我正在与一个小团队一起开发一个 Web 应用程序，经过一番研究和研究，我们发现将后端和前端项目分开是一种很好的做法。因此，我们将使用 hapijs 和 mysql 数据库将后端开发为 REST API，而前端使用 angularjs。

但是在生产环境中它们必须在同一台服务器上，对吧？如果它们位于不同的存储库中，我们如何将它们部署到同一台服务器？

我们是一个相当新的团队，开始了我们在网络开发方面的冒险，所以我们正在研究很多东西来把事情做好。

我们的技术堆栈将是：

Hapijs 用于网络服务器 为orm续集 用于聊天功能的 socket.io 用于单元测试的 mocha angularjs 用于前端

我们将使用 microsoft azure 来托管我们的网络应用程序。

感谢您的回答和帮助。

【参考方案1】：

他们不必在同一个服务器上。将后端放在不同的服务器中是非常好的，如果您需要扩展后端/前端而不是另一个，它也很方便。

有几种可能：

您可以使用像RabbitMQ 这样的消息代理在两个微服务之间进行通信

您的前端应用程序可能会公开后端的 url，并且您在 AJAX 请求中使用它，这需要您的后端启用 CORS。不喜欢这种方法。

在前端使用相对 URL，然后将具有特定模式（如 /api/*）的请求通过管道传输到后端。您的 AngularJs 应用程序是由 Node.js 服务器提供服务还是由 Hapi.js 服务器提供服务？ 如果 Node.js 类似

：

app.all(['/api/*', '/fe/*'], function(req, res) 
    console.log('[' + req.method + ']: ' + PROXY + req.url);
    req.pipe(request(
        url: PROXY + req.url,
        method: req.method,
        body: req.body,
        rejectUnauthorized: false,
        withCredentials: true
    ))
    .on('error', function(e) 
        res.status(500).send(e);
    )
    .pipe(res);
);

PROXY_URL 是您的后端服务器的 url/ip。 hapi.js 中没做过，但应该也是可以的。

我相信还有更多选择，这些都是我熟悉的。

【讨论】：

您好@nbermudezs，感谢您的快速回复。将它们放在不同的服务器上的问题是成本，我们将不得不为两台服务器付费，这对我们来说是不可行的。

如果您想将它们作为单独的实例保存但只使用一台服务器，您可以使用docker 之类的东西，当然这涉及到更多的学习经验。

如果 docker 不适合你，你将不得不使用 bash 脚本来 cd 进入前端项目，运行你需要运行的任何命令来生成 dist 文件（准备生产的缩小/丑化文件)，然后将它们复制到主项目，可能是公共文件夹，最后开始部署过程。

我没用过Azure，所以不知道他们的部署流程是怎样的。使用 heroku/dokku 之类的替代方法很简单 git push

在这里使用rabbitmq而不是REST API有什么好处吗？或者网络套接字？

【参考方案2】：

作为一个新手团队，您可能会遇到很多问题。最好的办法是 将前端和后端作为单独的单元分开。这将导致更好的全栈开发过程。这个https://www.freecodecamp.org/news/lessons-learned-from-deploying-my-first-full-stack-web-application-34f94ec0a286/

文章解释了使用 react 作为前端和 Express js 作为后端的过程。 它是为初学者精心设计的。它包括对您的问题的详细解释。

【参考方案3】：

正如你们现在开始的那样，我认为您可以通过使用 hapi 创建两个服务器实例来处理这个问题。这满足了您在生产中只有一台服务器的要求：

const server = new Hapi.Server();
server.connection( port: 80, labels: 'front-end' );
server.connection( port: 8080, labels: 'api' );

这确实很容易实现，但它也有一个缺点：无论何时推出更新，您都需要接受来自客户端和服务器应用程序的停机时间。

您可以在这篇文章中找到更多信息：https://futurestud.io/blog/hapi-how-to-run-separate-frontend-and-backend-servers-within-one-project

关于部署，无论您用于构建版本（持续集成工具、手动脚本等），都可以 git 推送到 azure：https://azure.microsoft.com/en-us/documentation/articles/web-sites-publish-source-control。例如，手动脚本会从两个独立的存储库（前端和后端）获取您的代码，复制相关文件，更新配置值并将最终结果推送到 git。