javascript - 如何设置 AWS Cloud9 以使用 webpack-dev-server(在开发模式下)运行现有的 JavaScript 应用程序？

Question

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

Answer 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

最后，单击终端中的链接:“项目运行于 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

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

disableHostCheck: true,

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