使用NPM构建/部署create-react-app至AWS Amplify遇问题求助

问题背景 #

我刚接触Node生态，尝试把基于Create React App（CRA）初始化的项目配置到AWS Amplify做持续部署。项目结构如下：

project
  public
    index.html
  src
    App.tsx/App.js
  package.json

本地开发时，在根目录执行npm start能正常加载App.tsx/js对应的首页，但通过GitHub托管到AWS Amplify后，默认构建指向public目录，导致发布的站点只显示空白的index.html占位页。

本地调试时发现，执行npm build生成build文件夹后，再执行npm start会加载build目录下的index.html而非原App.js/tsx。推测AWS Amplify自动执行npm build是导致线上问题的原因。

现针对以下问题寻求规范解决方法：

• 从/build文件夹部署是否为行业标准惯例？
• create-react-app为何分离/src/App.tsx与/public/index.html，二者看似都作为应用首页？
• 为何npm start的行为会因是否执行过npm build而改变？
• 将App.tsx组件嵌入index.html是否为正确修复方式？
• 项目已安装webpack但无webpack.config.js，是否需自行创建？该文件应放置于何处？

问题答疑 #

1. 从/build文件夹部署是否为行业标准惯例？ #

是行业标准。React这类单页应用（SPA）的开发流程中，npm build会把src目录下的源码、依赖等编译打包成优化后的静态资源（包括压缩后的HTML、CSS、JS，以及处理后的图片等），这些资源统一存放在/build文件夹中。部署时只需将该文件夹内的内容部署到静态服务器即可，既不需要在服务器上运行Node环境处理源码，还能获得更快的加载速度。

2. create-react-app为何分离/src/App.tsx与/public/index.html，二者看似都作为应用首页？ #

这是SPA的标准架构设计，二者分工明确：

• public/index.html是静态入口模板，浏览器加载页面时最先获取它，但里面只有基础页面结构（比如全局meta标签、<div id="root"></div>这样的空根节点），本身没有业务内容。
• src/App.tsx是React应用的根组件，包含所有业务逻辑和UI内容。在开发或构建过程中，React会将App组件渲染到index.html的root节点中，最终用户看到的完整页面是二者结合的结果。

3. 为何npm start的行为会因是否执行过npm build而改变？ #

CRA的npm start命令在两种场景下有不同的逻辑：

• 当不存在build文件夹时，它启动的是开发服务器，会实时编译src目录下的源码，将App组件渲染到index.html的root节点，同时支持热重载，方便开发调试。
• 当build文件夹存在时，npm start会切换成静态文件服务器，直接提供build文件夹内的静态资源——这是CRA提供的便捷功能，让你可以本地预览构建后的生产环境效果，无需额外安装静态服务器工具。

4. 将App.tsx组件嵌入index.html是否为正确修复方式？ #

完全不正确，这违背了CRA的架构设计，反而会打乱项目结构。你需要解决的是AWS Amplify的部署配置问题，而非修改代码结构。正确做法是在Amplify的构建设置中，指定部署的源文件夹为build，而非public。

5. 项目已安装webpack但无webpack.config.js，是否需自行创建？该文件应放置于何处？ #

不需要自行创建。CRA已经帮你封装好了webpack的所有配置，默认不会暴露出来，目的是让你无需关注复杂的打包配置，专注于业务代码开发。除非你执行npm run eject命令将配置“弹出”，但这个操作不可逆，不推荐新手使用。你当前的问题只需调整Amplify的部署设置即可解决，无需修改webpack配置。

内容的提问来源于stack exchange，提问作者Jake