n8n 검색 워크플로우를 도메인과 연결 및 동작하기

1) n8n Cloud에서 2주 무료 버전으로 새로운 워크플로우를 생성해줬다. 

이전에 유튜브 링크를 받아 응답을 생성하고, 네이버 & 구글 검색 기능을 가진 워크플로우를 생성했다.

 

로컬에서 실행하지 않아도, 특정 주소로 접근해서 워크플로우가 외부에서도 동작할 수 있도록 하기 위해서 위와 같은 과정을 진행했다. 

https://app.n8n.cloud/dashboard

n8n

여기서 워크플로우를 Active 상태로 설정해주고, When chat message received 노드의 Make Chat Publicly Avaliable도 활성화해주면 Chat URL이 나타나는데 이걸 웹훅으로 던져서 사용할 수 있다!

https://app.n8n.cloud/ 이런식으로 된 주소가 필요한데, 무료가 끝나면 유료로 사용해야한다..

 

 

2) index.html 파일 작성

연결과 응답을 먼저 확인해보고 싶었기 때문에 VS Code로 화면은 간단하게 클로드에 물어봐서 구현했다. 여기서 

이런식으로 위에서 복사한 웹훅 URL을 던져주면 워크플로우에서 응답한 결과를 가져올 수 있다고 한다. 

 

 

3) 깃허브에 index.html 파일 업로드

새로운 저장소를 생성해주고 "uploading an existing file" 클릭 → index.html 드래그 앤 드롭 → "Commit changes" 이 순서로 진행해 파일을 업로드했다. 

 

4) Vercel 배포

Vercel을 선택한 이유는

1) 가장 쉬움 (2-3분 배포) 2. 완전 무료 3. 빠른 속도 (전 세계 CDN) 4. 도메인 연결 간단 5. SSL 자동 6. 설정 거의 없음 7. Git 통합 등 ... 너무 많다. 하지만 상업적 사용은 제한된다고 한다. (깃허브에 파일만 올려도 자동 배포가 된다.. 대박)

개인적으로 간단한 프로젝트를 올리고 쓰기엔 너무 좋은 것 같다. 

 

간단하게 배포를 진행하기 위해 Vercel 사이트에 가입 후 깃허브 계정으로 로그인을 진행했다. 

Repository를 연결한 후 아까 생성한 저장소를 Import 해준다. 

 

넘어가면 이런 창이 뜨는데 Depoly 클릭

 

완료되면 이렇게 대시보드 화면으로 넘어갈 수 있는데, 여기 Domains 주소를 클릭해도 잘 동작한다. 

 

https://vercel.com/

Vercel: Build and deploy the best web experiences with the AI Cloud – Vercel

 

 

5) 개인 도메인 연결

가비아에서 구매한 도메인과도 연결해봤다. 위 사진을 보면 내 도메인이 추가되어 있는데, vercel 사이트에서 add Domain 해서 추가해준 후 가비아에서 DNS 설정해주는 과정이 필요하다. 

차이는 vercel은 무료 도메인이고, 가비아에서 구매한 도메인은 유료 도메인인데 더 가독성있고 전문성 있어 보이는 도메인이다? 정도의 차이만 있는 것 같다. 

가비아 페이지 > DNS 관리 > 내가 구매한 도메인의 DNS 정보 수정 > 레코드 수정 > 레코드 추가

 

두 개의 레코드를 추가해줬다. 

(필수) A 레코드는 기본적인 DNS 레코드로 해당 도메인의 IP 주소를 설정하며 @ = mychatbot.kr (도메인 자체) 76.76.21.21 = Vercel 서버의 IP이다. 

(선택이지만 추천) CNAME은 www 같은 별칭을 연결해준다. 

사용자가 domain.com, www.domain.com,  WWW.domain.com, Www.domain.com 이렇게 입력했을 때 CNAME이 없으면 www.domain.com도   오류가 생길 수 있다. CNAME이 있으면 모두 작동할 수 있게 하는 역할을 한다.

https://www.gabia.com/

웹을 넘어 클라우드로. 가비아

 

 

 

의도한대로 결과를 잘 가져오는걸 확인할 수 있다. 

최신 일자를 자꾸 제대로 안가져와서 AI Agent에 프롬프트를 설정해주고, 오늘 일자를 가져오는 code 노드를 추가해줬다. 

pinecone에 있는 정보도 잘 가져온다. 

 

// 현재 날짜 계산 (한국 시간)
const now = new Date();
const koreaTime = new Date(now.toLocaleString('en-US', { timeZone: 'Asia/Seoul' }));

const year = koreaTime.getFullYear();
const month = String(koreaTime.getMonth() + 1).padStart(2, '0');
const day = String(koreaTime.getDate()).padStart(2, '0');

const currentDate = `${year}년 ${month}월 ${day}일`;

// 원본 메시지에 날짜 정보 추가
const originalMessage = $input.item.json.chatInput;
const messageWithDate = `[현재 날짜: ${currentDate}]\n\n${originalMessage}`;

// 결과 반환
return {
  chatInput: messageWithDate,
  sessionId: $input.item.json.sessionId,
  current_date: currentDate
};

 

 

프롬프트는 내가 설정한 유튜브 링크과 관련된 내용이면 DB를 조회하고, 아닌 경우 검색 워크플로우를 이용해 결과를 응답하도록 설정했다.