TypeScript로 알아보는 객체 지향 프로그래밍(OOP) #1 OOP
2020-03-28
Koa.js를 이용하여 정적 서버 만들기와 SPA에서의 가상 경로를 위한 404 설정하기
2018-12-12
Explanation
오늘은 Node의 Koa 프레임워크를 이용하여 아주아주 간단하게 스테틱(정적) 서버를 만들고, SPA에서 만들어서 사용하는 가상 경로를 위한 처리에 대해 적어보려 합니다.
예제: https://github.com/falsy/blog-post-example/tree/master/koa-static-server
우선은 노드 패키지를 만들고 koa와 koa-static을 설치합니다.
|
1 |
$ npm init |
|
1 |
$ npm install --save koa koa-static |
샘플을 위한 디랙토리/파일 구조는 아래와 같습니다.
|
1 2 3 4 |
/src index.html style.css index.js |
간단하게 static server의 코드를 작성해보면,
|
1 2 3 4 5 6 7 8 9 |
const koa = require('koa'); const serve = require('koa-static'); const app = new koa(); app.use(serve(__dirname + '/src')); const port = 4321; const server = app.listen(port); console.log('server start port:' + port); |
끝.
|
1 |
$ node index.js |
위와 같이 서버를 실행하고 ‘http://localhost:4321/’ 로 접속하면 정적 서버가 만들어진 것을 확인 할 수 있습니다.
프론트 엔드의 프레임워크를 사용하다보면 프론트에서 가상 경로로 라우트 설정을 해서 사용하는 경우가 많은데요.
|
1 2 3 4 5 6 7 8 9 |
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; ... <route exact="" path="/" component="{Home}"></route> <route path="/lab" component="{lab}"></route> <route path="/board/free" component="{board}"></route> ... |
리액트를 예로 들면, ‘react-router-dom’ 라는 모듈을 사용해서 ‘http://도메인/’ 일때는 Home 이라는 컴포넌트를 불러오고 ‘http://도메인/lab/’은 lab 이라는 컴포넌트를 불러오도록 할 수 있습니다.
그런데 기본적으로 path는 디렉토리 구조를 찾게 되는데요, 그러면 서버에서 http://도메인/에 설정해 놓은 root디렉토리에서 파일 경로로 찾게 된답니다.
위의 3번째 예를 보면 root로 설정된 디렉토리부터 board 라는 디렉토리를 찾고 그 안에 free 라는 디렉토리를 찾고 그안에서 index.html을 찾겠죠?? 하지만 위 패스는 프론트에서 가상으로 설정한 경로이기 때문에 별다른 설정이 없다면 ‘404 Not Found’가 된답니다.
그렇기에 서버에서는 어떤 Path로 접근하더라도 root 디렉토리의 index.html 파일을 불러오도록 설정해줘야 합니다. 그러면 URL의 Path를 유지하면서 index.html을 불러오고 index.html에서는 프론트의 프레임워크 js파일을 불러오고 Path를 확인해서 해당 Path의 페이지를 그리게 되는 것이지요~
해당 설정을 위해 koa-send 모듈을 설치해줍니다.
|
1 |
$ npm install --save koa-send |
그리고 index.js에서 코드를 작성합니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const koa = require('koa'); const serve = require('koa-static'); const send = require('koa-send'); const app = new koa(); app.use(serve(__dirname + '/src')); app.use(async (ctx) => { if(ctx.status === 404) await send(ctx, 'index.html', { root: __dirname + '/src' }); }); const port = 4321; const server = app.listen(port); console.log('server start port:' + port); |
이렇게 설정해주면 모든 요청에서 URL Path는 유지하면서 404에서 ‘root’에서 설정한 디렉토리에서 index.html 을 불러옵니다.
async, await을 사용해서 Node는 v7.6+ 버전을 사용해야 합니다.
