Figma Make 내보내기 → React + Vite 프로젝트 실행 & IIS 배포 가이드

Figma Make에서 내보낸 결과물은 React + Vite 기반의 프로젝트입니다. VS Code에서는 Node 환경이 필요하며, npm install → npm run dev 로 로컬 실행 후 npm run build 로 생성된 dist 폴더를 IIS에 정적 배포하면 됩니다.

---

1) VS Code에서 실행하기

① Node.js 설치

• Node.js 공식 사이트에서 LTS 버전 설치
• 설치 후 터미널에서 확인: node -v npm -v

② 프로젝트 열기 & 패키지 설치

• VS Code → File > Open Folder → Figma Make 내보낸 폴더 선택
• 터미널에서: npm install

③ 로컬 미리보기 (개발용)

npm run dev

• 표시된 로컬 주소(예: http://localhost:5173)로%EB%A1%9C) 접속
• UI 정상 작동 확인

---

2) IIS 배포하기 (정적 사이트 형태)

① 빌드 파일 생성

npm run build

• dist 폴더가 생성됨 (빌드 결과물)

② IIS에 업로드

1. IIS 관리자 → 사이트 추가

• 물리 경로: dist 폴더
• 응용 프로그램 풀: No Managed Code

2. 기본 문서: index.html 추가
3. MIME 타입 점검 (없으면 추가)

• .js → application/javascript
• .css → text/css
• .json → application/json
• .wasm → application/wasm

4. SPA 라우팅용 web.config 추가 (dist 폴더 루트)

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="SPA Route" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

---

3) 빠른 요약표

단계	명령어 / 작업	설명
Node 설치	node -v / npm -v	개발 환경 준비
의존성 설치	npm install	프로젝트 세팅
로컬 실행	npm run dev	개발용 확인
빌드 생성	npm run build	dist 폴더 생성
IIS 배포	dist 업로드	정적 파일 배포