서버 사이드 렌더링(Server-Side Rendering, SSR)은 웹 페이지의 초기 렌더링을 서버에서 처리하여 클라이언트에 더 빠르게 렌더링되도록 하는 방법입니다. 이번에는 도커와 타입스크립트를 이용하여 서버 사이드 렌더링을 구현하는 방법에 대해 알아보겠습니다.

1. 타입스크립트로 SSR 앱 작성

먼저, 타입스크립트로 SSR 앱을 작성해야 합니다. 타입스크립트는 정적 타입 지정이 가능한 언어로, 코드 유지보수성을 높여주며 개발자의 에러를 줄여줍니다.

// index.tsx
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './App';

const html = ReactDOMServer.renderToString(<App />);
console.log(html);

위 코드에서는 ReactDOMServer.renderToString 메서드를 사용하여 React 앱을 렌더링한 후, 렌더링된 HTML을 콘솔에 출력하고 있습니다.

2. 도커로 SSR 앱 컨테이너화

타입스크립트로 작성한 SSR 앱을 도커 컨테이너로 만들어 배포할 수 있습니다. Dockerfile을 통해 도커 이미지를 빌드하고, 컨테이너를 실행할 수 있습니다.

# Dockerfile
FROM node:14

WORKDIR /app

COPY package.json package-lock.json ./
RUN npm install

COPY . .

CMD ["npm", "start"]

위 Dockerfile은 Node.js를 기반으로 하는 도커 이미지를 빌드하고, SSR 앱을 실행하는 방법을 정의하고 있습니다.

3. 도커 컴포즈로 서비스 관리

도커 컴포즈(Docker Compose)를 사용하면 여러 개의 도커 컨테이너를 쉽게 관리할 수 있습니다. 여러 개의 서비스를 정의하고 한번에 실행할 수 있으며, 환경 변수 설정, 네트워킹 등을 손쉽게 관리할 수 있습니다.

# docker-compose.yml
version: '3'
services:
  web:
    build: .
    ports:
      - "3000:3000"

위 docker-compose.yml 파일은 SSR 앱을 서비스로 정의하고, 포트 매핑을 통해 호스트와 컨테이너를 연결하는 내용을 담고 있습니다.

도커와 타입스크립트를 사용하여 서버 사이드 렌더링을 구현하는 방법에 대해 알아보았습니다. 다양한 환경에서 손쉽게 배포 및 관리가 가능하며, 더 나은 웹 애플리케이션을 구현할 수 있습니다.

참고문헌:

• https://reactjs.org/docs/react-dom-server.html