22.2.4 정적 파일 제공

백엔드 서버에서 CSS와 JS 파일을 불러오려면 정적 파일을 제공해야 합니다. 정적 파일을 제공할 때는 koa-static 라이브러리를 사용합니다. 이 라이브러리를 yarn으로 설치하세요.

$ yarn add koa-static

그리고 프런트엔드 디렉터리의 build 디렉터리를 파라미터에 넣어 줍니다. 그러면 웹 서버를 이용하여 build 디렉터리 안에 있는 파일에 접근할 수 있습니다.

src/index.js

(...)
const path = require(‘path’);
const serve = require(‘koa-static’);
 
const staticPath = path.join(_ _dirname, ‘../../blog-frontend/build’);
 
(...)

app.use(serve(staticPath)); // 주의: serve가 ssr 전에 와야 합니다.
app.use(ssr);

이 작업을 완료한 후에는 프런트엔드 쪽 코드를 한번 빌드할 건데요. 빌드 전에 해야 할 작업이 하나 있습니다.

create-react-app으로 만든 프로젝트에는 Service Worker 기능이 기본적으로 등록되어 있는데요. 이 기능은 유저가 페이지를 처음 불러오면 페이지에서 사용하는 파일들을 로컬 캐시에 등록하여, 다음부터는 페이지에 접속할 때 서버에 아예 요청하지 않고 로컬에서 꺼내 사용할 수 있게 합니다.