클로드로 만든 앱 워드프레스에 게시하기

혼공학습단 강의의 진도에는 포함되지 않지만 클로드로 만든 앱을 블로그에 게시하고 싶었습니다.
워드프레스 자체에 올릴려고 해보니 제가 만든 앱 형식이 HTML이 아니라서 불가능했습니다.
dist 폴더를 FileXilla로 직접 업로드를 하니 빈 화면만 뜨더군요.
순수 프론트엔드(HTML/CSS/JS) 이면서 서버 API 호출이 없을 때만 직접 업로드 방식이 괜찮다고 하네요.
또한 수익형 블로그의 관점에서 보자면 검색은 워드프레스 글에서 일어나야 하며 앱은 체류시간용 도구여야 하는데 이렇게 dist를 직접 올리게 되면 앱 페이지가 따로 놀게되어 본문 SEO 파워가 분산되어버립니다.
따라서 진행할 흐름은 다음과 같습니다.

클로드로 앱 생성
→ GitHub 저장소
→ Netlify 배포
→ 워드프레스 글에 iframe 삽입

GitHub 저장소

우선 GitHub에 로그인하여 New repository를 생성합니다.
저는 예전에 만들어놓은 아이디가 있어서 회원가입없이 로그인했습니다.

아니 근데 GitHub 웹 업로드가 안되네요?
React 프로젝트는 구조상 웹 업로드가 불가능하다고 합니다…
Git 명령어로 올려야 하는 상황 발생!
갈수록 일이 커지고 있습니다.

PC에 Git 설치되어 있는지 확인

터미널(명령 프롬프트) 열고

git --version

깃 또한 이전에 설치해 두었던 예전버전이 아직 존재하는군요.
깃허브 관련 도서도 구입해서 실습 따라고 그랬는데 완독은 하지 못했었습니다.

React 프로젝트 폴더로 이동

cd C:\Users\...\quiz-app

package.json 보이는 위치여야 합니다.

Git 초기화

git init

중요: .gitignore 확인

React/Vite 프로젝트라면 이 줄이 반드시 있어야 합니다.

node_modules
dist
.env

없으면 만들어줘야하며 이게 파일 수 폭탄을 방지하는 장치입니다.
.gitignore 란 GitHub에 절대 올리면 안 되는 파일 목록으로 이건 빼라고 알려주는 파일입니다.

node_modules

GitHub에 올릴 필요 없으며, 라이브러리 수천 개로 올리면 용량 폭탄 + 파일 수 제한에 걸립니다.

dist

  • npm run build (완성품 파일로 바꿔주는 명령어)하면 생기는 결과물
  • Netlify 같은 배포 서버가 자동 생성

.env

  • API 키
  • 비밀 값
  • 토큰

GitHub에 올리면 보안 사고

전 클로드가 만들어 준 것이 이미 있으니 넘어갑니다.

파일 추가 & 커밋

무작정 따라하다보니 개념이 잘 안잡히는 것 같아서 개념부터 잡고 가겠습니다.

Git이 뭐냐

파일 변경 이력을 관리하는 도구

  • 언제
  • 누가
  • 어떤 파일을
  • 어떻게 바꿨는지

Commit이 뭐냐

지금 이 상태를 하나의 버전으로 저장

  • 게임 세이브 포인트
  • 문서 버전 1.0, 1.1

커밋 = 변경 이력 하나를 사진 찍듯이 저장함

GitHub는 뭐냐

Git 저장소를 올려두는 원격 서버

  • 로컬 PC = 작업실
  • GitHub = 창고
git add .
  • . = 현재 디렉토리
  • .gitignore에 걸린 파일은 자동 제외

현재 폴더의 변경된 파일 전부를 커밋 후보로 올려라

git commit -m "initial commit"
  • -m = 메시지
  • "initial commit" = 이 버전의 설명

add한 파일들을 하나의 버전으로 확정 저장

이 두 줄은 항상 세트

git add .
git commit -m "설명"

GitHub 저장소 연결

git remote add origin https://github.com/아이디/quiz-app.git

이 로컬 프로젝트의 원격 저장소 주소는 여기다

  • remote = 원격
  • add = 추가
  • origin = 별명 (관례)
  • 뒤 URL = 실제 GitHub 주소

아직 업로드는 안된 상태이고 주소만 등록한 상태입니다.

git branch -M main

현재 브랜치 이름을 main으로 통일

브랜치(branch)는 같은 프로젝트에서 작업을 나눠서 진행하는 평행 세계로 게임 세이브 슬롯으로 비유할 수 있습니다.

  • main → 안정된 본편 세이브
  • feature → 실험용 세이브
  • test → 망해도 되는 세이브
git push -u origin main

