时间戳

首页 > 解决方案 > 关于部署的全栈应用程序文件结构的问题

reactjs - 关于部署的全栈应用程序文件结构的问题

问题描述

我对开发和部署全栈应用程序很陌生，所以我有几个问题一直很难找到答案。

我目前有2个项目。一个 Express/NodeJS 后端项目，其中包含我的 API（使用 express-generator 生成），在端口 9000 上运行，我使用 npm start 运行该项目。它的文件结构是这样的：

在此处输入图像描述

然后，我的前端有一个单独的 React 项目（使用 create-react-app 生成），运行在端口 3000 上，我使用 npm start 运行该项目。

它的文件结构是这样的：

在此处输入图像描述

当我去部署它时，无论是在 Heroku 还是 AWS 或其他什么上，它都需要是一个包含前端和后端项目的整合项目，对吗？我见过的项目布局基本上是一个 React 应用程序 + 1 个后端文件，如下所示：

在此处输入图像描述

  1. 要将我的两个应用程序（React App 和 Express API）部署为一个网站，我需要将它们作为一个项目吗？
  2. 如果是 1，那么为什么人们使用 create-react-app 和 express-generator 如果它最终不会为您提供完整堆栈应用程序的文件结构？
  3. 是否有任何指南显示如何组合（在文件结构的字面意义上，因为这两个应用程序已经可以正常通信）使用 express generator 和 create-react-app 创建的两个应用程序？
  4. 如果我需要组合它们，这对我的 package.json 意味着什么？

现在，在我的后端 package.json 中，我有脚本：

"scripts": {
  "start": "node ./bin/www"
}

在我的前端 package.json 中，我有脚本：

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

我想如果要合并这两个项目，是否需要更改启动脚本才能同时运行这两个项目？

有兴趣学习全栈应用程序文件结构的最佳实践（在这种情况下，MERN 堆栈只是没有 Mongo）。任何意见或建议都非常感谢，谢谢！

标签： reactjsexpressdeploymentweb-deploymentmern

解决方案

要将我的两个应用程序（React App 和 Express API）部署为一个网站，我需要将它们作为一个项目吗？

不，您甚至可以将它们部署到不同的域并将前端视为另一种产品。将这两个应用程序保存在同一个 Git 存储库中有利有弊。

如果是 1，那么为什么人们使用 create-react-app 和 express-generator 如果它最终不会为您提供完整堆栈应用程序的文件结构？

人们使用 CRA 是因为它是 Facebook 的默认方式，而且很简单。但是许多人使用NextJs或其他样板等框架进行服务器端渲染。

是否有任何指南显示如何组合（在文件结构的字面意义上，因为这两个应用程序已经可以正常通信）使用 express generator 和 create-react-app 创建的两个应用程序？

如果您只是通过 API 进行通信，请将两者保存在不同的文件夹中。

对于 React，无论如何您都将创建一个优化的生产构建（您不需要在服务器中不断运行节点来提供最终的 html 和 Javascript 文件）。

对于后端，即使您使用另一种语言，您也可以正常部署，就像使用静态 html 时一样。

推荐阅读