20.3.5 정적 파일 제공하기

    이번에는 Express에 내장되어 있는 static 미들웨어를 사용하여 서버를 통해 build에 있는 JS, CSS 정적 파일들에 접근할 수 있도록 해 주겠습니다.

    index.server.js

    import React from 'react';
    import ReactDOMServer from 'react-dom/server';
    import express from 'express';
    import { StaticRouter } from 'react-router-dom';
    import App from './App';
    import path from 'path';
    
    const app = express();
    
    // 서버 사이드 렌더링을 처리할 핸들러 함수입니다.
    const serverRender = (req, res, next) => {
      // 이 함수는 404가 떠야 하는 상황에 404를 띄우지 않고 서버 사이드 렌더링을 해 줍니다.
    
      const context = {};
      const jsx = (
        <StaticRouter location={req.url} context={context}>
          <App />
        </StaticRouter>
      );
      const root = ReactDOMServer.renderToString(jsx); // 렌더링을 하고
      res.send(root); // 결과물을 응답합니다.
    };
    
    const serve = express.static(path.resolve('./build'), {
      index: false // "/" 경로에서 index.html 보여 주지 않도록 설정
    });
    
    app.use(serve); // 순서가 중요합니다. serverRender 전에 위치해야 합니다.
    app.use(serverRender);
    
    // 5000 포트로 서버를 가동합니다.
    app.listen(5000, () => {
      console.log('Running on http://localhost:5000');
    });

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.