Nuxt 应用程序 - 客户端和服务器文件分离 - 如何部署到 Heroku？

Posted 2023-02-19

【中文标题】Nuxt 应用程序 - 客户端和服务器文件分离 - 如何部署到 Heroku？

【英文标题】：Nuxt app - Client & Server files separated - how to deploy to Heroku?

【发布时间】：2022-01-08 03:15:12

【问题描述】：

按照 Nuxt 的课程，我在创建此应用程序时选择了 s-s-r 路线，将 admin、client 和 server 分离到各自的文件中.这是文件结构：

- amazon-clone
    - admin
    - client
    - server

课程资料不包括推送到 git 或部署到 Heroku。

我已按照 Nuxt 和 Heroku 文档的步骤进行操作，但是因为每个文件都有自己的 package.json 和 nuxt.config.js，我觉得这不起作用。正如 Heroku 所期望的那样，根文件夹中有一个 package.json？

当client、server 和admin 分开时，将应用部署到heroku 的最佳做法是什么？

存储库：https://github.com/TomBell95/amazon-clone

Heroku 部署步骤：

过程文件：web: npm start package.json:"heroku-postbuild":"npm run build" "engines": "node": "14.x"

heroku buildpacks:set heroku/nodejs
heroku config:set HOST=0.0.0.0
heroku config:set NPM_CONFIG_PRODUCTION=true

我发现了类似的问题，但没有具体的Nuxt（例如How to push both the client side and server side project folders together as a one project (api + front end) on github?）。

【问题讨论】：

你为什么要拆分这 3 个？它们实际上包含什么？如果只是路由，则可以将其保存在同一目录中。部署所有这 3 个似乎确实很困难。

这是 udemy 课程的一部分，但是讲师已经有一段时间没有回复了。管理员包含管理员用户更新产品的所有服务。客户端包含所有客户端功能，即页面、组件、静态等。服务器包含所有路由、API 调用、中间件等。

【参考方案1】：

我真的不明白将所有这 3 个分开的目的。

从未见过这种项目结构和tbh，我什至不知道如何正确托管它。 最后，有一个后端。因此，您可能可以拆分后端（将其托管在 Heroku 上）和前端（将其拆分在前端）。如果您正在学习 Nuxt，这可能不是正确的选择，因为它从一开始就没有使用通用结构。

我可以推荐：

Nuxt.js - Vue.js on Steroids，我前段时间拍了这个，Max做的，老师很棒，内容很多 Mastering Nuxt 由 Nuxt 大使和他的团队完成。它非常完整，有很多好的做法

这些都是你可以关注的好资源，是众所周知的好资源。

【讨论】：

我认为这可能是这种情况......令人失望的是它是在课程中教授的，但这是一个教训！感谢您的课程建议，非常感谢！

@Tom 我的意思是，也许这门课程本身是相当高级的或 idk，但要开始：与其保持通常的通用约定并默认使用它，而不是从一开始就搞砸太多。