AzureのWebAppにてNode.jsでつくったアプリケーションの公開がうまくいかない。

AzureのWebAppにてNode.jsでつくったアプリケーションを公開しようとしたのですが
なぜか表示されません。

GithubとAzureを連携させ公開するまでの方法は以下のサイトを参考に行いました。
Node.jsで作成したWebアプリをAzureで公開する【2019年11月版】

ソースコード

javascript
1//-------------------------------------------------------------------------------------------------------以下定義
2const https = require('https');
3const http = require('http');
4
5const hostname = '127.0.0.1';
6
7var ssl_server_key = 'server_key.pem';
8var ssl_server_crt = 'server_crt.pem';
9
10var fs = require('fs');
11
12var http_port = 3000;
13var https_port = 8443;
14
15
16
17
18var options = {
19   key: fs.readFileSync(ssl_server_key),
20   cert: fs.readFileSync(ssl_server_crt)
21};
22
23
24
25var server_https = https.createServer(options);
26var server_http = http.createServer();
27
28
29
30server_https .on('request', doRequest_https);
31server_http.on('request', doRequest_http);
32
33
34//-------------------------------------------------------------------------------------------------------https
35
36
37function doRequest_https(req, res) {　
38  var target = '';
39  var content = '';
40  var url = req.url; //リクエストからURLを取得
41
42  switch (url) {
43    case '/':
44
45    case '/index_https':
46      target = 'HTML/index_https.html';
47      content = 'text/html';
48      break;
49
50    case '/next_https':
51      target = 'HTML/next_https.html';
52      content = 'text/html';
53      break;
54
55    case '/do.css':
56      target = 'CSS/do.css';
57      content = 'text/css';
58      break;
59
60    case '/alert.js':
61      target = 'JavaScript/alert.js';
62      content = 'text/javascript';
63      break;
64
65    case '/jquery':
66      target = 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js';
67      content = 'text/javascript';
68      break;
69
70    default:
71      res.writeHead(404, {'Content-Type': 'text/plain'});
72      res.end('bad request');
73      return;
74  }
75
76  // ファイルを読み込んだら、コールバック関数を実行する。
77  fs.readFile(target, 'utf-8' , doReard );
78
79  // コンテンツを表示する。
80    function doReard(err, data) {
81      res.writeHead(200, {'Content-Type': content});
82      res.write(data);
83      res.end();
84  }
85}
86
87//-------------------------------------------------------------------------------------------------------http
88
89function doRequest_http(req, res) {
90  var target = '';
91  var content = '';
92  var url = req.url; //リクエストからURLを取得
93
94  switch (url) {
95    case '/':
96
97    case '/index_http':
98      target = 'HTML/index_http.html';
99      content = 'text/html';
100      break;
101
102    case '/next_http':
103      target = 'HTML/next_http.html';
104      content = 'text/html';
105      break;
106
107    case '/do.css':
108      target = 'CSS/do.css';
109      content = 'text/css';
110      break;
111
112    case '/alert.js':
113      target = 'JavaScript/alert.js';
114      content = 'text/javascript';
115      break;
116
117    case '/jquery':
118      target = 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js';
119      content = 'text/javascript';
120      break;
121
122    default:
123      res.writeHead(404, {'Content-Type': 'text/plain'});
124      res.end('bad request');
125      return;
126  }
127
128  fs.readFile(target, 'utf-8' , doReard );
129
130  // コンテンツを表示する。
131    function doReard(err, data) {
132      res.writeHead(200, {'Content-Type': content});
133      res.write(data);
134      res.end();
135  }
136}
137
138//-------------------------------------------------------------------------------------------------------コンソール
139
140server_https.listen(https_port, hostname, () => {
141  console.log(`Server running at https://${hostname}:${https_port}/`);
142});
143
144server_http.listen(http_port, hostname, () => {
145  console.log(`Server running at http://${hostname}:${http_port}/`);
146});
147

html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title>sample</title>
6  </head>
7  <body>
8    <h1>Hello world</h1>
9    <h2>This is First HTTP Page</h2>
10    <a href="/next_http">To next page</a>
11  </body>
12</html>

html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title>sample</title>
6  </head>
7  <body>
8    <h1>Hello world</h1>
9    <h2>This is First HTTPS Page</h2>
10    <a href="/next_https">To next page</a>
11  </body>
12</html>
13

