Nginx 와 SSI (Server-Side Includes) 를 이용한 서버에서의 통합 예제

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

➜ cd micro-frontends-with-ssi

➜ corepack enable

➜ pnpm init

➜ corepack use [email protected]

➜ pnpm add turbo -D

workspace 설정하기

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

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

nginx-ssi-app 만들기

# micro-frontends-with-ssi/apps/nginx-ssi-app/proxy-server.conf

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

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

server {
    listen 3000;
    ssi on;

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

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

# micro-frontends-with-ssi/apps/nginx-ssi-app/Dockerfile

FROM nginx:1.25.3-alpine

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

EXPOSE 3000

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

➜ pnpm --filter nginx-ssi-app build

각 팀의 서버 만들기

➜ mkdir teams teams/team-home teams/team-jobs

➜ cd teams/team-home

➜ pnpm init

➜ cd ../team-jobs

➜ pnpm init

➜ cd ...

➜ pnpm --filter team-home add serve

➜ pnpm --filter team-jobs add serve

{
  "name": "team-home",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "serve public -p 3001",
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "serve": "^14.2.1"
  }
}

{
  "name": "team-jobs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "serve public -p 3002",
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "serve": "^14.2.1"
  }
}

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

#include 를 가지고 있는 페이지 만들기

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/index.css" />
  </head>
  <body>
    <div id="app">
      <div id="main">
        <h1>Home</h1>
        <nav>
          <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/jobs/">Jobs</a></li>
          </ul>
        </nav>
      </div>
      <div id="team-jobs-recommendation">
        <!--#include virtual="/jobs/fragments/recommendation" -->
      </div>
    </div>
  </body>
</html>