서버 배포 및 지속 개발 가이드
로컬에서 개발한 작품을 서버에 올리고 계속 개발하기
📌 이 가이드가 필요한 이유
•세미나에서 여러분은 본인 컴퓨터(로컬)에서 Cursor로 작품을 개발했습니다
•Next.js (프론트엔드) 또는 NestJS (백엔드) 프레임워크를 사용했습니다
•이제 실서비스 운영과 공모전 참여를 위해 서버에 올려야 합니다
•서버에서도 Cursor를 사용하여 계속 개발할 수 있습니다
⚡프로젝트 타입별 배포 방법
📄정적 파일 (HTML/CSS/JS)
단순 HTML, CSS, JavaScript로만 구성된 프로젝트
⚙️동적 프로젝트 (Next.js/NestJS)
세미나에서 개발한 대부분의 프로젝트 (서버 실행 필요)
💡 이 가이드는 Next.js/NestJS 프로젝트 배포를 중심으로 설명합니다.
단순 정적 파일은 Step 2의 드래그 앤 드롭만으로 충분합니다.
🗺️전체 작업 흐름
서버 접속
Cursor에서 SSH로 서버에 연결
파일 업로드
로컬 작품을 서버로 복사
지속 개발
서버에서 계속 개발하기
1️⃣Step 1: 서버에 접속하기
1-1서버 접속 정보 확인
문자로 받은 서버 접속 정보를 확인하세요:
1-2Cursor에서 SSH 연결
💡 SSH란? 원격 서버에 안전하게 접속하는 방법입니다. 마치 여러분 컴퓨터처럼 서버를 사용할 수 있게 해줍니다.
📝 따라하기:
- 1.
Cursor 왼쪽 하단의
연결 아이콘클릭(또는 F1 키를 누르고 "Connect to Host" 검색)
- 2.
"Connect to Host..." 선택
- 3.
주소 입력:
yourname@syu.my(yourname을 본인 아이디로 변경)
- 4.
Fingerprint 저장 확인
처음 접속 시 "Are you sure you want to continue?" 메시지가 나오면 yes 입력
- 5.
비밀번호 입력
문자로 받은 비밀번호를 입력하세요 (입력 시 화면에 표시되지 않습니다)
✅ 성공! Cursor 왼쪽 하단에 "SSH: yourname@syu.my"가 표시되면 연결 성공입니다.
1-3작업 디렉토리 열기
📝 따라하기:
- 1.
Cursor 메뉴에서 File → Open Folder... 클릭
- 2.
경로 입력:
/www/yourname/(yourname을 본인 아이디로 변경)
- 3.
OK 버튼 클릭
✅ 성공! 이제 서버의 /www/yourname/ 디렉토리가 Cursor에서 열렸습니다.
2️⃣Step 2: 프로젝트 업로드 및 환경 구축
2-1로컬 프로젝트 준비
본인 컴퓨터에서 개발한 프로젝트 폴더를 찾아주세요:
📦 Next.js 프로젝트 확인
- ✓
package.json파일이 있어야 함 - ✓
next.config.js파일이 있어야 함 - ✓
app/또는pages/폴더가 있어야 함
📦 NestJS 프로젝트 확인
- ✓
package.json파일이 있어야 함 - ✓
nest-cli.json파일이 있어야 함 - ✓
src/폴더가 있어야 함
⚠️ 주의: node_modules 폴더는 업로드하지 마세요! 서버에서 다시 설치합니다.
2-2프로젝트 소스 업로드
📝 방법 1: Cursor에서 드래그 앤 드롭 (추천)
- 1.
Cursor에서 서버 디렉토리가 열려있는지 확인
(왼쪽 사이드바에 /www/yourname/ 경로가 보여야 함)
- 2.
본인 컴퓨터의 파일 탐색기에서 프로젝트 폴더 열기
- 3.
프로젝트 파일들을 선택 (node_modules 제외)
선택할 파일/폴더:
- • package.json
- • next.config.js (또는 nest-cli.json)
- • src/ 또는 app/ 폴더
- • public/ 폴더 (있는 경우)
- • .env 파일 (있는 경우)
- 4.
선택한 파일들을 Cursor 왼쪽 사이드바로 드래그 앤 드롭
업로드가 완료될 때까지 기다리세요 (크기에 따라 수 분 소요)
📝 방법 2: 터미널에서 압축 파일 업로드
큰 프로젝트는 압축해서 올리는 것이 더 빠릅니다:
1. 로컬에서 프로젝트 압축 (node_modules 제외):
zip -r myproject.zip . -x "node_modules/*" ".git/*"2. Cursor에서 압축 파일을 드래그 앤 드롭
3. 서버 터미널에서 압축 해제:
unzip myproject.zip2-3Node.js 환경 확인
서버에 Node.js가 설치되어 있는지 확인합니다:
Cursor 터미널 열기 (Ctrl+` 또는 Cmd+`):
node --versionv18 이상이면 OK!
npm 버전 확인:
npm --version2-4패키지 설치
프로젝트에 필요한 패키지들을 설치합니다:
터미널에서 실행:
npm install⏱️ 설치 시간: 보통 2-5분 소요 (프로젝트 크기에 따라 다름)
💡 Tip: 설치 중 에러가 발생하면 npm install --legacy-peer-deps를 시도해보세요.
2-5프로젝트 빌드
Next.js 프로젝트 빌드
npm run build빌드가 완료되면 .next 폴더가 생성됩니다.
NestJS 프로젝트 빌드
npm run build빌드가 완료되면 dist 폴더가 생성됩니다.
⚠️ 빌드 에러가 발생하면?
1. 에러 메시지를 잘 읽어보세요
2. Cursor AI에게 에러 메시지를 보여주고 해결 방법을 물어보세요
3. 환경 변수(.env) 파일이 필요한지 확인하세요
2-6서버 실행
개발 모드로 실행 (테스트용)
npm run dev개발 모드는 코드 수정 시 자동으로 재시작됩니다.
프로덕션 모드로 실행 (실서비스용)
Next.js:
npm run startNestJS:
npm run start:prodPM2로 백그라운드 실행 (추천)
서버를 종료해도 계속 실행되도록 PM2를 사용합니다:
1. PM2 설치 (최초 1회):
npm install -g pm22. 서버 시작:
pm2 start npm --name "myapp" -- start3. 상태 확인:
pm2 list4. 재시작:
pm2 restart myapp5. 중지:
pm2 stop myapp2-7할당된 포트 확인 및 Nginx 설정
🔢할당된 포트 확인하기
각 계정마다 고유한 포트가 배정되어 있습니다. 포트 충돌을 방지하기 위해 반드시 할당된 포트를 사용하세요!
터미널에서 포트 정보 확인:
cat ~/.port-info또는 README 파일 확인:
cat /www/yourname/README.txt포트 정보 예시:
⚙️ Nginx 설정 (자동 구성됨)
Nginx는 이미 다음과 같이 구성되어 있습니다:
- ✓정적 파일: https://yourname.syu.my → /www/yourname/ (기본)
- ✓백엔드 API: https://yourname.syu.my/api → 백엔드 포트 활성화됨
- ○프론트엔드: Next.js 실행 시 설정 필요 (아래 참고)
✨ 백엔드 API가 자동으로 연결됩니다!
NestJS를 할당된 백엔드 포트에서 실행하면, 다음 경로로 자동 접속됩니다:
https://yourname.syu.my/api/users → localhost:4001/usershttps://yourname.syu.my/api/posts → localhost:4001/posts💡 NestJS 앱에서는 별도의 설정 없이 바로 사용 가능합니다!
💡 Next.js를 메인으로 사용하려면?
Nginx 설정 파일에서 프론트엔드 프록시 부분의 주석을 해제해야 합니다.
Cursor AI에게 물어보세요:
"Nginx 설정 파일 /etc/nginx/sites-available/yourname.syu.my를 열어서 프론트엔드 프록시 부분의 주석을 해제하고, 정적 파일 제공 부분은 주석 처리해줘. 그리고 nginx를 재시작해줘."Nginx 설정 파일 위치:
/etc/nginx/sites-available/yourname.syu.my설정 수정 후 Nginx 재시작:
sudo nginx -t && sudo systemctl reload nginx🎯 포트 설정 체크리스트
-p [포트번호] 추가await app.listen([포트번호]) 설정3️⃣Step 3: 서버에서 계속 개발하기
3-1서버에서 개발하는 이유
- ✓실시간 반영: 수정 즉시 웹사이트에 반영됩니다
- ✓어디서나 개발: 다른 컴퓨터에서도 접속하여 개발 가능
- ✓백업 자동: 서버에 저장되므로 안전합니다
- ✓공모전 준비: 실제 서비스처럼 운영하며 개선 가능
3-2Cursor AI로 기능 추가하기
💡 프롬프트 예시:
디자인 개선:
"메인 페이지 배경색을 그라디언트로 바꾸고, 버튼을 더 크고 눈에 띄게 만들어줘"기능 추가:
"사용자가 입력한 데이터를 엑셀 파일로 다운로드할 수 있는 버튼을 추가해줘"반응형 디자인:
"모바일에서도 잘 보이도록 반응형으로 만들어줘"데이터베이스 연동:
"입력한 데이터를 데이터베이스에 저장하고 나중에 불러올 수 있게 해줘"3-3실시간 테스트하기
📝 개발 → 테스트 사이클:
- 1.
Cursor에서 코드 수정
AI에게 원하는 기능을 요청하거나 직접 수정
- 2.
파일 저장 (Ctrl+S 또는 Cmd+S)
- 3.
웹 브라우저에서 새로고침 (F5)
https://yourname.syu.my - 4.
변경사항 확인 및 추가 수정
3-4고급 기능 활용하기
🗂️ 터미널 사용하기
Cursor에서 Ctrl+` (백틱)을 눌러 터미널을 열 수 있습니다:
파일 목록 보기:
ls -la현재 위치 확인:
pwd폴더 만들기:
mkdir images🔍 파일 검색하기
Cursor에서 Ctrl+P (또는 Cmd+P)를 눌러 파일을 빠르게 찾을 수 있습니다
💾 백업하기
중요한 변경 전에는 파일을 복사해두세요:
cp index.html index.html.backup🔧자주 묻는 질문 & 문제 해결
Q1. 서버 접속이 안 돼요
✓ 아이디와 비밀번호를 정확히 입력했는지 확인하세요
✓ 비밀번호 입력 시 화면에 표시되지 않는 것이 정상입니다
✓ 인터넷 연결을 확인하세요
✓ 문제가 계속되면 관리자에게 문의하세요
Q2. 파일을 업로드했는데 웹사이트에 반영이 안 돼요
✓ 파일이 /www/yourname/ 디렉토리에 있는지 확인하세요
✓ index.html 파일이 있는지 확인하세요
✓ 브라우저에서 강력 새로고침을 해보세요 (Ctrl+Shift+R)
✓ 파일 권한 문제일 수 있습니다. 터미널에서 chmod 644 *.html 실행
Q3. 이미지나 CSS 파일이 안 보여요
✓ 이미지/CSS 파일도 서버에 업로드했는지 확인하세요
✓ HTML에서 파일 경로가 올바른지 확인하세요
✓ 절대 경로 대신 상대 경로를 사용하세요 (예: ./images/logo.png)
Q4. 데이터베이스를 사용하고 싶어요
✓ 간단한 작품은 localStorage를 사용하세요 (브라우저 저장소)
✓ 서버 데이터베이스가 필요하면 관리자에게 문의하세요
✓ Cursor AI에게 "localStorage를 사용해서 데이터를 저장하고 불러오는 기능을 만들어줘"라고 요청하세요
Q5. 다른 사람과 협업하고 싶어요
✓ 같은 서버 계정을 공유하면 여러 명이 동시에 개발할 수 있습니다
✓ 하지만 동시에 같은 파일을 수정하면 충돌이 발생할 수 있으니 주의하세요
✓ 나중에는 Git을 배워서 전문적인 협업을 할 수 있습니다
🎯다음 단계: 공모전 준비
✨ 작품 완성도 높이기
- •사용자 피드백을 받아 개선하세요
- •모바일에서도 잘 작동하는지 확인하세요
- •에러 처리를 추가하세요
- •로딩 표시를 추가하세요
📝 문서화하기
- •프로젝트 소개 페이지를 만드세요
- •사용 방법을 설명하세요
- •스크린샷을 추가하세요
🎬 시연 영상 준비
- •주요 기능을 보여주는 영상을 녹화하세요
- •실제 업무에 어떻게 활용되는지 설명하세요
💬도움이 필요하신가요?
막히는 부분이 있거나 질문이 있으시면 언제든 문의하세요:
기획처 AI대학혁신센터
세미나 운영진이 도와드리겠습니다!