'K8S Ingress for NodeJs Simple WebApp With Javascript
My Ingress does not forward the Css and JS files .
I have my index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Guess My Number!</title>
</head>
<body>
<header>
<h1>Guess My Number!</h1>
<p class="between">(Between 1 and 20)</p>
<button class="btn again">Again!</button>
<div class="number">?</div>
</header>
<main>
<section class="left">
<input type="number" class="guess" />
<button class="btn check">Check!</button>
</section>
<section class="right">
<p class="message">Start guessing...</p>
<p class="label-score">💯 Score: <span class="score">20</span></p>
<p class="label-highscore">
🥇 Highscore: <span class="highscore">0</span>
</p>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
Some style.css File , and the app.js ( nodejs webapp )
var http = require('http');
var fs = require('fs');
var path = require('path');
http.createServer(function (request, response) {
console.log('request ', request.url);
var filePath = '.' + request.url;
if (filePath == './') {
filePath = './index.html';
}
var extname = String(path.extname(filePath)).toLowerCase();
var mimeTypes = {
'.html': 'text/html',
'.js': 'text/javascript',
'.css': 'text/css',
'.json': 'application/json',
'.png': 'image/png',
'.jpg': 'image/jpg',
'.gif': 'image/gif',
'.svg': 'image/svg+xml',
'.wav': 'audio/wav',
'.mp4': 'video/mp4',
'.woff': 'application/font-woff',
'.ttf': 'application/font-ttf',
'.eot': 'application/vnd.ms-fontobject',
'.otf': 'application/font-otf',
'.wasm': 'application/wasm'
};
var contentType = mimeTypes[extname] || 'application/octet-stream';
fs.readFile(filePath, function(error, content) {
if (error) {
if(error.code == 'ENOENT') {
fs.readFile('./404.html', function(error, content) {
response.writeHead(404, { 'Content-Type': 'text/html' });
response.end(content, 'utf-8');
});
}
else {
response.writeHead(500);
response.end('Sorry, check with the site admin for error: '+error.code+' ..\n');
}
}
else {
response.writeHead(200, { 'Content-Type': contentType });
response.end(content, 'utf-8');
}
});
}).listen(8122);
console.log('Server running at http://127.0.0.1:8122/');
in k8s ( running on minikube ) I have ingress.yaml
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
namespace: games
name: games-ingress
annotations:
nginx.ingress.kubernetes.io/rewrite-target: /$1
ingress.kubernetes.io/add-base-url: "true"
spec:
rules:
- host: guessgame.co.il
http:
paths:
- path: /
pathType: Prefix
backend:
service:
name: guessthenumber-service
port:
number: 8122
when i go to the website i get only the index.html without the css and JS
here the logs of the Ingress when i access the site
172.17.0.1 - - [05/Mar/2022:17:55:03 +0000] "GET / HTTP/1.1" 200 1013 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36" 448 0.003 [games-guessthenumber-service-8122] [] 172.17.0.5:8122 1013 0.004 200 98c9fcaba9d736a181bd3e207b00bf8e
172.17.0.1 - - [05/Mar/2022:17:55:03 +0000] "GET /style.css HTTP/1.1" 200 1013 "http://guessgame.co.il/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36" 344 0.003 [games-guessthenumber-service-8122] [] 172.17.0.5:8122 1013 0.003 200 13b1e5bed188b938e6f0832c97334c50
172.17.0.1 - - [05/Mar/2022:17:55:03 +0000] "GET /script.js HTTP/1.1" 200 1013 "http://guessgame.co.il/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36" 329 0.005 [games-guessthenumber-service-8122] [] 172.17.0.5:8122 1013 0.005 200 d271abc7aae46b47a7919aa3f0449639
172.17.0.1 - - [05/Mar/2022:17:55:03 +0000] "GET /favicon.ico HTTP/1.1" 200 1013 "http://guessgame.co.il/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36" 392 0.002 [games-guessthenumber-service-8122] [] 172.17.0.5:8122 1013 0.002 200 e219774f1537cbed3d9f7b93ccf19afc172.17.0.1 - - [05/Mar/2022:17:55:03 +0000] "GET / HTTP/1.1" 200 1013 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36" 448 0.003 [games-guessthenumber-service-8122] [] 172.17.0.5:8122 1013 0.004 200 98c9fcaba9d736a181bd3e207b00bf8e
172.17.0.1 - - [05/Mar/2022:17:55:03 +0000] "GET /style.css HTTP/1.1" 200 1013 "http://guessgame.co.il/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36" 344 0.003 [games-guessthenumber-service-8122] [] 172.17.0.5:8122 1013 0.003 200 13b1e5bed188b938e6f0832c97334c50
172.17.0.1 - - [05/Mar/2022:17:55:03 +0000] "GET /script.js HTTP/1.1" 200 1013 "http://guessgame.co.il/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36" 329 0.005 [games-guessthenumber-service-8122] [] 172.17.0.5:8122 1013 0.005 200 d271abc7aae46b47a7919aa3f0449639
172.17.0.1 - - [05/Mar/2022:17:55:03 +0000] "GET /favicon.ico HTTP/1.1" 200 1013 "http://guessgame.co.il/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36" 392 0.002 [games-guessthenumber-service-8122] [] 172.17.0.5:8122 1013 0.002 200 e219774f1537cbed3d9f7b93ccf19afc
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|