Node.js에서 기본 HTML 로드

Node.js에서 기본 HTML 로드

기본 HTML 파일을 로드하고 렌더링하여 다음과 같은 코드를 작성할 필요가 없도록 하려고 합니다.

response.write('...<p>blahblahblah</p>...');

저는 fs 라이브러리를 사용하는 한 가지 방법을 찾았습니다.그래도 이게 제일 깨끗한지는 잘 모르겠어요.

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


fs.readFile('./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(8000);
});

기본 개념은 raw file read and dumping 내용입니다.그래도 더 깨끗한 옵션을 선택할 수 있습니다!

app.get을 사용하여 html 파일을 가져옵니다.간단합니다!

const express = require('express');
const app = express();

app.get('/', function(request, response){
    response.sendFile('absolutePathToYour/htmlPage.html');
});

그것은 그것처럼 간단합니다.이 경우 익스프레스 모듈을 사용합니다.익스프레스 설치:npm install -g express

fs 개체를 사용하여 수동으로 파일을 에코할 수 있지만 Express를 사용하는 것이 좋습니다.당신의 삶을 훨씬 더 편하게 해주는 JS 프레임워크.

...하지만 만약 당신이 어려운 방법을 고집한다면,

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

http.createServer(function(req, res){
    fs.readFile('test.html',function (err, data){
        res.writeHead(200, {'Content-Type': 'text/html','Content-Length':data.length});
        res.write(data);
        res.end();
    });
}).listen(8000);

이것이 오래된 질문이라는 것을 알지만, 아무도 그것을 언급하지 않았기 때문에 저는 그것이 추가할 가치가 있다고 생각했습니다.

문자 그대로 정적 콘텐츠(예: '정보' 페이지, 이미지, CSS 등)를 제공하려면 정적 콘텐츠 서비스 모듈(예: 노드 정적) 중 하나를 사용할 수 있습니다.(더 좋을 수도 있고 더 좋을 수도 있습니다 - search.npmjs.org 을 사용해 보세요.)약간의 사전 처리를 통해 정적 페이지에서 동적 페이지를 필터링하여 올바른 요청 처리기로 보낼 수 있습니다.

fs.readFile과 같은 메모리에 파일을 모두 로드하는 것보다 파일을 스트리밍하는 것이 더 나을 수 있습니다.

var http = require('http');
var fs = require('fs');
var path = require('path');
var ext = /[\w\d_-]+\.[\w\d]+$/;

http.createServer(function(req, res){
    if (req.url === '/') {
        res.writeHead(200, {'Content-Type': 'text/html'});
        fs.createReadStream('index.html').pipe(res);
    } else if (ext.test(req.url)) {
        fs.exists(path.join(__dirname, req.url), function (exists) {
            if (exists) {
                res.writeHead(200, {'Content-Type': 'text/html'});
                fs.createReadStream('index.html').pipe(res);
            } else {
                res.writeHead(404, {'Content-Type': 'text/html'});
                fs.createReadStream('404.html').pipe(res);
        });
    } else {
        //  add a RESTful service
    }
}).listen(8000);

보다 유연하고 간편한 사용 방법입니다.pipe방법.

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

http.createServer(function(request, response) {
  response.writeHead(200, {'Content-Type': 'text/html'});

  var file = fs.createReadStream('index.html');
  file.pipe(response);

}).listen(8080);

console.log('listening on port 8080...');

무함마드 네스와인의 답변에 대한 업데이트입니다.

Express 4.x에서는 sendfile이 더 이상 사용되지 않으며 sendFile 함수를 사용해야 합니다.차이점은 sendfile은 상대 경로를 사용하고 sendFile은 절대 경로를 사용한다는 것입니다.따라서 __dirname은 경로의 하드 코딩을 방지하기 위해 사용됩니다.

var express = require('express');
var app = express();
var path = require("path");

app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname + '/folder_name/filename.html'));
});

내가 배운 가장 좋은 방법은 express로 html 파일과 함께 express를 사용하는 것입니다.또한 당신이 원한다면 그것을 헤로쿠 플랫폼으로 확장할 수 있습니다.그냥 하는 말 :)

var express = require("express");
var app     = express();
var path    = require("path");


app.get('/',function(req,res){
  res.sendFile(path.join(__dirname+'/index.html'));
});

app.listen(3000);



console.log("Running at Port 3000");

깨끗하고 최고의..!!!

파이프를 사용하면 정말 간단합니다.다음은 server.js 코드 스니펫입니다.

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