html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3
4  <head>
5    <link rel = "stylesheet" type = "text/css" href = "/do.css" />
6
7    <script type = "text/javascript" src = "/alert.js"></script>
8    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
9
10    <meta charset="utf-8">
11    <title>sample</title>
12  </head>
13
14  <body>
15    <h1>Hello world</h1>
16    <h2>This is Next HTTP Page</h2>
17    <a href="/index_http" class="btn-square-pop">To First page</a>
18
19
20    <div class="wrapper" onclick="AnimeCont()">
21      <div class="square"></div>
22    </div>
23
24    <p onclick="al()" class="a">
25      外部ファイルでコンテンツの内容を変更します。
26    </p>
27
28    <p id="eid_date" class="a"></p>
29
30    <div id="timer"></div>
31    <p id="start" class="button" onclick="start()">Start</p>
32    <p id="stop" class="button" onclick="stop()">Stop</p>
33
34    <div class="container">
35      <div class="ball" id="st1"></div>
36      <div class="ball" id="st2"></div>
37      <div class="ball" id="st3"></div>
38      <div class="ball" id="st4"></div>
39      <div class="ball" id="st5"></div>
40      <div class="ball" id="st6"></div>
41      <div class="ball" id="st7"></div>
42    </div>
43
44  </body>
45</html>

html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3
4  <head>
5    <link rel = "stylesheet" type = "text/css" href = "/do.css" />
6
7    <script type = "text/javascript" src = "/alert.js"></script>
8    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
9
10    <meta charset="utf-8">
11    <title>sample</title>
12  </head>
13
14  <body>
15    <h1>Hello world</h1>
16    <h2>This is Next HTTPS Page</h2>
17    <a href="/index_https" class="btn-square-pop">To First page</a>
18
19
20    <div class="wrapper" onclick="AnimeCont()">
21      <div class="square"></div>
22    </div>
23
24    <p onclick="al()" class="a">
25      外部ファイルでコンテンツの内容を変更します。
26    </p>
27
28    <p id="eid_date" class="a"></p>
29
30    <div id="timer"></div>
31    <p id="start" class="button" onclick="start()">Start</p>
32    <p id="stop" class="button" onclick="stop()">Stop</p>
33
34    <div class="container">
35      <div class="ball" id="st1"></div>
36      <div class="ball" id="st2"></div>
37      <div class="ball" id="st3"></div>
38      <div class="ball" id="st4"></div>
39      <div class="ball" id="st5"></div>
40      <div class="ball" id="st6"></div>
41      <div class="ball" id="st7"></div>
42    </div>
43
44  </body>
45</html>

css
1文字数の関係で省略しました。上記にあるgithubのリンク先からダウンロードしていただけると幸いです。

javascript
1function al(){
2  alert("aaa");
3  document.getElementById('eid_date').innerHTML = Date();
4}
5
6function start(){
7  alert("aaa");
8    timer.style.width = "0px";　// ←widthを0pxにすることで減っていくアニメーションが始まる。
9}
10
11function stop(){
12    var timer = document.getElementById("timer");
13    var a = timer.offsetWidth;
14    alert(a);
15    timer.style.width = a + "px"; // ←停止の為に、現在の幅をwidthに与える。
16}
17
18
19var toggle = 0;
20
21function AnimeCont(){
22  if(toggle == 0){
23
24    $(".ball:eq(0)").css("animation-play-state","paused");
25    $(".ball:eq(1)").css("animation-play-state","paused");
26    $(".ball:eq(2)").css("animation-play-state","paused");
27    $(".ball:eq(3)").css("animation-play-state","paused");
28    $(".ball:eq(4)").css("animation-play-state","paused");
29    $(".ball:eq(5)").css("animation-play-state","paused");
30    $(".ball:eq(6)").css("animation-play-state","paused");
31
32    toggle = 1;
33  }
34
35  else{
36    $(".ball:eq(0)").css("animation-play-state","running");
37    $(".ball:eq(1)").css("animation-play-state","running");
38    $(".ball:eq(2)").css("animation-play-state","running");
39    $(".ball:eq(3)").css("animation-play-state","running");
40    $(".ball:eq(4)").css("animation-play-state","running");
41    $(".ball:eq(5)").css("animation-play-state","running");
42    $(".ball:eq(6)").css("animation-play-state","running");
43
44    toggle = 0;
45  }
46}

プログラムの説明

1：Javascript、server.js
2: HTTP用のhtml,一枚目(index)
3: HTTPS用のhtml,一枚目(index)
4: HTTP用のhtml,二枚目(next)
5: HTTPS用のhtml,二枚目(next)
6: cssファイル。二枚目のhtmlファイルで使用
7: javascript。二枚目のhtmlファイルで使用

全ファイルの階層は以下の写真のようになっています（一部使用していないファイルが混ざっています。）