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-proxy

➜ cd micro-frontends-with-proxy

➜ corepack enable

➜ pnpm init

➜ corepack use [email protected]

➜ pnpm add turbo -D

workspace 설정하기

# pnpm-workspace.yaml

packages:
  - "teams/*"
  - "apps/*"

워크스페이스(팀 서버) 생성하기

➜ mkdir apps

➜ cd apps

➜ mkdir nginx-app

➜ cd nginx-app

➜ pnpm init

➜ cd ...

➜ pnpm i

nginx-app 만들기

upstream team_home {
    server host.docker.internal:3001;
}

upstream team_jobs {
    server host.docker.internal:3002;
}

upstream team_network {
    server host.docker.internal:3003;
}

server {
    listen          3000;

    location /network/ {
        proxy_pass              http://team_network;
    }

    location /jobs/ {
        proxy_pass              http://team_jobs;
    }

    location / {
        proxy_pass              http://team_home;
    }
}

FROM nginx:1.25.3-alpine

COPY proxy-server.conf /etc/nginx/conf.d/proxy-server.conf

EXPOSE 3000

{
  "name": "nginx-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "docker build -t nginx-app .",
    "dev": "docker run -p 3000:3000 nginx-app",
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

➜ pnpm --filter nginx-app build

각 팀의 서버 만들기

➜ mkdir teams

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

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

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

➜ cd ..

➜ pnpm i

각 팀의 서버 포트 변경하기

➜ mkdir teams

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

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

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

➜ cd ..

➜ pnpm i

import { defineConfig } from "vite";

export default defineConfig({
  base: "/",
  server: {
    host: true,
    port: 3001,
  },
});