function onRequest(req, res){

    console.log("USER MADE A REQUEST. " +req.url);
    res.writeHead(200, {'Content-Type': 'text/html'});
    var readStream = fs.createReadStream(__dirname + '/index.html','utf8'); 
    
/*include your html file and directory name instead of <<__dirname + '/index.html'>>*/

    readStream.pipe(res);

}

http.createServer(onRequest).listen(7000);
console.log('Web Server is running...');

쉽게 할 수 있는 방법은 index.html을 포함한 모든 파일이나 CSS, JS 등과 같은 모든 리소스가 포함된 파일을 공용 폴더에 넣거나 원하는 이름으로 지정할 수 있으며 이제 express js를 사용하고 앱에 _dirname을 다음과 같이 사용하도록 말할 수 있습니다.

express를 사용하여 server.js에서 다음을 추가합니다.

var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));

그리고 별도의 디렉토리에서 공용 디렉토리 아래에 새 dir를 추가하고 해당 경로 "/public/YourDirName"을 사용하려면

그래서 우리가 여기서 정확히 무엇을 하고 있습니까?우리는 앱이라는 이름의 빠른 인스턴스를 만들고 있으며 모든 리소스에 액세스할 수 있는 공용 디렉터리의 주소를 제공하고 있습니다.이것이 도움이 되길 바랍니다!

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

  http.createServer(function(request, response) {  
    response.writeHeader(200, {"Content-Type": "text/html"});  
    var readSream = fs.createReadStream('index.html','utf8')
    readSream.pipe(response);
  }).listen(3000);

 console.log("server is running on port number ");

익스프레스 모듈을 사용하는 것은 어떻습니까?

    var app = require('express')();

    app.get('/',function(request,response){
       response.sendFile(__dirname+'/XXX.html');
    });

    app.listen('8000');

그런 다음 브라우저를 사용하여 /localhost:8000을 가져올 수 있습니다.

서버를 실행하는 URL이 표시되므로 이 옵션이 더 좋을 것 같습니다.

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

const hostname = '<your_machine_IP>';
const port = 3000;

const html=fs.readFile('./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(port, hostname, () => {
            console.log(`Server running at http://${hostname}:${port}/`);
        })
}); 

다음 스니펫을 사용할 수도 있습니다.

var app = require("express");
app.get('/', function(req,res){
   res.sendFile(__dirname+'./dir/yourfile.html')
});
app.listen(3000);

연결이나 익스프레스를 사용하지 않고 http 모듈을 사용하려면 간단한 파일 서버 유틸리티가 필요합니다.

var fileServer = require('./fileServer');
var http = require('http');
http.createServer(function(req, res) {
   var file = __dirname + req.url;
   if(req.url === '/') {
       // serve index.html on root 
       file = __dirname + 'index.html'
   }
   // serve all other files echoed by index.html e.g. style.css
   // callback is optional
   fileServer(file, req, res, callback);

})
module.exports = function(file, req, res, callback) {
    var fs = require('fs')
        , ext = require('path').extname(file)
        , type = ''
        , fileExtensions = {
            'html':'text/html',
            'css':'text/css',
            'js':'text/javascript',
            'json':'application/json',
            'png':'image/png',
            'jpg':'image/jpg',
            'wav':'audio/wav'
        }
    console.log('req    '+req.url)
    for(var i in fileExtensions) {
       if(ext === i) {    
          type = fileExtensions[i]
          break
       }
    }
    fs.exists(file, function(exists) {
       if(exists) {
          res.writeHead(200, { 'Content-Type': type })
          fs.createReadStream(file).pipe(res)
          console.log('served  '+req.url)
          if(callback !== undefined) callback()
       } else {
          console.log(file,'file dne')
         }  
    })
}

이건 꽤 오래된 질문입니다...하지만 여기서 사용 사례가 특정 HTML 페이지를 임시로 브라우저에 보내는 것이라면, 저는 다음과 같은 간단한 것을 사용할 것입니다.

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

var server = http.createServer(function(req, res){
  var stream = fs.createReadStream('test.html');
  stream.pipe(res);
});
server.listen(7000);

옥 대신에 ejs를 사용합니다.

npm install ejs

app.js

app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

./sys/index.js

exports.index = function(req, res){
res.render('index', { title: 'ejs' });};

할 수 있습니다.end방법

response.end('...<p>blahblahblah</p>...')

와 같습니다.

response.write('...<p>blahblahblah</p>...')
response.end()

