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

Question

我正在与一个小团队开发Web应用，在研究和学习一段时间后，我们发现将后端和前端项目分离是一种良好的实践。因此，我们将使用hapijs和mysql数据库作为REST API来开发后端，使用angularjs来开发前端。

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

我们是一个相当新的团队，开始尝试Web开发，因此我们正在努力学习以确保做得正确。

我们的技术栈将包括：

• 用于Web服务器的Hapijs
• 用于ORM的Sequelize
• 用于聊天功能的Socket.io
• 用于单元测试的Mocha
• 用于前端的Angularjs

我们将使用Microsoft Azure托管我们的Web应用程序。

感谢您的答案和帮助。

- Victor Silva Do Nascimento

Answer 1

它们不必在同一服务器上。将后端放在不同的服务器上是完全可以的，这样也很方便，如果您需要扩展后端/前端而不是另一个。

有几种可能性：

• 您可以使用消息代理（如RabbitMQ）在两个微服务之间进行通信

• 您的前端应用程序可以公开后端的url，然后在AJAX请求中使用该url，这需要后端启用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

---

你好 @nbermudezs，感谢您的快速回复。将它们保留在不同的服务器上的问题在于成本，我们必须支付两个服务器的费用，这对我们来说是不可行的。 - Victor Silva Do Nascimento

如果您想将它们保持为分离的实例，但只使用一个服务器，您可以使用类似docker的东西，当然这需要更多的学习。 - nbermudezs

如果Docker对你来说不行，你就得琢磨一下bash脚本，进入前端项目，运行所需的命令来生成dist文件（已经压缩和混淆的用于生产环境的文件），然后将它们复制到主项目中，可能是公共文件夹，最后开始部署流程。 - nbermudezs

我从未使用过Azure，所以我不知道他们的部署流程是怎样的。有了像Heroku/Dokku这样的替代方案，只需简单地执行“git push”即可完成部署。 - nbermudezs

使用RabbitMQ相比于REST API或Web Socket，有哪些优势呢？ - basilisk

当然，这将涉及更多的学习，让你的冒险更加精彩。哈哈 - ino

Answer 2

作为初学团队，你可能会遇到很多问题。最好的做法是将前端和后端分开作为独立的单元。这将导致更好的全栈开发流程。本文介绍了使用React作为前端和Express js作为后端的过程。它专门为初学者设计，详细解释了您的问题。文章链接：https://www.freecodecamp.org/news/lessons-learned-from-deploying-my-first-full-stack-web-application-34f94ec0a286/。

- Amila Weerasinghe

Answer 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。

- Andre Gallo