15-2. 리액트 앱 빌드 및 서버에서 제공하기

이제 우리의 리액트 프로젝트를 프로덕션 전용으로 빌드를 하겠습니다. 프로덕션 전용으로 빌드를 하면, 불필요한 경고 메시지들과 주석들을 제거해주어 파일의 용량을 줄여줍니다.

클라이언트 디렉토리에서 해당 명령어를 입력하세요.

$ yarn build # 혹은 npm run build

이 프로세스는 보통 1~2분이 걸리며, 프로젝트 규모, 그리고 컴퓨터의 사양에 따라 더 걸릴 수 도 있습니다.

이 명령어를 실행하고 나면 build 라는 디렉토리가 생성되고, index.html, 그리고 static 디렉토리에는 css, images, js 파일들이 들어있습니다. buld 디렉토리에 있는 파일들을 서버쪽에서 koa-static 을 통하여 제공을 해보도록 하겠습니다.

우선 서버쪽 디렉토리에서 koa-static 을 설치하세요.

$ yarn add koa-static

그리고 서버의 인덱스 파일에서 koa-static 을 불러온다음에 라우트들과 웹소켓을 설정하는 코드 하단에서 적용을 해주면 백엔드 서버에서도 클라이언트쪽 파일들을 접근 할 수 있게 해줍니다.

src/index.js

(...)

const serve = require('koa-static');
const path = require('path');

(...)

router.use('/api', api.routes()); // api 라우트를 /api 경로 하위 라우트로 설정
app.use(router.routes()).use(router.allowedMethods());
app.ws.use(ws.routes()).use(ws.allowedMethods());

app.use(serve(path.resolve(__dirname, '../../heurm-client/build/')));

app.listen(port, () => {
    console.log('heurm server is listening to port ' + port);
});

이제, http://localhost:4000/ 에 접속을 하면, 페이지가 잘 나타나게 될 것입니다. 하지만 유저 페이지에 들어가는 경우에는, index.html 으로 연결되는것이 아니기 때문에 Not Found 가 나타나게됩니다. (리액트의 빌드 파일에 서비스워커가 적용되어있기 때문에 유저페이지나 로그인페이지에서 새로고침을해도 잘 나타나긴 합니다. 하지만, 캐시가 없을경우엔 Not Found 가 뜹니다. 한번 개발자콘솔을 열고, 새로고침 아이콘을 우클릭하여 캐시를 비우면서 새로고침을 해보세요)

이를 해결하기 위해선, 우리가 이전에 리액트 라우터 서버사이드 렌더링을 하기 전에 준비작업을 했었을 때 처럼, index.html 파일을 불러와서 나머지 라우트에 연결을 해주면 됩니다. 혹은, 이 작업을 대신 해주는 라이브러리를 사용하는것도 좋습니다.

서버측에서 준비되지 않은 라우트들을 처리해주는 koa-connect-history-api-fallback 라이브러리를 설치하세요.

$ yarn add koa-connect-history-api-fallback

이 라이브러리는 connect-history-api-fallback 라이브러리의 koa 호환버전입니다.

이 라이브러리를 적용 할 땐, 해당 모듈을 불러와서, serve 를 사용하기 전에 적용해주세요.

src/index.js

(...)

const fallback = require('koa-connect-history-api-fallback');

(...)

app.use(fallback());
app.use(serve(path.resolve(__dirname, '../../heurm-client/build/')));

app.listen(port, () => {
    console.log('heurm server is listening to port ' + port);
});

이렇게 설정을 하고 나면, 유저페이지나 로그인페이지도 정상적으로 라우팅이 작동하게 됩니다.

이제 코드 상으로는, 프로젝트가 완성되었습니다!

나머지 섹션에서 다루는 작업들은, Vultr 에서 만든 우분투 서버에서 데이터베이스 및 환경설정을 다루게 됩니다.