5

我试图让我相当典型的 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,
  },
}
4

3 回答 3

2

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

首先，在你的 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 重新绑定攻击。

于 2019-08-02T16:52:21.220 回答
1

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

export PORT=8080
npm start

有关详细信息，请查看GitHub 上的此讨论。

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

有关更多详细信息，请查看此AWS Cloud9 文档

于 2018-03-07T07:35:22.283 回答
0

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

参考链接

于 2019-01-06T19:07:36.657 回答