maknaiagent.net
개요
maknaiagent.net 도메인을 기준으로 Headless WordPress + Next.js 블로그를 단계별로 구축·마이그레이션하는 상세 가이드입니다. 초보자도 따라할 수 있도록 준비물, 서버·도메인 설정, WordPress 백엔드 구성, Next.js 프론트엔드 구현, SSL 적용, 배포 및 테스트까지 순서대로 설명합니다.
1 준비물과 전제 조건
- 필수 소프트웨어: Node.js v18+, npm 또는 yarn, Git, Ubuntu(또는 macOS/Windows WSL) 개발 환경
- 도메인:
maknaiagent.net에 대한 DNS 관리 권한 - 서버 옵션:
- 홈서버(Apache/Nginx) 또는 클라우드 VPS(예: AWS, DigitalOcean) — WordPress 호스팅용
- 프론트엔드 배포용: Vercel 권장(Next.js 최적화) 또는 자체 서버(Nginx + PM2)
- 백업 준비: 기존 사이트(카페24 등)가 있다면 파일과 DB 덤프 준비
2 WordPress 백엔드 준비 (콘텐츠 관리)
2.1 WordPress 설치
- 서버에 LAMP/LEMP 스택 설치 후 WordPress 설치
sudo apt update
sudo apt install apache2 mysql-server php php-mysql php-xml php-mbstring unzip
# 데이터베이스 생성
sudo mysql -e "CREATE DATABASE wpdb; CREATE USER 'wpuser'@'localhost' IDENTIFIED BY 'strongpassword'; GRANT ALL ON wpdb.* TO 'wpuser'@'localhost'; FLUSH PRIVILEGES;"
- WordPress 파일 업로드 및 설치 마법사 진행
2.2 REST API 또는 GraphQL 활성화
- 기본 REST API는 별도 설치 불필요:
https://maknaiagent.net/wp-json/wp/v2/posts - GraphQL 사용 시 플러그인 설치: WPGraphQL
2.3 퍼머링크와 CORS 설정
- 설정 → 고유주소에서
글 이름선택 - 외부 도메인(Next.js)에서 API 호출 시 CORS 문제 발생하면 플러그인으로 허용하거나 서버에서 헤더 추가
3 콘텐츠 마이그레이션 (카페24 → WordPress)
- 파일 백업: FTP로
public_html전체 다운로드 - DB 백업: phpMyAdmin에서
.sql내보내기 - 복원: 홈서버 WordPress에 파일 업로드, DB 임포트,
wp-config.phpDB 정보 수정 - 이미지 경로 문제 발생 시
Search Replace DB또는 WP CLI로 URL 치환
4 Next.js 프론트엔드 프로젝트 생성
4.1 프로젝트 초기화
npx create-next-app@latest maknai-frontend
cd maknai-frontend
4.2 환경변수 설정
프로젝트 루트에 .env.local 생성:
NEXT_PUBLIC_WP_API=https://maknaiagent.net/wp-json
4.3 데이터 호출 유틸 작성
lib/api.js
export async function getPosts() {
const res = await fetch(`${process.env.NEXT_PUBLIC_WP_API}/wp/v2/posts`);
if (!res.ok) throw new Error('Failed to fetch posts');
return res.json();
}
4.4 목록 페이지 구현
pages/index.js에서 getStaticProps 사용(SSG):
import { getPosts } from '../lib/api';
export default function Home({ posts }) {
return (
<main>
<h1>Maknai Agent Blog</h1>
<ul>{posts.map(p => <li key={p.id}>{p.title.rendered}</li>)}</ul>
</main>
);
}
export async function getStaticProps() {
const posts = await getPosts();
return { props: { posts }, revalidate: 60 };
}
4.5 상세 페이지 구현
pages/posts/[slug].js에서 getStaticPaths + getStaticProps로 정적 생성
5 스타일링, 이미지, SEO
- 스타일: Tailwind CSS 권장 (
npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p) - 이미지 최적화:
next/image사용, 외부 도메인 허용은next.config.js에images.domains설정 - SEO:
next/head로 메타 태그, Open Graph 설정
6 HTTPS 적용 및 리버스 프록시
6.1 도메인 DNS 설정
- DNS 제공자에서
A레코드:maknaiagent.net→ WordPress 서버 공인 IP www서브도메인도 동일하게 설정
6.2 Nginx 리버스 프록시 예시 (WordPress)
/etc/nginx/sites-available/maknaiagent
server {
listen 80;
server_name maknaiagent.net www.maknaiagent.net;
root /var/www/maknaiagent;
index index.php index.html;
location / {
try_files $uri $uri/ /index.php?$args;
}
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/run/php/php8.2-fpm.sock;
}
}
6.3 Let’s Encrypt 인증서 발급
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d maknaiagent.net -d www.maknaiagent.net
- 자동 갱신 테스트:
sudo certbot renew --dry-run
6.4 Next.js 프론트엔드 HTTPS
- Vercel 사용 시: Vercel이 자동으로 HTTPS 제공
- 자체 서버 배포 시: Nginx에서 프론트엔드 도메인에 대해 리버스 프록시 또는 정적 파일 서빙 후 Certbot으로 SSL 적용
7 배포 전략과 운영
- 개발 → 스테이징 → 프로덕션 워크플로 권장
- Vercel 배포: GitHub 연동 후
NEXT_PUBLIC_WP_API환경변수 설정 - 자체 서버 배포: PM2 또는 Docker로 Next.js 앱 실행, Nginx로 리버스 프록시
- 백업 및 모니터링: 정기 DB 백업, Uptime 모니터링, 로그 관리
8 테스트와 점검 체크리스트
- 브라우저에서
https://maknaiagent.net접속 시 SSL 자물쇠 표시 - 포스트 목록·상세 정상 출력, 이미지 로드 확인
- SEO 메타 태그 정상 반영(구글 인덱스 테스트 가능)
- 폼·댓글·로그인 등 동적 기능 정상 동작(필요 시 JWT 또는 OAuth 구성)
다음 단계 제안
현재 maknaiagent.net이 WordPress인지와 기존 호스팅 접근 권한(FTP/DB)을 알려주시면, 마이그레이션 체크리스트와 맞춤 실행 계획을 바로 작성하겠습니다.
