개발관련/other

node.js 로 간단한 웹 서버 만들기

Rateye 2021. 11. 8. 16:00
728x90
반응형
질문 : 간단한 웹 서버로 node.js 사용

매우 간단한 HTTP 서버를 실행하고 싶습니다. example.com 모든 GET 요청은 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);

아래의 한 가지 제안은 복잡하며 사용하려는 각 리소스 (CSS, JavaScript, 이미지) 파일에 대해 get

일부 이미지, CSS 및 JavaScript가있는 단일 HTML 페이지를 어떻게 제공 할 수 있습니까?

답변

가장 간단한 Node.js 서버는 다음과 같습니다.

$ npm install http-server -g

이제 다음 명령을 통해 서버를 실행할 수 있습니다.

$ cd MyApp

$ http-server

NPM 5.2.0 이상을 사용 npx 설치하지 않고도 http-server 를 사용할 수 있습니다. 프로덕션에서 사용하는 것은 권장되지 않지만 localhost에서 서버를 빠르게 실행할 수있는 좋은 방법입니다.

$ npx http-server

또는 웹 브라우저를 열고 CORS 요청을 활성화하는 다음을 시도 할 수 있습니다.

$ http-server -o --cors

더 많은 옵션을 보려면 GitHub의 http-server 설명서를 확인하거나 다음을 실행하십시오.

$ http-server --help

다른 많은 멋진 기능과 NodeJitsu에 대한 단순한 배포. 기능 포크 물론, 자신의 포크로 기능을 쉽게 충전 할 수 있습니다. 이 프로젝트의 기존 800 개 이상의 포크 중 하나에서 이미 완료되었음을 알 수 있습니다.

Light Server : 자동 새로 고침 대안 http-server 의 좋은 대안은 light-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 를 사용합니다. 오픈 소스 텍스트 편집기 Brackets 에는 NodeJS 정적 웹 서버도 포함됩니다. 대괄호로 HTML 파일을 열고 " 실시간 미리보기 "를 누르면 정적 서버가 시작되고 페이지에서 브라우저가 열립니다. HTML 파일을 편집하고 저장할 때마다 브라우저가 자동으로 새로 고쳐집니다. 이것은 적응 형 웹 사이트를 테스트 할 때 특히 유용합니다. 여러 브라우저 / 창 크기 / 장치에서 HTML 페이지를 엽니 다. HTML 페이지를 저장하고 적응 형 콘텐츠가 모두 자동으로 새로 고침 될 때 작동하는지 즉시 확인하세요. 웹 / SPA / PWA / 모바일 / 데스크톱 / 브라우저 확장 웹 개발자 일부 SPA 프레임 워크에는 소스 파일 변경을 감지하고 SPA 또는 PWA 웹의 증분 재 구축 및 패치 (핫 리로딩이라고 함)를 트리거 할 수 있는 Webpack DevServer의 내장 버전이 포함되어 있습니다. 앱. 다음은이를 수행 할 수있는 몇 가지 인기있는 SPA 프레임 워크입니다. VueJS 개발자 VueJS 개발자에게 가장 좋아하는 것은 서버 측 렌더링 (SSR)을 지원하는 스위치와 CORS 문제를 해결하기위한 프록시 규칙 을 지원하는 Webpack DevServer를 포함하는 Quasar Framework입니다. 여기에는 모바일과 데스크톱 모두에 맞게 설계된 최적화 된 구성 요소가 많이 포함되어 있습니다. 이를 통해 모든 플랫폼 (SPA, SPA + SSR, PWA, PWA + SSR, Cordova 및 Capacitor Mobile AppStore 앱, Electron Desktop Node + VueJS 앱 및 브라우저 확장)에 대해 하나의 앱 을 빌드 할 수 있습니다. 또 다른 인기있는 것은 NuxtJS로 정적 HTML / CSS 코드 생성은 물론 다른 UI 구성 요소 제품 군용 플러그인을 사용하는 SSR 또는 SSR없는 빌드 모드도 지원합니다. React Framework 개발자 ReactJS 개발자는 핫 리로딩을 설정할 수도 있습니다. Cordova / Capacitor + Ionic Framework Developers Iconic은 이제 VueJS, React 및 Angular 개발을 지원 하는 모바일 전용 하이브리드 구성 요소 프레임 워크입니다. 자동 새로 고침 기능이있는 로컬 서버가 ionic 도구에 구워집니다. 앱 폴더에서 ionic serve 를 실행하십시오. 더 나은 ... ionic serve --lab 은 iOS 및 Android의 나란히 자동 새로 고침보기를 볼 수 있습니다.

