지금까지 웹사이트를 만들 때 프론트엔드의 부분은 express.static과 res.sendFile(__dirname + ' ')의 메서드를 사용해서 백엔드와 연결했다. 하지만 현재 TCP서버를 통해서 백엔드를 작업했고 마이크로 서비스 아키텍쳐를 통해서 각 서비스를 제공하는 이상 express.static의 방식으로 프론트엔드와 백엔드를 연결하는 것은 적절하지 않다.
MSA에서 중요한 개념 중 하나는 각 서비스의 독립성과 확장성이다. 각 서비스는 자체적인 데이터베이스, 비즈니스 로직 등을 가지며, 필요한 경우 서비스 단위로 확장이 가능하다.
각 서비스가 독립적으로 배포되어야 하는 MSA의 특징에서 하나의 서비스가 변경되더라도 다른 서비스에 영향을 주지 않아야 하지만 express.static을 사용하면 어떤 서비스에 변경 및 수정, 확장이 생겼을 때 다른 서비스에도 영향을 미친다.
그래서 프론트엔드와 백엔드 간의 연결을 다른 방식으로 연결해야 한다.
이에 대한 방안으로 node.js의 fs모듈이 있다.
"fs"는 "File System"의 약자로, 파일과 디렉토리를 다루는 다양한 함수와 메서드를 제공한다. 이 모듈을 사용하여 파일을 읽고 쓰기, 디렉토리 생성 및 삭제, 파일 정보 조회 등을 수행할 수 있다.
fs모듈에는 여러 기능이 있지만 그 중 사용할 기능은 파일 스트림이다.
파일 스트림: 파일을 스트림 형태로 읽고 쓸 수 있는 스트림 인터페이스를 제공.
fs.createReadStream, fs.createWriteStream 등이 있다.
먼저 import fs from 'fs' //최상단에 fs모듈을 import해온다.
import fs from 'fs';
그리고 프론트엔드의 파일의 경로를 받는다.
응답 헤더를 설정한다. 상태 코드 200과 "Content-Type"을 "text/html"로 설정하여 HTML 파일을 전달한다.
function frontconnection(pathname, res) {
let filePath;
if (pathname == '/admin') {
filePath = './src/public/admin.html';
}
if (pathname == '/js/admin.js') {
filePath = './src/public/js/admin.js';
}
res.writeHead(200, { 'Content-Type': 'text/html' });
const readStream = fs.createReadStream(filePath);
readStream.pipe(res);
}
const readStream = fs.createReadStream(filePath);: 요청된 경로에 해당하는 파일의 읽기 스트림을 생성한다.
readStream.pipe(res);: 파일 읽기 스트림의 내용을 클라이언트 응답 스트림과 연결하여 응답으로 보낸다. 이를 통해 파일의 내용을 클라이언트로 전달한다.
그리고 위의 함수를 export하고 app.js에서 받는다.
즉, 이 코드는 클라이언트의 요청에 따라 해당 경로에 있는 HTML 파일 또는 JavaScript 파일의 내용을 응답으로 보내는 역할을 한다. 예를 들어, 클라이언트가 "/admin" 경로로 요청을 보내면 "admin.html" 파일의 내용을 응답으로 전송합니다. 이러한 방식으로 서버는 클라이언트의 요청에 대해 적절한 파일을 동적으로 응답으로 보내는 웹 서버 역할을 수행한다.
'내배캠 최종 프로젝트 T.I.L' 카테고리의 다른 글
2023-08-23 T.I.L 08-21일 MSA 프록시 서버에 대한 수정 및 서비스 간의 통신 (0) | 2023.08.23 |
---|---|
2023-08-22 MSA 작업 설계 (0) | 2023.08.22 |
2023-08-21 MSA에서 프록시 서버의 역할 (0) | 2023.08.21 |
2023-08-17 MSA와 MA의 장점과 단점 (0) | 2023.08.18 |
2023-08-16 fetch의 get 요청에는 body값을 넣을 수 없다. (0) | 2023.08.16 |