webpackで立てたサーバに外部からアクセスできない

前提・実現したいこと

Google Compute Engineにwebpackで立てたwebサーバに外部からブラウザでアクセスできるようにしたいです。
以下のサイトの説明にならいwebpackでサーバを立てました。
参考１：https://ics.media/entry/12140/

また、外部からアクセスできるように、以下のサイトにならって、
webpack.config.js内に以下を追記しました。

  devServer: {
    host: '0.0.0.0',
    disableHostCheck: true,
  }

参考２：https://tackeyy.com/blog/posts/how-to-access-app-through-the-ip-with-webpack-dev-server
参考３：https://obel.hatenablog.jp/entry/20180217/1518871500

npm run startで、コンパイルが成功したように見えましたが、http://外部ip:8080/にアクセスできません。

$ npm run start

> webpack-ics@1.0.0 start /home/asky/webpack-ics
> webpack-dev-server
ℹ ｢wds｣: Project is running at http://0.0.0.0:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from dist
中略
ℹ ｢wdm｣: Compiled successfully.

発生している問題・エラーメッセージ

ブラウザでhttp://外部ip:8080を開くと、以下のメッセージが表示されます。

このサイトにアクセスできません
localhost で接続が拒否されました。
次をお試しください

接続を確認する
プロキシとファイアウォールを確認する
ERR_CONNECTION_REFUSED

該当のソースコード

package.json

json
1{
2  "name": "webpack-ics",
3  "version": "1.0.0",
4  "description": "",
5  "main": "index.js",
6  "scripts": {
7    "start": "webpack-dev-server",
8    "build": "webpack",
9    "test": "echo \"Error: no test specified\" && exit 1"
10  },
11  "keywords": [],
12  "author": "",
13  "license": "ISC",
14  "devDependencies": {
15    "webpack": "^4.43.0",
16    "webpack-cli": "^3.3.11",
17    "webpack-dev-server": "^3.11.0"
18  }
19}

webpack.config.js

js
1module.exports = {
2  mode: "development",
3
4  // メインとなるJavaScriptファイル（エントリーポイント）
5  entry: `./src/index.js`,
6
7  devServer: {
8    host: '0.0.0.0',
9    disableHostCheck: true,
10    contentBase: "dist",
11    open: true
12  },
13
14  // ファイルの出力設定
15  output: {
16    //  出力ファイルのディレクトリ名
17    path: `${__dirname}/dist`,
18    // 出力ファイル名
19    filename: "main.js"
20  }
21};

src/index.js

js
1// import 文を使って sub.js ファイルを読み込む。
2import { hello } from "./sub";
3
4// sub.jsに定義されたJavaScriptを実行する。
5hello();

src/sub.js

js
1// export文を使ってhello関数を定義する。
2export function hello() {
3  alert("helloメソッドが実行された。");
4}

試したこと

試しに、以下のサイトを参考にしてnginxをインストールしてNode.jsアプリをつくり、
npm run startしてみたところ、
http://外部ip:8080/でブラウザからアクセスできました。
ですので、http://外部ip:8080/にそもそもアクセスできないというわけではないのではないかと考えています。

https://qiita.com/yfujii01/items/41c15d885830deea8ed1

index.js

js
1const express = require('express');
2const bodyParser = require('body-parser');
3const app = express();
4app.use(bodyParser.urlencoded({extended: true}));
5app.use(bodyParser.json());
6
7app.get('/', (req, res) => res.send('Hello World!'));
8
9app.post('/test', (req, res) => {
10    let result = {};
11    if (req.body.password === 'hoge') {
12        result.result = "true";
13    } else {
14        result.result = "false";
15    }
16    res.json(result);
17});
18
19app.listen(8080);

package.json

json
1{
2  "name": "express-api-2",
3  "version": "1.0.0",
4  "description": "",
5  "main": "index.js",
6  "scripts": {
7    "start": "forever start index.js",
8    "stop": "forever stop index.js",
9    "test": "echo \"Error: no test specified\" && exit 1"
10  },
11  "keywords": [],
12  "author": "",
13  "license": "ISC",
14  "dependencies": {
15    "body-parser": "^1.19.0",
16    "express": "^4.17.1"
17  },
18  "devDependencies": {
19    "forever": "^3.0.0"
20  }
21}