<iframe /> 을 이용한 통합 예제

Node.js

# Node.js 버전 확인
➜ node -v
v20.9.0

# v20.9.0 가 설치되어 있지 않다면
➜ nvm install 20.9.0

# v20.9.0 를 사용하고 있지 않다면
➜ nvm use 20.9.0

# Node.js 버전 다시 확인
➜ node -v
v20.9.0

npm

# npm 버전 확인
➜ npm -v
10.2.1

# 최신 버전 npm 으로 업그레이드 
➜ npm i [email protected] -g

# npm 버전 다시 확인
➜ npm -v
10.2.1

Create Project Root

➜ mkdir micro-frontends-with-iframe

➜ cd micro-frontends-with-iframe

➜ corepack enable

➜ pnpm init

➜ corepack use [email protected]

➜ pnpm add turbo -D

workspace 설정하기

# micro-frontends-with-iframe/pnpm-workspace.yaml

packages:
  - "teams/*"

각 팀의 서버 만들기

➜ mkdir teams

➜ cd teams

➜ pnpm create vite@latest team-home --template vanilla-ts

➜ pnpm create vite@latest team-jobs --template vanilla-ts

➜ cd ...

➜ pnpm i

{
  "name": "team-home",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --port 3001",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}

{
  "name": "team-jobs",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --port 3002",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}

{
  "$schema": "<https://turbo.build/schema.json>",
  "pipeline": {
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}

➜ pnpm exec turbo dev

페이지 만들기

// micro-frontends-with-iframe/teams/team-home/src/main.ts

import "./style.css";

document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
  <div id="main">메인입니당</div>
  <div id="team-jobs-recommendation">
    <iframe src="<http://localhost:3002/jobs/fragments/recommendation>"></iframe>
  </div>
`;

/* micro-frontends-with-iframe/teams/team-home/src/style.css */

#app {
  max-width: 1280px;
  margin: 0 auto;

  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}

#main {
  width: 600px;
  height: 600px;
  background-color: white;
  border-radius: 10px;
  color: black;
  text-align: center;
}

#team-jobs-recommendation {
  width: 400px;
  height: 220px;
  background-color: white;
  border-radius: 10px;
}

#team-jobs-recommendation iframe {
  border: 0;
  width: 100%;
  height: 220px;
}

iframe 으로 띄울 프레그먼트 만들기

<!-- micro-frontends-with-ssi/teams/team-jobs/index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + TS</title>
  </head>
  <body>
    <div id="jobs-fragment-recommendation"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Node.js

npm

Create Project Root

workspace 설정하기

각 팀의 서버 만들기

페이지 만들기

iframe 으로 띄울 프레그먼트 만들기

#include 로 포함될 템플릿에 스타일 추가하기