NPM 5.2.0 이상을 사용 npx 설치하지 않고도 http-server 를 사용할 수 있습니다. 프로덕션에서 사용하는 것은 권장되지 않지만 localhost에서 서버를 빠르게 실행할 수있는 좋은 방법입니다.

$ npx http-server

또는 웹 브라우저를 열고 CORS 요청을 활성화하는 다음을 시도 할 수 있습니다.

$ http-server -o --cors

더 많은 옵션을 보려면 GitHub의 http-server 설명서를 확인하거나 다음을 실행하십시오.

$ http-server --help

다른 많은 멋진 기능과 NodeJitsu에 대한 단순한 배포.

기능 포크

물론 자신의 포크로 기능을 쉽게 충전 할 수 있습니다. 이 프로젝트의 기존 800 개 이상의 포크 중 하나에서 이미 완료되었음을 알 수 있습니다.

라이트 서버 : 자동 새로 고침 대안

http-server 의 좋은 대안은 light-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 를 사용합니다.

오픈 소스 텍스트 편집기 Brackets 에는 NodeJS 정적 웹 서버도 포함됩니다. 대괄호로 HTML 파일을 열고 " 실시간 미리보기 "를 누르면 정적 서버가 시작되고 페이지에서 브라우저가 열립니다. HTML 파일을 편집하고 저장할 때마다 브라우저가 자동으로 새로 고쳐집니다. 이것은 적응 형 웹 사이트를 테스트 할 때 특히 유용합니다. 여러 브라우저 / 창 크기 / 장치에서 HTML 페이지를 엽니 다. HTML 페이지를 저장하고 적응 형 콘텐츠가 모두 자동으로 새로 고침 될 때 작동하는지 즉시 확인하세요.

웹 / SPA / PWA / 모바일 / 데스크탑 / 브라우저 확장 웹 개발자

일부 SPA 프레임 워크에는 소스 파일 변경을 감지하고 SPA 또는 PWA 웹 앱의 증분 재 빌드 및 패치 (핫 리로딩이라고 함)를 트리거 할 수 있는 Webpack DevServer 의 기본 제공 버전이 포함되어 있습니다. 다음은이를 수행 할 수있는 몇 가지 인기있는 SPA 프레임 워크입니다.

VueJS 개발자

VueJS 개발자에게 가장 좋아하는 것은 서버 측 렌더링 (SSR) 및 프록시 규칙 을 지원하여 CORS 문제를 해결하기위한 스위치와 함께 Webpack DevServer를 포함하는 Quasar Framework입니다. 여기에는 모바일과 데스크톱 모두에 맞게 설계된 최적화 된 구성 요소가 많이 포함되어 있습니다. 이를 통해 모든 플랫폼 (SPA, SPA + SSR, PWA, PWA + SSR, Cordova 및 Capacitor Mobile AppStore 앱, Electron Desktop Node + VueJS 앱 및 브라우저 확장)에 대해 하나의 앱 을 빌드 할 수 있습니다.

또 다른 인기있는 것은 NuxtJS로 정적 HTML / CSS 코드 생성은 물론 다른 UI 구성 요소 제품 군용 플러그인을 사용하는 SSR 또는 SSR없는 빌드 모드도 지원합니다.

React Framework 개발자

ReactJS 개발자는 핫 리로딩을 설정할 수도 있습니다.

Cordova / Capacitor + Ionic 프레임 워크 개발자

Iconic은 이제 VueJS, React 및 Angular 개발을 지원 하는 모바일 전용 하이브리드 구성 요소 프레임 워크입니다. 자동 새로 고침 기능이있는 로컬 서버가 ionic 도구에 구워집니다. 앱 폴더에서 ionic serve 를 실행하십시오. 더 나은 ... ionic serve --lab 은 iOS 및 Android의 나란히 자동 새로 고침보기를 볼 수 있습니다.

출처 : https://stackoverflow.com/questions/6084360/using-node-js-as-a-simple-web-server
728x90
반응형