Express를 사용하여 기본 HTML 파일을 로드하고 노드로 렌더링할 수 있습니다.이것은 가는 데 약 10분 정도 걸립니다.이것은 http.createServer()에 연결되어 있으므로 여전히 노드 영역에 있고 쉽게 제거할 수 있습니다.

// app.js
const path = require('path');
const express = require('express');

const app = express();
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', express.static('index.html'));
app.use('/test', express.static('test.html'));

module.exports = app;

// server.js
const http = require('http');
const PORT = process.env.PORT || 3000;

const appServer = require('./app');
const httpServer = http.createServer(appServer);

httpServer.listen(PORT);
console.log(`Listening on port ${PORT}...`);

다른 옵션 추가 - 예외적인 답변을 기반으로 합니다.

유형 스크립트의 경우

import { Injectable } from '@nestjs/common';
import { parse } from 'node-html-parser';
import * as fs from 'fs';
import * as path from 'path'


@Injectable()
export class HtmlParserService {


  getDocument(id: string): string {

      const htmlRAW = fs.readFileSync(
          path.join(__dirname, "../assets/files/some_file.html"),
          "utf8"
      );


      const parsedHtml = parse(htmlRAW);
      const className  = '.'+id;
      
      //Debug
      //console.log(parsedHtml.querySelectorAll(className));

      return parsedHtml.querySelectorAll(className).toString();
  }
}

(*) 위의 예는 nestjs 및 node-html-parser와 함께 사용하는 것입니다.

이것을 사용해 보십시오.

var http = require('http');
var fs = require('fs');
var PORT = 8080;

http.createServer((req, res) => {
    fs.readFile('./' + req.url, (err, data) => {
        if (!err) {
            var dotoffset = req.url.lastIndexOf('.');
            var mimetype = dotoffset == -1 ? 'text/plaint' : {
                '.html': 'text/html',
                '.css': 'text/css',
                '.js': 'text/javascript',
                '.jpg': 'image/jpeg',
                '.png': 'image/png',
                '.ico': 'image/x-icon',
                '.gif': 'image/gif'
            }[ req.url.substr(dotoffset) ];
            res.setHeader('Content-Type', mimetype);
            res.end(data);
            console.log(req.url, mimetype);
        } else {
            console.log('File not fount: ' + req.url);
            res.writeHead(404, "Not Found");
            res.end();
        }
    });
 }).listen(PORT);

이를 통해 링크할 때 js, css 소스 코드를 포함할 수 있으며 아이콘, imgs, gif를 로드할 수 있습니다.그리고 당신이 원한다면, 필요하다면 더 추가할 수 있습니다.

우리는 연결 프레임워크로 html 문서를 로드할 수 있습니다.저는 아래의 코드와 노드 모듈이 있는 프로젝트의 공용 폴더에 제 html 문서와 관련 이미지를 배치했습니다.

//server.js
var http=require('http');
var connect=require('connect');

var app = connect()
  .use(connect.logger('dev'))
  .use(connect.static('public'))
  .use(function(req, res){
   res.end('hello world\n');
 })

http.createServer(app).listen(3000);

readFile() 메서드 offs를 시도했지만 이미지를 로드하지 못해서 연결 프레임워크를 사용했습니다.

https://gist.github.com/xgqfrms-GitHub/7697d5975bdffe8d474ac19ef906e906

다음은 Express 서버를 사용한 호스트 정적 HTML 파일에 대한 간단한 데모 코드입니다!

그것이 당신에게 도움이 되기를 바랍니다!

// simple express server for HTML pages!
// ES6 style

const express = require('express');
const fs = require('fs');
const hostname = '127.0.0.1';
const port = 3000;
const app = express();

let cache = [];// Array is OK!
cache[0] = fs.readFileSync( __dirname + '/index.html');
cache[1] = fs.readFileSync( __dirname + '/views/testview.html');

app.get('/', (req, res) => {
    res.setHeader('Content-Type', 'text/html');
    res.send( cache[0] );
});

app.get('/test', (req, res) => {
    res.setHeader('Content-Type', 'text/html');
    res.send( cache[1] );
});

app.listen(port, () => {
    console.log(`
        Server is running at http://${hostname}:${port}/ 
        Server hostname ${hostname} is listening on port ${port}!
    `);
});

var http = require('http');
var fs = require('fs');            //required to readfile

http.createServer(function(req, response){
    fs.readFile('index.html',function (err, data){
        response.writeHead(200);
        response.write(data);
        response.end();
    });
}).listen(8000);
//   #just use express lol

index.dll은 HTML 파일의 이름입니다.

언급URL : https://stackoverflow.com/questions/4720343/loading-basic-html-in-node-js