如何在AWS Cloud9中运行带webpack-dev-server的React开发应用

我之前在Cloud9里折腾过React开发环境，刚好能帮到你！按照下面的步骤来，就能顺利运行并访问你的开发应用了：

1. 调整DevServer配置（关键） #

Cloud9的环境是基于远程虚拟机的，所以必须让开发服务器监听所有网络接口，同时允许外部访问。根据你的项目类型，配置方式略有不同：

如果你用自定义webpack配置： #

在webpack.config.js里找到devServer部分，修改成这样：

devServer: {
  host: '0.0.0.0', // 监听所有可用的网络接口，让Cloud9的代理能访问到
  port: 8080, // Cloud9默认推荐使用8080端口（也可以用3000，但8080兼容性更好）
  disableHostCheck: true, // 禁用主机检查，避免Cloud9的域名被开发服务器拦截
  open: false, // 不要自动打开浏览器，Cloud9环境里这个操作无效
  hot: true // 保留热重载功能，提升开发效率
}

如果是Create React App（未执行eject）： #

不用修改任何配置文件，直接通过环境变量启动即可：

HOST=0.0.0.0 PORT=8080 npm start

这条命令会自动覆盖Create React App默认的devServer设置，非常省心。

2. 启动开发服务器 #

在Cloud9的终端里，运行你的启动脚本：

npm start

启动成功后，控制台会输出类似这样的内容：

Compiled successfully!

You can now view your app in the browser.

Local: http://localhost:8080
On Your Network: http://172.31.xx.xx:8080

注意：这里的On Your Network地址是Cloud9虚拟机的内部IP，不能直接用来访问，必须用Cloud9提供的专属预览URL。

3. 获取并访问应用URL #

有两种简单的方式拿到可访问的URL：

• 方式一：点击Cloud9顶部菜单栏的「Preview」→「Preview Running Application」，会自动弹出一个预览窗口，窗口里的URL就是可以直接在浏览器访问的地址（格式类似https://<你的环境ID>.vfs.cloud9.<区域>.amazonaws.com/）。
• 方式二：如果预览窗口没自动弹出，你可以手动拼接URL：格式为https://<环境ID>.vfs.cloud9.<AWS区域>.amazonaws.com/，环境ID和区域可以在Cloud9的环境详情页找到。

常见问题排查 #

• 如果预览页面显示无法访问：检查端口是否设置为8080（Cloud9默认开放这个端口给预览服务），或者确认disableHostCheck已经开启。
• 热重载不生效：确保hot: true在devServer配置里，Create React App默认已经开启了热重载，无需额外设置。

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