如何设置 AWS Cloud9 以使用 webpack-dev-server 运行现有的 JavaScript 应用程序（处于开发模式）？答案

【问题标题】：How do I set up AWS Cloud9 to run an existing JavaScript app with webpack-dev-server (in development mode)?如何设置 AWS Cloud9 以使用 webpack-dev-server 运行现有的 JavaScript 应用程序（处于开发模式）？
【发布时间】：2018-03-06 16:59:24
【问题描述】：

我正在尝试让我相当典型的 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,
  },
}

【问题讨论】：

标签： javascript amazon-web-services webpack webpack-dev-server aws-cloud9

【解决方案1】：

如果有人遇到这种情况，我想分享我的解决方案，因为我知道这可能会令人沮丧：

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

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

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

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

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

npm start

最后，点击终端中的链接：“Project is running at http://0.0.0.0:8080/”，您的应用将显示在一个新窗口中。

**如果不起作用，请不要忘记在您的 Cloud 9 安全组上允许端口 80：https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/working-with-security-groups.html#adding-security-group-rule

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

disableHostCheck: true,

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

【讨论】：

【解决方案2】：

1) 您需要做的第一件事是在端口 8080 上运行 react 应用程序。您可以通过将环境变量 PORT 设置为 8080 来完成此操作，然后从 AWS Cloud9 终端启动 react 开发服务器。

export PORT=8080
npm start

详情请看discussion on GitHub.

2) 启动应用程序后，您可以通过单击 AWS Cloud9 顶部的 Preview -> Preview Running Application 进行预览。

更多详情请查看AWS Cloud9 doc

【讨论】：

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

【解决方案3】：

在 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
    },

参考Link

【讨论】：