main 브랜치의 커밋들을 origin(GitHub)으로 업로드

  • push = 밀어 넣기
  • -u = 다음부터 기본값으로 기억
  • origin = 원격 이름
  • main = 브랜치 이름

그런데 에러가 뜹니다?!

GitHub는 이제 아이디 + 비밀번호로 push 못합니다
Personal Access Token(PAT) 이 필요합니다

GitHub의 보안정책으로 토큰은 생성해서 토큰을 비밀번호 대신 사용해야 한다고 합니다.
원래 이렇게 복잡한가ㅜㅜㅜㅜ

GitHub 토큰(PAT) 만드는 법

GitHub로 로그인하여 설정으로 들어갑니다.

우측 상단 프로필 사진
→ Settings
→ Developer settings
→ Personal access tokens
→ Tokens (classic)

Generate new token (classic)을 클릭하여 토큰을 생성합니다.
설정값들은 다음과 같습니다.

  • Note: quiz-app-push
  • Expiration:
    • 30 days (추천)
    • 또는 No expiration
  • Scopes (권한)
    ✔ repo ← 이것만 체크

나머지는 건드리지 말 것!
토큰 문자열이 딱 한 번 나오는데 반드시 복사해서 메모장에 저장해 둡니다.
이 화면 닫으면 다시는 못 봐요!

다시 push 하는 방법

git push -u origin main

Token에 아까 저장해둔 토큰을 입력하면 성공입니다.

그런데 파일목록이 보이질 않네요?
브랜치를 잘못 보고 있었습니다. 좌측 상단 브랜치 드롭다운을 클릭하여 main을 선택합니다.

이제야 한단계 끝났네요. 잠시 큰 그림 한 장 보고 쉬어갈게요.

[내 컴퓨터]
↓ git push
[GitHub 저장소]
↓ Netlify가 가져감
[npm run build]
↓
[dist 폴더 생성]
↓
[Netlify 서버]
↓
https://어쩌구.netlify.app ← 여기서 결과물 확인

  • GitHub : 코드 보관함
  • Netlify : 코드를 실행해서 웹으로 보여주는 곳

Netlify로 배포

Netlify로 바로가기

로그인 방법에서 GitHub를 선택합니다.

Netlify ↔ GitHub 연결 권한 승인
(“이 사람 GitHub 저장소 좀 볼게요” 허락하는 단계

GitHub를 선택하면 깃허브 연결권한을 실행하는 창이 뜨고 리포지토리를 install합니다.
또 메일로 코드를 부여받아서 입력해야 하는군요.

바로 Deploy quiz-app to Netlify을 눌렀더니 앱 실행이 안됩니다.
되돌아가서 Build settings을 설정해 주었습니다.

빌드 설정

Build settings

① Branch

main

② Build command

npm run build
  • Netlify가 서버에서 npm install 하고 npm run build 실행함

③ Publish directory

dist
  • Vite는 결과물을 dist 폴더에 만듦그래서 여기 반드시 dist

배포가 완료된 것 같습니다!
Preview를 눌러서 확인해줍니다.

https://6961a9d99fde5a83948b0e9d–clever-boba-e0c82b.netlify.app

이 주소로 접속은 가능하지만 너무 기네요!
이건 Netlify가 자동으로 붙여준 임시 배포 URL로 테스트/미리보기용 주소입니다.
배포할 때마다 바뀔 수 있어서 블로그/공유용으로는 부적합합니다.

Netlify 주소 이름 바꾸기

Project configuration 들어가기

여기서 Change project name을 눌러서 이름을 바꿔줍니다.

퀴즈앱으로 바로가기

워드프레스에 React 앱 게시하기

파일을 업로드하는 것이 아니라 Netlify에 올라간 앱을 불러와서 보여주는 방식으로 진행합니다.

iframe으로 삽입

✔ 서버 부담 없음
✔ React / SPA 구조 유지
✔ 깨질 일 거의 없음
✔ 블로그용으로 최적

Netlify 주소 복사

https://quiz-app-huchu90.netlify.app

워드프레스 글 또는 페이지 열기

블록 편집기(Gutenberg) 기준으로 사용자정의 HTML 블록을 추가합니다.

아래 코드 그대로 붙여넣기

<iframe 
  src="https://quiz-app-huchu90.netlify.app"
  width="100%"
  height="700"
  style="border: none;"
  loading="lazy">
</iframe>
  • width="100%" → 모바일 대응
  • height="700" → 필요하면 900~1200으로 늘립니
  • border: none → 테두리 제거

미리보기를 하니 워드프레스 안에서 앱이 그대로 실행됩니다!!!

전체화면 느낌을 주고 싶으면

<iframe 
  src="https://quiz-app-huchu90.netlify.app"
  width="100%"
  height="1000"
  style="border:none; min-height: 100vh;">
</iframe>

태그

댓글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

관련 게시물