Node.js를 단순 웹 서버로 사용
나는 매우 간단한 HTTP 서버를 실행하고 싶습니다.은 든모요청대상상대▁every청▁to든.example.com을 받아야 합니다.index.html일반 HTML 페이지(즉, 일반 웹 페이지를 읽을 때와 동일한 경험)로 제공됩니다.
의 코드를 저는 코드사다내읽수있다습니을용을음의 수 .index.html를 어떻게 합니까?index.html일반 웹 페이지로?
var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end(index);
}).listen(9615);
아래의 한 가지 제안은 복잡하며 제가 다음을 작성해야 합니다.get사용할 각 리소스(CSS, JavaScript, 이미지) 파일에 대한 줄입니다.
어떻게 하면 일부 이미지, CSS 및 자바스크립트로 단일 HTML 페이지를 서비스할 수 있습니까?
가장 단순한 Node.js 서버는 다음과 같습니다.
$ npm install http-server -g
이제 다음 명령을 통해 서버를 실행할 수 있습니다.
$ cd MyApp
$ http-server
5을 사용하는 NPM 5.2.0을 할 수 .http-server과 함께 설치하지 npx이는 운영 환경에서는 권장되지 않지만 로컬 호스트에서 서버를 신속하게 실행할 수 있는 좋은 방법입니다.
$ npx http-server
보안 및 사용자 환경 문제로 인해 패키지 이름이 잘못 입력되지 않도록 하려면 npx에서 메시지를 표시한 후 설치합니다.-y 또는 --yes 옵션을 사용하여 이 프롬프트를 표시하지 않을 수 있습니다.
$ npx -y http-server
또는 웹 브라우저를 열고 CORS 요청을 활성화하는 다음과 같은 방법을 사용할 수 있습니다.
$ http-server -o --cors
추가 옵션을 보려면 GitHub의 설명서를 참조하거나 다음을 실행하십시오.
$ http-server --help
NodeJitsu에는 많은 다른 멋진 기능과 두뇌를 사용하는 단순한 배포 기능이 있습니다.
피쳐 포크
물론 자신의 포크로 기능을 쉽게 보충할 수 있습니다.이 프로젝트의 기존 800개 이상의 포크 중 하나에서 이미 수행되었음을 알 수 있습니다.
라이트 서버:자동 업데이트/교체 대안
의 좋은 .http-server는 파일 보기, 자동 새로 고침 및 기타 많은 기능을 지원합니다.
$ npm install -g light-server
$ light-server
Windows 탐색기에서 디렉토리의 상황에 맞는 메뉴에 추가
reg.exe add HKCR\Directory\shell\LightServer\command /ve /t REG_EXPAND_SZ /f /d "\"C:\nodejs\light-server.cmd\" \"-o\" \"-s\" \"%V\""
단순 JSON REST 서버
프로토타입 프로젝트를 위해 간단한 REST 서버를 생성해야 하는 경우 json-server가 필요할 수 있습니다.
편집기 자동 새로 고침
이제 대부분의 웹 페이지 편집기 및 IDE 도구에는 원본 파일을 감시하고 변경 시 웹 페이지를 자동으로 새로 고칠 수 있는 웹 서버가 포함되어 있습니다.
Visual Studio Code와 함께 Live Server를 사용합니다.
오픈 소스 텍스트 편집기 브래킷에는 노드도 포함됩니다.JS 정적 웹 서버입니다.괄호 안에 있는 HTML 파일을 열고 "라이브 미리보기"를 누르면 정적 서버가 시작되고 페이지에서 브라우저가 열립니다.HTML 파일을 편집하고 저장할 때마다 브라우저가 자동으로 새로 고쳐집니다.적응형 웹 사이트를 테스트할 때 특히 유용합니다.여러 브라우저/창 크기/장치에서 HTML 페이지를 엽니다.HTML 페이지를 저장하고 적응형 항목이 모두 자동으로 새로 고쳐질 때 즉시 작동하는지 확인합니다.
웹 / SPA / PWA / 모바일 / 데스크톱 / 브라우저 Ext 웹 개발자
일부 SPA 프레임워크에는 소스 파일 변경을 감지하고 SPA 또는 PWA 웹 앱의 증분 재구성 및 패치(핫 다시 로드라고 함)를 트리거할 수 있는 웹 팩 DevServer의 내장 버전이 포함되어 있습니다.이를 수행할 수 있는 몇 가지 인기 있는 SPA 프레임워크가 있습니다.
VueJS 개발자
VueJS 개발자들은 Quasar Framework를 선호하는데, 이 프레임워크에는 서버 측 렌더링(SSR)을 지원하는 스위치와 CORS 문제를 해결하기 위한 프록시 규칙이 포함되어 있습니다.모바일과 데스크톱 모두에 맞게 설계된 최적화된 구성요소가 다수 포함되어 있습니다.이를 통해 모든 플랫폼(SPA, SPA+SSR, PWA, PWA+SSR, Cordova 및 Capacitor Mobile AppStore 앱, Electron Desktop Node+VueJS 앱 및 브라우저 확장)을 위한 하나의 앱을 구축할 수 있습니다.
또 다른 인기 있는 것은 정적 HTML/CSS 코드 생성뿐만 아니라 다른 UI 구성 요소 제품군에 대한 플러그인이 있는 SSR 또는 no-SSR 빌드 모드도 지원하는 NuxtJS입니다.
React Framework 개발자
ReactJS 개발자가 핫 다시 로드를 설정할 수도 있습니다.
Cordova/Capacitor + Ionic Framework 개발자
Iconic은 이제 VueJS, React 및 Angular 개발을 지원하는 모바일 전용 하이브리드 구성요소 프레임워크입니다.자동 새로 고침 기능이 있는 로컬 서버는ionic 구도를 합니다. 그냥 뛰어요.ionic serve사용자의 앱 폴더에서.더욱 좋은 것은... iOS와 Android의 사이드 뷰를 나란히 자동으로 새로 고침할 수 있다는 것입니다.
참고: 이 답변은 2011년의 것입니다.하지만, 그것은 여전히 유효합니다.
Connect and ServStatic with Node.js를 사용하여 다음 작업을 수행할 수 있습니다.
NPM을 사용하여 connect 및 server-static 설치
$ npm install connect serve-static다음 내용으로 server.js 파일을 만듭니다.
var connect = require('connect'); var serveStatic = require('serve-static'); connect() .use(serveStatic(__dirname)) .listen(8080, () => console.log('Server running on 8080...'));Node.js로 실행
$ node server.js
이제 다음으로 이동할 수 있습니다.http://localhost:8080/yourfile.html
이 요지를 확인해 보세요.참고로 여기서 재현하고 있는데요, 요지가 정기적으로 업데이트되었습니다.
Node.JS 정적 파일 웹 서버입니다.임의의 디렉토리에 있는 서버를 실행할 경로에 저장하고 선택적 포트 인수를 사용합니다.
var http = require("http"),
url = require("url"),
path = require("path"),
fs = require("fs"),
port = process.argv[2] || 8888;
http.createServer(function(request, response) {
var uri = url.parse(request.url).pathname
, filename = path.join(process.cwd(), uri);
fs.exists(filename, function(exists) {
if(!exists) {
response.writeHead(404, {"Content-Type": "text/plain"});
response.write("404 Not Found\n");
response.end();
return;
}
if (fs.statSync(filename).isDirectory()) filename += '/index.html';
fs.readFile(filename, "binary", function(err, file) {
if(err) {
response.writeHead(500, {"Content-Type": "text/plain"});
response.write(err + "\n");
response.end();
return;
}
response.writeHead(200);
response.write(file, "binary");
response.end();
});
});
}).listen(parseInt(port, 10));
console.log("Static file server running at\n => http://localhost:" + port + "/\nCTRL + C to shutdown");
갱신하다
Gist는 CSS와 Js 파일을 처리합니다.제가 직접 써봤어요.이진 모드에서 읽기/쓰기를 사용하는 것은 문제가 되지 않습니다.즉, 파일 라이브러리에서 파일이 텍스트로 해석되지 않으며 응답에 반환된 내용 유형과 관련이 없습니다.
코드의 문제는 항상 "텍스트/일반"의 내용 유형을 반환한다는 것입니다.위의 코드는 콘텐츠 유형을 반환하지 않지만 HTML, CSS 및 JS용으로만 사용하는 경우 브라우저에서 이를 추론할 수 있습니다.잘못된 내용 유형보다 나은 내용 유형은 없습니다.
일반적으로 내용 유형은 웹 서버의 구성입니다.그래서 이것이 당신의 문제를 해결하지 못한다면 미안하지만, 그것은 저에게 간단한 개발 서버로서 효과가 있었고 다른 사람들에게 도움이 될 것이라고 생각했습니다.응답에 올바른 내용 유형이 필요한 경우 조이트위들이 가지고 있는 것으로 명시적으로 정의하거나 Connect와 같은 적절한 기본값이 있는 라이브러리를 사용해야 합니다.이것의 좋은 점은 단순하고 독립적이라는 것입니다(의존성 없음).
하지만 저는 당신의 문제를 느낍니다.그래서 여기 결합된 해결책이 있습니다.
var http = require("http"),
url = require("url"),
path = require("path"),
fs = require("fs")
port = process.argv[2] || 8888;
http.createServer(function(request, response) {
var uri = url.parse(request.url).pathname
, filename = path.join(process.cwd(), uri);
var contentTypesByExtension = {
'.html': "text/html",
'.css': "text/css",
'.js': "text/javascript"
};
fs.exists(filename, function(exists) {
if(!exists) {
response.writeHead(404, {"Content-Type": "text/plain"});
response.write("404 Not Found\n");
response.end();
return;
}
if (fs.statSync(filename).isDirectory()) filename += '/index.html';
fs.readFile(filename, "binary", function(err, file) {
if(err) {
response.writeHead(500, {"Content-Type": "text/plain"});
response.write(err + "\n");
response.end();
return;
}
var headers = {};
var contentType = contentTypesByExtension[path.extname(filename)];
if (contentType) headers["Content-Type"] = contentType;
response.writeHead(200, headers);
response.write(file, "binary");
response.end();
});
});
}).listen(parseInt(port, 10));
console.log("Static file server running at\n => http://localhost:" + port + "/\nCTRL + C to shutdown");
급행은 필요 없습니다.연결할 필요가 없습니다.Node.js는 네이티브LY를 http합니다.요청에 따라 파일을 반환하기만 하면 됩니다.
var http = require('http')
var url = require('url')
var fs = require('fs')
http.createServer(function (request, response) {
var requestUrl = url.parse(request.url)
response.writeHead(200)
fs.createReadStream(requestUrl.pathname).pipe(response) // do NOT use fs's sync methods ANYWHERE on production (e.g readFileSync)
}).listen(9615)
요청이 기본 디렉터리 아래의 파일에 액세스할 수 없도록 하고 오류를 적절하게 처리하는 더 완전한 예:
var http = require('http')
var url = require('url')
var fs = require('fs')
var path = require('path')
var baseDirectory = __dirname // or whatever base directory you want
var port = 9615
http.createServer(function (request, response) {
try {
var requestUrl = url.parse(request.url)
// need to use path.normalize so people can't access directories underneath baseDirectory
var fsPath = baseDirectory+path.normalize(requestUrl.pathname)
var fileStream = fs.createReadStream(fsPath)
fileStream.pipe(response)
fileStream.on('open', function() {
response.writeHead(200)
})
fileStream.on('error',function(e) {
response.writeHead(404) // assume the file doesn't exist
response.end()
})
} catch(e) {
response.writeHead(500)
response.end() // end the response so browsers don't hang
console.log(e.stack)
}
}).listen(port)
console.log("listening on port "+port)
제 생각에 당신이 지금 놓치고 있는 부분은 당신이 보내는 것입니다:
Content-Type: text/plain
웹 브라우저에서 HTML을 렌더링하려면 다음으로 변경해야 합니다.
Content-Type: text/html
프롬프트 I FOLDER : 1단계:npm install express
2단계: 파일 서버를 만듭니다.js
var fs = require("fs");
var host = "127.0.0.1";
var port = 1337;
var express = require("express");
var app = express();
app.use(express.static(__dirname + "/public")); //use static files in ROOT/public folder
app.get("/", function(request, response){ //root dir
response.send("Hello!!");
});
app.listen(port, host);
WATCHFILE(또는 nodemon)도 추가해야 합니다.위 코드는 단순 연결 서버용입니다.
3단계:node server.js또는nodemon server.js
이제 단순 HTTP 서버를 호스트하기만 하면 더 쉬운 방법이 있습니다. npm install -g http-server
그리고 우리의 디렉토리와 유형을 엽니다.http-server
https://www.npmjs.org/package/http-server
빠른 방법:
var express = require('express');
var app = express();
app.use('/', express.static(__dirname + '/../public')); // ← adjust
app.listen(3000, function() { console.log('listening'); });
사용자 방식:
var http = require('http');
var fs = require('fs');
http.createServer(function (req, res) {
console.dir(req.url);
// will get you '/' or 'index.html' or 'css/styles.css' ...
// • you need to isolate extension
// • have a small mimetype lookup array/object
// • only there and then reading the file
// • delivering it after setting the right content type
res.writeHead(200, {'Content-Type': 'text/html'});
res.end('ok');
}).listen(3001);
switch 문을 다루는 것보다 사전에서 내용 유형을 찾는 것이 더 낫다고 생각합니다.
var contentTypesByExtension = {
'html': "text/html",
'js': "text/javascript"
};
...
var contentType = contentTypesByExtension[fileExtension] || 'text/plain';
셸에 입력하면 됩니다.
npx serve
담당자: https://github.com/zeit/serve .
간단한 서버를 실행하기 위해 npm 모듈을 사용할 필요가 없으며 노드를 위한 "npm Free Server"라는 매우 작은 라이브러리가 있습니다.
- 50줄의 코드
- 파일 또는 폴더를 요청하는 경우 출력
- 고장이 나거나 작동할 경우 빨간색 또는 녹색으로 표시합니다.
- 크기가 1KB 미만(최소화)
- 필요에 따라 조정할 수 있도록 완전히 설명됨
npm-free-server(GitHub)
이것은 기본적으로 connect version 3에 대해 승인된 답변의 업데이트된 버전입니다.
var connect = require('connect');
var serveStatic = require('serve-static');
var app = connect();
app.use(serveStatic(__dirname, {'index': ['index.html']}));
app.listen(3000);
index.html이 기본값으로 제공되도록 기본 옵션도 추가했습니다.
PC에 노드가 설치되어 있는 경우 NPM이 있을 수 있습니다. 노드가 필요하지 않은 경우JS 자료를 사용하면 다음과 같은 용도로 서버 패키지를 사용할 수 있습니다.
1 - PC에 패키지를 설치합니다.
npm install -g serve
2 - 정적 폴더 제공:
serve <path>
d:> serve d:\StaticSite
정적 폴더가 제공되는 포트가 표시됩니다. 다음과 같이 호스트로 이동하십시오.
http://localhost:3000
에서 당신에게. npm 서당신도될흥도만찾서다았을니습관운로미한움게이에.마임이라고 .npm install mime또는 https://github.com/broofa/node-mime) 을 사용하여 파일의 MIME 유형을 참조하십시오.다음은 이를 사용하여 작성한 웹 서버의 예입니다.
var mime = require("mime"),http = require("http"),fs = require("fs");
http.createServer(function (req, resp) {
path = unescape(__dirname + req.url)
var code = 200
if(fs.existsSync(path)) {
if(fs.lstatSync(path).isDirectory()) {
if(fs.existsSync(path+"index.html")) {
path += "index.html"
} else {
code = 403
resp.writeHead(code, {"Content-Type": "text/plain"});
resp.end(code+" "+http.STATUS_CODES[code]+" "+req.url);
}
}
resp.writeHead(code, {"Content-Type": mime.lookup(path)})
fs.readFile(path, function (e, r) {
resp.end(r);
})
} else {
code = 404
resp.writeHead(code, {"Content-Type":"text/plain"});
resp.end(code+" "+http.STATUS_CODES[code]+" "+req.url);
}
console.log("GET "+code+" "+http.STATUS_CODES[code]+" "+req.url)
}).listen(9000,"localhost");
console.log("Listening at http://localhost:9000")
이것은 일반 텍스트 또는 이미지 파일을 제공합니다(.html, .css, .js, .pdf, .jpg, .png, .m4a 및 .mp3는 제가 테스트한 확장자이지만 모든 것에 적합해야 한다는 이론입니다).
개발자 노트
다음은 이 제품과 함께 얻은 출력의 예입니다.
Listening at http://localhost:9000
GET 200 OK /cloud
GET 404 Not Found /cloud/favicon.ico
GET 200 OK /cloud/icon.png
GET 200 OK /
GET 200 OK /501.png
GET 200 OK /cloud/manifest.json
GET 200 OK /config.log
GET 200 OK /export1.png
GET 200 OK /Chrome3DGlasses.pdf
GET 200 OK /cloud
GET 200 OK /-1
GET 200 OK /Delta-Vs_for_inner_Solar_System.svg
에 하십시오.unescape경로 구성에서 기능합니다.이것은 공백과 인코딩된 문자를 포함하는 파일 이름을 허용하기 위한 것입니다.
편집:
Node.js 샘플 앱 Node Chat에는 원하는 기능이 있습니다.
README.textfile입니다.
단계는 당신이 찾고 있는 것입니다.
1단계
- 포트 8002에서 hello world로 응답하는 서버 생성
2단계
- index.dll을 생성하여 제공합니다.
3단계
- 효용을 도입합니다.제이에스
- 정적 파일이 제공되도록 로직 변경
- 파일을 찾을 수 없는 경우 404 표시
4단계
- jquery-1.4.2.js 추가
- client.js 추가
- index.vmdk를 변경하여 사용자에게 닉네임을 묻습니다.
var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
// change the to 'text/plain' to 'text/html' it will work as your index page
res.end(index);
}).listen(9615);
이걸 어디서 찾으시는 것 같군요.index.html에서 다음과 같이 일반 html 코드로 렌더링하기만 하면 됩니다.
<html>
<h1>Hello world</h1>
</html>
내가 하는 방법은 우선 노드 정적 서버를 전체적으로 설치하는 것입니다.
npm install node-static -g
있는 하여 html 파일을 저장하고 합니다.static.
하여 브우저여입력하동을 합니다.localhost:8080/"yourHtmlFile".
기본적으로 승인된 답변을 복사하지만 js 파일을 만들지 않습니다.
$ node
> var connect = require('connect'); connect().use(static('.')).listen(8000);
아주 편리하다고 생각했습니다.
갱신하다
Express의 최신 버전에서 serve-static은 별도의 미들웨어가 되었습니다.이 기능을 사용하여 다음을 수행합니다.
require('http').createServer(require('serve-static')('.')).listen(3000)
를 설치합니다.serve-static
아래 코드를 사용하여 Url에 언급된 파일이 없는 경우 기본 html 파일을 렌더링하는 간단한 웹 서버를 시작합니다.
var http = require('http'),
fs = require('fs'),
url = require('url'),
rootFolder = '/views/',
defaultFileName = '/views/5 Tips on improving Programming Logic Geek Files.htm';
http.createServer(function(req, res){
var fileName = url.parse(req.url).pathname;
// If no file name in Url, use default file name
fileName = (fileName == "/") ? defaultFileName : rootFolder + fileName;
fs.readFile(__dirname + decodeURIComponent(fileName), 'binary',function(err, content){
if (content != null && content != '' ){
res.writeHead(200,{'Content-Length':content.length});
res.write(content);
}
res.end();
});
}).listen(8800);
모든 html 컨텐츠와 함께 모든 j, css, 이미지 파일을 렌더링합니다.
"잘못된 내용보다 나은 내용 유형은 없습니다"라는 문구에 동의합니다.
w3dcs에서
요청된 파일을 제공하는 노드 서버를 만드는 것은 매우 쉬우며, 당신은 그것을 위한 패키지를 설치할 필요가 없습니다.
var http = require('http');
var url = require('url');
var fs = require('fs');
http.createServer(function (req, res) {
var q = url.parse(req.url, true);
var filename = "." + q.pathname;
fs.readFile(filename, function(err, data) {
if (err) {
res.writeHead(404, {'Content-Type': 'text/html'});
return res.end("404 Not Found");
}
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(data);
return res.end();
});
}).listen(8080);
http://localhost:8080/file.message
디스크에서 file.dll을 제공합니다.
var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'html'});
res.end(index);
}).listen(9615);
//Just Change The CONTENT TYPE to 'html'
이것이 정확히 당신이 원했던 것인지는 모르겠지만, 당신은 변경해 볼 수 있습니다.
{'Content-Type': 'text/plain'}
대상:
{'Content-Type': 'text/html'}
이렇게 하면 브라우저 클라이언트가 일반 텍스트 대신 html로 파일을 표시합니다.
Express 함수 sendFile은 사용자가 필요로 하는 것을 정확히 수행하며, 노드에서 웹 서버 기능을 원하는 경우 express는 자연스럽게 선택할 수 있으며 정적 파일을 제공하는 것이 다음과 같이 쉬워집니다.
res.sendFile('/path_to_your/index.html')
여기서 더 읽기: https://expressjs.com/en/api.html#res.sendFile
노드용 고속 웹 서버의 작은 예:
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(8080);
이를 실행하고 http://localhost:8080으로 이동합니다.
CSS 및 이미지와 같은 정적 파일을 제공할 수 있도록 확장하려면 다음과 같은 예가 있습니다.
var express = require('express');
var app = express();
var path = require('path');
app.use(express.static(__dirname + '/css'));
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/index.html'));
});
app.listen(8080);
그래서 css라는 하위 폴더를 만들고, 거기에 당신의 정적인 내용을 넣으면 다음과 같이 당신의 인덱스.dll에서 쉽게 참조할 수 있을 것입니다.
<link type="text/css" rel="stylesheet" href="/css/style.css" />
상대 경로(href)를 확인합니다!
voila!
조금 더 자세한 Express 4.x 버전이지만 디렉토리 목록, 압축, 캐싱 및 최소한의 줄에 기록 요청을 제공합니다.
var express = require('express');
var compress = require('compression');
var directory = require('serve-index');
var morgan = require('morgan'); //logging for express
var app = express();
var oneDay = 86400000;
app.use(compress());
app.use(morgan());
app.use(express.static('filesdir', { maxAge: oneDay }));
app.use(directory('filesdir', {'icons': true}))
app.listen(process.env.PORT || 8000);
console.log("Ready To serve files !")
엄청난 양의 복잡한 답들이 여기에 있습니다.노드를 처리할 의사가 없는 경우JS 파일/데이터베이스를 제공하지만 질문이 제안하는 대로 정적 html/css/js/images를 제공하고 싶다면 푸시 상태 서버 모듈이나 유사한 모듈을 설치하면 됩니다.
여기 미니 사이트를 만들고 시작할 "원 라이너"가 있습니다.터미널에 있는 전체 블록을 적절한 디렉토리에 붙여넣기만 하면 됩니다.
mkdir mysite; \
cd mysite; \
npm install pushstate-server --save; \
mkdir app; \
touch app/index.html; \
echo '<h1>Hello World</h1>' > app/index.html; \
touch server.js; \
echo "var server = require('pushstate-server');server.start({ port: 3000, directory: './app' });" > server.js; \
node server.js
브라우저를 열고 http://localhost:3000으로 이동합니다.다 했어요.
는 서는다사다니합을 합니다.app파일을 제공할 루트로서의 dir.추가 자산을 추가하려면 해당 디렉토리 내에 자산을 배치합니다.
이미 간단한 솔루션을 위한 몇 가지 훌륭한 솔루션이 있습니다.nodejs server필요한 경우 한 가지 솔루션이 더 있습니다.live-reloading파일을 변경했습니다.
npm install lite-server -g
디렉토리를 탐색하고 수행
lite-server
라이브 스트리밍으로 브라우저를 열 것입니다.
제가 본 더 간단한 버전은 다음과 같습니다.교육 목적으로는 추상적인 라이브러리를 사용하지 않기 때문에 가장 좋습니다.
var http = require('http'),
url = require('url'),
path = require('path'),
fs = require('fs');
var mimeTypes = {
"html": "text/html",
"mp3":"audio/mpeg",
"mp4":"video/mp4",
"jpeg": "image/jpeg",
"jpg": "image/jpeg",
"png": "image/png",
"js": "text/javascript",
"css": "text/css"};
http.createServer(function(req, res) {
var uri = url.parse(req.url).pathname;
var filename = path.join(process.cwd(), uri);
fs.exists(filename, function(exists) {
if(!exists) {
console.log("not exists: " + filename);
res.writeHead(200, {'Content-Type': 'text/plain'});
res.write('404 Not Found\n');
res.end();
return;
}
var mimeType = mimeTypes[path.extname(filename).split(".")[1]];
res.writeHead(200, {'Content-Type':mimeType});
var fileStream = fs.createReadStream(filename);
fileStream.pipe(res);
}); //end path.exists
}).listen(1337);
이제 브라우저로 이동하여 다음을 엽니다.
http://127.0.0.1/image.jpg
여기서image.jpg이 파일과 동일한 디렉토리에 있어야 합니다.이것이 누군가에게 도움이 되기를 바랍니다 :)
로컬 웹 서버는 확실히 볼 가치가 있습니다!다음은 낭독회에서 발췌한 내용입니다.
로컬 웹 서버
신속한 전체 스택 개발을 위한 간소화된 모듈식 웹 서버.
- HTTP, HTTPS 및 HTTP2를 지원합니다.
- 소형 및 100% 개인 설정 가능.프로젝트에 필요한 동작만 로드하여 사용합니다.
- 사용자 정의 보기를 첨부하여 활동을 시각화하는 방법을 개인화합니다.
- 프로그래밍 및 명령줄 인터페이스.
이 도구를 사용하여 다음 작업을 수행합니다.
- 모든 유형의 프런트 엔드 웹 애플리케이션(정적, 동적, 단일 페이지 앱, Progressive Web 앱, React 등)을 구축합니다.
- 백엔드 서비스(REST API, 마이크로서비스, 웹소켓, 서버 전송 이벤트 서비스 등)를 프로토타입화합니다.
- 활동 모니터링, 성능 분석, 캐싱 전략 실험 등
로컬 웹 서버는 유용한 미들웨어의 "시작 팩"과 함께 번들된 lws 배포판입니다.
시놉시스
는 이패는설다니합을 합니다.ws명령줄 도구(사용 설명서 참조).
정적 웹 사이트
중입니다.ws인수 없이 현재 디렉터리를 정적 웹 사이트로 호스팅합니다. 사용자의 디렉토리 목록이 .index.html해당 파일이 존재하는 경우.
$ ws
Listening on http://mbp.local:8000, http://127.0.0.1:8000, http://192.168.0.100:8000
정적 파일 자습서.
과 몇 형식인 이영동은정몇가로출형보다여니줍식을력그지호과적스상팅▁output▁-▁staticates▁plus▁formats▁this▁hosting▁a▁demonstr▁log▁couple를 보여줍니다.dev그리고.stats.
단일 페이지 응용프로그램
단일 페이지 응용 프로그램(예: Reactor Angular 응용 프로그램)을 제공하는 것은 단일 페이지의 이름을 지정하는 것만큼 간단합니다.
$ ws --spa index.html
경로 정사적예이일경인반적 SPA 경로)에 대한 /user/1,/login) 다시 돌아올 것입니다.404 Not Found해당 위치에 있는 파일이 존재하지 않기 때문입니다. 그나표 의에해를 index.htmlSPA로 다음 규칙을 만듭니다.
" " " " " "/css/style.css) 그런 다음 제공합니다(예: 그렇지 않은 경우)./login그런 다음 지정된 SPA를 서비스하고 클라이언트 측 경로를 처리합니다.
SPA 튜토리얼.
URL 다시 쓰기 및 프록시된 요청
또 다른 일반적인 사용 사례는 특정 요청을 원격 서버로 전달하는 것입니다.
는 음명다음로시으작경는하로 을 프록시합니다./posts/https://jsonplaceholder.typicode.com/posts/를 들어, " 들어다대요한청에음예"에 대한 ./posts/1에 대한 대리인이 될 것입니다.https://jsonplaceholder.typicode.com/posts/1.
$ ws --rewrite '/posts/(.*) -> https://jsonplaceholder.typicode.com/posts/$1'
자습서를 다시 작성합니다.
이 클립은 위의 내용과 더불어 다음을 사용하는 방법을 보여줍니다.--static.extensions과 " " " 를 합니다.--verbose활동을 모니터링합니다.
HTTPS 및 HTTP2
HTTP2의 HTTPS "HTTP2"를 합니다.--https또는--http2각각의 깃발.자세한 구성 옵션과 브라우저에서 "녹색 자물쇠"를 여는 방법에 대한 안내서는 Wiki를 참조하십시오.
$ lws --http2
Listening at https://mba4.local:8000, https://127.0.0.1:8000, https://192.168.0.200:8000
위의 대부분의 답변은 콘텐츠가 어떻게 제공되고 있는지 매우 잘 설명하고 있습니다.제가 추가로 찾고 있던 것은 디렉터리의 다른 내용을 찾아볼 수 있도록 디렉터리를 나열하는 것이었습니다.다음은 추가 독자를 위한 저의 해결책입니다.
'use strict';
var finalhandler = require('finalhandler');
var http = require('http');
var serveIndex = require('serve-index');
var serveStatic = require('serve-static');
var appRootDir = require('app-root-dir').get();
var log = require(appRootDir + '/log/bunyan.js');
var PORT = process.env.port || 8097;
// Serve directory indexes for reports folder (with icons)
var index = serveIndex('reports/', {'icons': true});
// Serve up files under the folder
var serve = serveStatic('reports/');
// Create server
var server = http.createServer(function onRequest(req, res){
var done = finalhandler(req, res);
serve(req, res, function onNext(err) {
if (err)
return done(err);
index(req, res, done);
})
});
server.listen(PORT, log.info('Server listening on: ', PORT));
웹 페이지를 빠르게 볼 수 있는 가장 빠른 솔루션 중 하나입니다.
sudo npm install ripple-emulator -g
그때부터 HTML 파일의 디렉토리를 입력하고 실행합니다.
ripple emulate
그런 다음 장치를 Nexus 7 가로로 변경합니다.
처음부터 Node.js 웹 서버
타사 프레임워크 없음, 쿼리 문자열 허용, 후행 슬래시 추가, 핸들 404
성을 합니다.public_html모든 내용을 하위 폴더에 저장합니다.
요지: https://gist.github.com/veganaize/fc3b9aa393ca688a284c54caf43a3fc3
var fs = require('fs');
require('http').createServer(function(request, response) {
var path = 'public_html'+ request.url.slice(0,
(request.url.indexOf('?')+1 || request.url.length+1) - 1);
fs.stat(path, function(bad_path, path_stat) {
if (bad_path) respond(404);
else if (path_stat.isDirectory() && path.slice(-1) !== '/') {
response.setHeader('Location', path.slice(11)+'/');
respond(301);
} else fs.readFile(path.slice(-1)==='/' ? path+'index.html' : path,
function(bad_file, file_content) {
if (bad_file) respond(404);
else respond(200, file_content);
});
});
function respond(status, content) {
response.statusCode = status;
response.end(content);
}
}).listen(80, function(){console.log('Server running on port 80...')});
언급URL : https://stackoverflow.com/questions/6084360/using-node-js-as-a-simple-web-server
'itsource' 카테고리의 다른 글
| 키가 'StoreOptions' Vuex 4 + Vue 3 + Typescript 유형에 없습니다. (0) | 2023.06.16 |
|---|---|
| 이름이 '[DEFAULT]인 Firebase App이 Vuex + Nux SPA에 이미 있습니다. (0) | 2023.06.16 |
| 판다의 첫 번째 열을 시리즈로 데이터 프레임으로 얻는 방법은 무엇입니까? (0) | 2023.06.16 |
| TypeScript에서 문자열을 수락하고 문자열을 반환하는 함수 배열을 선언하려면 어떻게 해야 합니까? (0) | 2023.06.16 |
| 감시자를 사용하여 Vuex 로그인 (0) | 2023.06.11 |