VS Code 설치 및 Cloudflare 배포 매뉴얼 (D1 데이터베이스 생성)

작성일: 2024-03-20

목적: Cloudflare D1 데이터베이스 생성, 테이블 구축, Workers 프로젝트 생성 및 초기 배포 과정을 체계적으로 정리하여 유지보수 및 재현 가능성을 확보함.

1. 로컬 개발 환경 준비 (PowerShell & Scoop)

  1) 터미널 열기: Windows에서 PowerShell (또는 Windows Terminal)을 실행

    - Powershell 버전이 낮으면 scoop 실행이 안될 수 있음. Powersheel 최신 버전 설치

    - scoop 설치 : 

     가. Set-ExecutionPolicy RemoteSigned -scope CurrentUser

     나. iwr -useb get.scoop.sh | iex

  2) Node.js 설치 (Scoop 활용): Scoop이 설치되어 있다면 아래 명령어로 Node.js를 설치

    - PowerShell : scoop install nodejs

  3) VS Code 설치 (Scoop 활용): 코드 에디터로 가볍고 강력한 VS Code를 설치

    - PowerShell :scoop install vscode

  4) vscode 실행 후 프로젝트를 만들 폴더로 이동 - 메뉴 > File > Open Folder

     ( 예: Z:\workspace\nodejs )

2. Workers 프로젝트 생성 및 설정 (npm create)

  1) 프로젝트 생성 명령어 입력: Ctrl+~ 을 누르면 터미널이 생성되고, 아래 명령어를 입력

    - npm create cloudflare@latest [프로젝트명]

  2) Which template would you like to use? **Worker only**를 선택

    - D1과 AI API를 자유롭게 연결할 수 있는 가장 깔끔한 도화지

  3) Which language do you want to use? **JavaScript**를 선택

    - 빠른 개발 속도와 수익화를 위해 가장 효율적입니다.

  4) AI 가이드 파일 추가: Do you want to add an AGENTS.md file...? **Yes**를 선택

    - AI 코딩 도구(나 같은 어시스턴트)가 Cloudflare API를 더 정확히 파악하게 도와줌

  5) Do you want to use git for version control? **Yes**를 선택 

    - 버전 관리 필수

  6) 배포 안 함 선택: Do you want to deploy your application? **No**를 선택

    - 로컬에서 먼저 확인하기 위해

3. 로컬 테스트 및 실서버 배포 (npx wrangler)

  1) 터미널 (Ctrl+~)

    - cd [프로젝트명] 입력

    - code . -r 입력

  2) VS Code의 EXPLORER에서 src/index.js 파일을 열고, 내용을 수정한 후 저장(Ctrl+S)

  3) 터미널을 열고 아래 명령어를 입력

    - npx wrangler dev

    - 브라우저 확인: http://localhost:8787로 접속하여 입력한 문구가 나오는지 확인 (성공!)

   4) Cloudflare 로그인 (최초 1회): 로컬 서버를 끄고(Ctrl+C), 터미널에 아래 명령어를 입력하여 동기화

    - npx wrangler login

   5) 배포!

    - npx wrangler deploy

여기부터 선택사항

4. Cloudflare D1 데이터베이스 생성 (웹 대시보드)

  1) Cloudflare 로그인: dash.cloudflare.com에 접속하여 로그인

  2) D1 메뉴 진입: 왼쪽 사이드바 메뉴에서 [Workers & Pages] -> **[D1]**을 클릭

  3) 데이터베이스 생성: 화면 중앙의 [Create database] 버튼을 클릭

  4) 이름 설정: Database name에 **DB명** 입력하고 **[Create]**를 클릭

  5) 정보 보관: 생성된 D1의 상세 화면에서 Database ID (UUID 형태의 긴 문자열)를 복사하여 안전한 곳에 메모

    - 나중에 wrangler.jsonc 설정에 필수

5. 테이블 구축 (SQL 실행)

  1) 콘솔 진입: 방금 생성한 textray-db 상세 화면에서 상단의 [Console] 탭을 클릭

  2) SQL 쿼리 입력: 쿼리 입력창에 아래 SQL 문을 복사하여 붙여넣기

  3) 아래 내용 확인

SQL

CREATE TABLE tb_dream (

  id INTEGER PRIMARY KEY AUTOINCREMENT,

  ... 필요한 컬럼들 ...

  reg_date DATETIME DEFAULT CURRENT_TIMESTAMP

);

실행: 오른쪽 하단의 [Execute] 버튼을 클릭합니다. "Success" 메시지가 뜨면 테이블 생성이 완료된 것임