如何在AWS BeanStalk中单独部署编译后的React前端应用

嘿，我之前刚搞定过类似的需求，把React部署到Beanstalk其实和你部署Spring Boot Jar包的思路相通，但因为React是单页应用，需要先编译成静态资源再配置托管环境。我来一步步给你讲清楚操作流程：

第一步：编译React应用生成静态文件 #

React项目最终要部署的是编译后的静态HTML/CSS/JS文件，所以先在本地完成打包：

• 打开终端，进入你的React项目根目录
• 执行打包命令：npm run build（如果是用Create React App初始化的项目，这个命令会自动生成build文件夹）
• 打包完成后，项目根目录下会出现一个build文件夹，里面就是所有需要部署的静态资源

第二步：准备Beanstalk部署包 #

这里有两种常用的部署方式，选适合你的就行：

方式一：用Node.js环境托管（简单易上手） #

这种方式用Node.js的轻量服务器来托管静态文件，适合不想折腾NGINX配置的情况：

1. 安装静态文件服务器依赖，比如serve：

   npm install --save serve
   

2. 修改项目根目录的package.json，在scripts里添加启动命令：

   "scripts": {
     "start": "serve -s build",
     // 其他原有脚本...
   }
   

   这里的-s参数是开启单页应用模式，能解决React路由刷新404的问题
3. 打包部署文件：把build文件夹、package.json、package-lock.json（或yarn.lock）一起压缩成ZIP包注意：ZIP包的根目录要直接包含这些文件，不能嵌套在项目文件夹里

方式二：用NGINX环境托管（更适合生产环境） #

如果想直接用NGINX来托管静态资源，性能更好，需要添加Beanstalk配置文件：

1. 在项目根目录创建.ebextensions文件夹
2. 在该文件夹下创建01_nginx_config.conf文件，写入NGINX配置（解决静态资源托管和React路由问题）：

   files:
     "/etc/nginx/conf.d/elasticbeanstalk/00_static.conf":
       mode: "000644"
       owner: root
       group: root
       content: |
         server {
             listen 80;
             server_name localhost;
             root /var/www/html/build;
             index index.html;
   
             location / {
                 try_files $uri $uri/ /index.html;
             }
         }
   

3. 打包部署文件：把build文件夹和.ebextensions文件夹一起压缩成ZIP包，同样确保ZIP根目录直接包含这两个内容

第三步：部署到Elastic Beanstalk #

这一步和你部署Spring Boot Jar包几乎一样：

• 登录AWS控制台，进入Elastic Beanstalk服务
• 选择你的目标应用，点击「创建环境」（或在现有应用下新建Web服务器环境）
• 选择对应的平台：如果用方式一就选Node.js平台，方式二选NGINX平台（比如Amazon Linux 2的NGINX环境）
• 上传你刚才准备好的ZIP部署包，等待Beanstalk完成环境创建和部署
• 部署完成后，访问Beanstalk分配的域名就能看到你的React应用了

几个要注意的坑 #

• ZIP包结构一定要对：如果Beanstalk提示找不到启动脚本或静态资源，大概率是ZIP包嵌套了多余的文件夹，检查一下根目录是否直接包含所需文件
• React路由问题：如果用了BrowserRouter，必须配置服务器重定向到index.html，两种部署方式里我都已经帮你处理了这个配置
• Node.js版本匹配：用方式一的话，在Beanstalk环境配置里指定和本地一致的Node.js版本，避免兼容性问题

内容的提问来源于stack exchange，提问作者J. Doe