Front-end 로컬 서버 개발 환경 구성
개발 편의를 위해 로컬 서버를 띄워서 FE 를 실시간으로 테스트할 필요가 있다.
로컬 서버는 local-server.js 파일에 간단히 nodejs 로 코딩했다.
파일 요청시 타겟 파일을 리턴하도록 구현했으며, 추가로 SPA 이기 때문에 모든 url 은 index.html 을 리턴하도록 했다.
local-server.js
import http from 'http';
import path from 'path';
import fs from 'fs';
import url from 'url';
const __dirname = path.resolve();
const mimeType = {
'.ico': 'image/x-icon',
'.html': 'text/html',
'.js': 'text/javascript',
'.css': 'text/css',
'.png': 'image/png',
'.jpg': 'image/jpeg',
'.eot': 'aplication/vnd.ms-fontobject',
'.ttf': 'aplication/font-sfnt',
}
const server = http.createServer((request, response) => {
const urlPath = url.parse(request.url).pathname;
const ext = path.parse(request.url).ext
let resFilePath = path.join(__dirname, './public');
let resMimeType = mimeType[ext];
// 확장자가 없다 --> url 이라 간주하고, url 인 경우에는 index.html 리턴하도록 처리
if (!resMimeType) {
resFilePath += '/index.html';
resMimeType = 'text/html';
} else {
resFilePath += urlPath;
}
fs.readFile(resFilePath, (err, data) => {
if (err) {
response.statusCode = 404;
response.end('Not found');
} else {
response.statusCode = 200;
response.setHeader('Content-Type', resMimeType);
response.end(data);
}
});
});
server.listen(8080, () => {
console.log('Server is running...');
});
터미널에서 node local-server.js
명령어 실행시 정상적으로 동작하는 것 확인했다.
추가로 파일 수정시 바로바로 로컬 서버에 반영될 수 있도록 nodemon 모듈을 사용하기로 했다.
yarn global add nodemon
으로 설치하고, package.json 에 스크립트 명령어 추가한다.
"scripts": {
"build": "node esbuild.js",
"dev": "nodemon --watch src/ -e js,svelte --exec \"yarn build && node local-server.js\""
},
추가한 스크립트의 의미는 src 디렉토리 내 js, svelte 파일에 변화가 있을때 빌드 수행 후 서버 재시작한다. 라는 의미이다.
이제 yarn dev
명령어 실행한 후에 js, svelte 파일 수정하면 바로 바로 브라우저에서 확인할 수 있다.
물론!!! 브라우저 새로 고침은 해야 한다 ㅋㅋㅋ
Author And Source
이 문제에 관하여(Front-end 로컬 서버 개발 환경 구성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@crazydj/블로그-직접-만들기-대작전-Front-end-로컬-서버-개발-환경-구성저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)