节点上的静态Web部署。不使用任何框架的JS

时间:2021-05-30 18:27:45

On my local machine, I want to deploy static Web pages (containing HTML, CSS, JS files) on Node, without using any framework (e.g., Express). I did put the Web page related files into the public folder, and then call the index.html, by using the fs library in node, as the following:

在我的本地机器上,我想在节点上部署静态Web页面(包含HTML、CSS、JS文件),而不使用任何框架(如Express)。我确实将网页相关的文件放入公用文件夹,然后调用索引。html,使用节点中的fs库,如下:

var http = require('http'), fs = require('fs');

fs.readFile('./public/index.html', function (err, html) {
  if (err) { throw err;}
  http.createServer(function(request, response) {
    response.writeHeader(200, {"Content-Type": "text/html"});
    response.write(html); response.end();
   }).listen(1337, '127.0.0.1');;
});

I used CURL and all the files (HTML, CSS, JS) are in fact deployed on the localhost. However, when I go to the port 1337 on the localhost, it shows the HTML contents but doesn't show the behavior, written in JS, imported in the index.html.

我使用了CURL,所有文件(HTML、CSS、JS)实际上都部署在本地主机上。但是,当我访问localhost的端口1337时,它显示了HTML内容,但是没有显示在index.html中导入的用JS编写的行为。

1 个解决方案

#1


3  

Your index.html file is making a separate request to index.js (or whatever the JS file is / files are). Your server will handle every response the same way: serve the contents of the index.html file.

你的指数。html文件正在对索引发出单独的请求。js(或任何js文件/文件)。您的服务器将以相同的方式处理每个响应:服务索引的内容。html文件。

Creating a server in this way does not automatically serve files from the file system like other servers such as Apache might. Instead, you would need to do something like:

以这种方式创建服务器不会像其他服务器(如Apache)那样自动地为文件系统中的文件提供服务。相反,你需要做一些类似的事情:

http.createServer(function(request, response) {
  if (request.url == "/index.html" || request.url == "/") {
    response.writeHeader(200, {"Content-Type": "text/html"});
    fs.createReadStream("./public/index.html").pipe(response);
  }
  else if (request.url == "/index.js") {
    response.writeHeader(200, {"Content-Type": "text/javascript"});
    fs.createReadStream("./public/index.js").pipe(response);
  }
}).listen(1337, '127.0.0.1');

Of course writing a route for each file in the file system that you want to serve is probably pretty silly. You could use a static file server module, or implement a static file server yourself. This would involve checking the file system based on the request URL and then serving the file with the correct content type which you can look up using a module like mime.

当然,为您想要服务的文件系统中的每个文件编写路由可能相当愚蠢。您可以使用静态文件服务器模块,或者自己实现静态文件服务器。这将涉及基于请求URL检查文件系统,然后使用正确的内容类型为文件提供服务,您可以使用类似mime的模块查找这些内容类型。

#1


3  

Your index.html file is making a separate request to index.js (or whatever the JS file is / files are). Your server will handle every response the same way: serve the contents of the index.html file.

你的指数。html文件正在对索引发出单独的请求。js(或任何js文件/文件)。您的服务器将以相同的方式处理每个响应:服务索引的内容。html文件。

Creating a server in this way does not automatically serve files from the file system like other servers such as Apache might. Instead, you would need to do something like:

以这种方式创建服务器不会像其他服务器(如Apache)那样自动地为文件系统中的文件提供服务。相反,你需要做一些类似的事情:

http.createServer(function(request, response) {
  if (request.url == "/index.html" || request.url == "/") {
    response.writeHeader(200, {"Content-Type": "text/html"});
    fs.createReadStream("./public/index.html").pipe(response);
  }
  else if (request.url == "/index.js") {
    response.writeHeader(200, {"Content-Type": "text/javascript"});
    fs.createReadStream("./public/index.js").pipe(response);
  }
}).listen(1337, '127.0.0.1');

Of course writing a route for each file in the file system that you want to serve is probably pretty silly. You could use a static file server module, or implement a static file server yourself. This would involve checking the file system based on the request URL and then serving the file with the correct content type which you can look up using a module like mime.

当然,为您想要服务的文件系统中的每个文件编写路由可能相当愚蠢。您可以使用静态文件服务器模块,或者自己实现静态文件服务器。这将涉及基于请求URL检查文件系统,然后使用正确的内容类型为文件提供服务,您可以使用类似mime的模块查找这些内容类型。