我如何设置AWS Cloud9以运行带有webpack dev server的现有JavaScript应用程序（在开发模式下）？

我正在尝试让我相当典型的JavaScript（React）应用程序在AWS Cloud9上以开发模式运行。我成功地克隆了我的repo（使用https-ugh），安装了我的npm包，并且可以在控制台中运行脚本。但是，我不知道如何在开发模式下运行和访问应用程序。有过多的医生，但他们似乎都围绕着运行部分跳舞。我的猜测是，我需要以某种方式设置自定义主机和端口，但我还需要找到用于查看应用程序运行的URL

这是我的devServer配置：

devServer: {
  // Display only errors to reduce the amount of output.
  stats: "errors-only",
  host, // Defaults to `localhost`
  port, // Defaults to 8080
  overlay: {
    errors: true,
    warnings: true,
  },
}

disableHostCheck: true,

1） 您需要做的第一件事是在端口8080上运行react应用程序。您可以通过将环境变量PORT设置为8080，然后从AWS Cloud9终端启动react-dev服务器来实现这一点

export PORT=8080
npm start

有关详细信息，请参见此

2） 启动应用程序后，您可以通过单击AWS Cloud9顶部的预览->预览正在运行的应用程序来预览它

---

有关更多详细信息，请查看webpack.config.js中的：

 devServer: {
        historyApiFallback: true,
        contentBase: './',
        host: process.env.IP,
        //https: true,
        port: process.env.PORT,
        "public": "your-project.c9users.io" //no trailing slash
    },

---

请参阅

如果有人遇到此问题，我想与大家分享我的解决方案，因为我知道这有多令人沮丧：

首先，在package.json文件中创建一个脚本：

"start": "webpack-dev-server --open"

然后，将以下内容添加到您的网页包配置文件中：

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    host: '0.0.0.0',
    port: 8080,
    compress: true,
  }

然后，在AWS Cloud 9中打开终端，并运行脚本：

npm start

最后，点击终端中的链接：“项目正在运行”，你的应用程序将显示在一个新窗口中

**如果它不起作用，请不要忘记允许Cloud 9安全组上的端口80：

如果要在预览窗格中查看项目，可以将以下内容添加到devServer配置中：

devServer: {
  // Display only errors to reduce the amount of output.
  stats: "errors-only",
  host, // Defaults to `localhost`
  port, // Defaults to 8080
  overlay: {
    errors: true,
    warnings: true,
  },
}

disableHostCheck: true,

---

但是，需要注意的是，当设置为true时，此选项将绕过主机检查。不建议这样做，因为不检查主机的应用容易受到DNS重新绑定攻击。

谢谢您的回答。我在浏览器中不断收到“无效主机头”错误。当我检查控制台时，HTTP错误是499。此外，我将我的devServer设置放在问题中，以防有帮助。您可以在配置文件中设置“disableHostCheck:false”，或者您可以将“host”设置为在AWS Cloud9中点击预览运行应用程序时可以在预览选项卡中看到的主机