Skip to content

Twikoo

이전 문서: Twikoo 게시일: 2022-12-20 마지막 편집: 2024-7-31 원래 분류: 📩 댓글 플러그인 태그: NotionNext 요약: NotionNext는 Twikoo 댓글 플러그인을 지원합니다. 사용하기 좋은 댓글 플러그인입니다.

Twikoo

댓글 영역 사용자의 추천으로 Twikoo를 사용하기 시작했습니다. Twikoo는 Tencent CloudBase를 기반으로 하는 간결하고 안전한 무료 정적 사이트 댓글 시스템입니다. 사용해 본 뒤 기능이 강력하다고 판단해 현재는 주요 댓글 플러그인으로 사용하고 있습니다.

Twikoo는 즉시 알림, 스팸 방지 플러그인, 개인정보 설정 등을 지원합니다. 별도의 관리자 백엔드에 로그인하지 않아도 되며, 페이지 댓글 영역에서 댓글 관리와 플러그인 설정을 바로 할 수 있습니다.

💡 Twikoo는 Valine 댓글 데이터 원클릭 가져오기를 지원하므로 댓글 데이터를 쉽게 이전할 수 있습니다.

Untitled

빠른 설정

최신 NotionNext 버전은 이 댓글 플러그인을 지원합니다. 설정 방법은 간단합니다.

Vercel 대시보드에 환경 변수 NEXT_PUBLIC_COMMENT_ENV_ID를 추가하고, 값에는 배포한 twikoo 백엔드 주소를 입력합니다. 아래는 예시입니다.

Untitled

설정 후 프로젝트를 redeploy하면 아래와 같은 구성이 적용됩니다.

Untitled

💡 그렇다면 Twikoo 백엔드 주소는 어디서 얻을까요?

Vercel을 사용하면 댓글 데이터를 저장할 Twikoo 백엔드를 빠르게 배포할 수 있습니다.

Twikoo 배포 단계

Twikoo의 백엔드 데이터 저장은 MongoDB 데이터베이스를 기반으로 합니다. 먼저 무료 온라인 MongoDB 데이터베이스를 등록하고 생성할 수 있습니다.

💡 저는 Twikoo를 오래 다시 배포하지 않았습니다. 아래 튜토리얼 외에도 공식 최신 문서와 영상을 참고하는 것을 권장합니다.

Twikoo 배포는 공식 문서를 우선 참고하세요.

Cloud Function Deployment | Twikoo Docs

간결하고 안전한 무료 정적 사이트 댓글 시스템입니다.

관련 영상 튜토리얼:

Twikoo Vercel deployment tutorial on Bilibili

실제 절차

아래는 이전에 배포했던 절차입니다. MongoDB 관리자 화면 변경과 Twikoo 코드 업그레이드 때문에 이 문서는 2022-12-20 기준의 예전 절차입니다. 전체 흐름 참고용으로만 보세요.

1. MongoDB 데이터베이스 만들기

MongoDB Cloud

MongoDB Cloud는 여러 데이터 제품을 제공하며, 애플리케이션용 데이터 구축을 더 빠르고 쉽게 만들어 줍니다.

1. 회원가입, 로그인, 데이터베이스 생성

GitHub 로그인을 권장합니다오른쪽의 무료 요금제를 선택합니다지역을 선택하고 Create Cluster를 클릭합니다사용자 이름과 비밀번호를 만듭니다

💡 아래에서 데이터베이스 접근을 허용할 IP 주소를 설정해야 합니다. 0.0.0.0으로 설정하면 모든 주소의 접근을 허용합니다. 어떤 IP에서 접근할지 알 수 없다면 이 값을 사용할 수 있습니다.

순서: 왼쪽 메뉴 Network Access → 오른쪽 패널 Add IP Address

Untitled

IP 주소 0.0.0.0/0을 입력하고 제출합니다.

Untitled

2. 데이터베이스 연결 주소 가져오기

대시보드 홈에서 Connect를 클릭한 뒤 MongoDB Drivers를 선택합니다Drivers 유형을 선택합니다여기의 버전 번호는 중요하지 않습니다

💡 <password>는 설정한 비밀번호로 직접 바꿔야 합니다. 비밀번호를 입력할 때 양쪽의 꺾쇠괄호 <>는 제거하세요.

예시: mongodb+srv://username:123456@xx.com

2. Vercel 원클릭 배포

1. 링크를 클릭해 코드 가져오기

💡 일부 사용자는 Vercel 배포 시 An unexpected error occurred... 오류가 발생한다고 피드백했습니다. Twikoo 공식 버전의 원클릭 배포로는 성공하는 경우가 있으므로 공식 코드를 참고하는 것을 권장합니다.

Cloud Function Deployment | Twikoo Docs

~~개선판: 공식 저장소 배포에 실패하면 이 링크를 시도~~

New Project - Vercel

이전 방식: 아래 링크로 원클릭 배포

New Project - Vercel

2. `Create`를 클릭해 Twikoo 코드를 저장소로 복사하기

Untitled오른쪽 위 Continue to Dashboard를 클릭합니다

3. MongoDB 데이터베이스 주소 설정

환경 변수 MONGODB_URI를 추가합니다. 값은 이전 단계에서 얻은 MongoDB 연결 주소입니다. 연결 문자열의 <password>는 설정한 MongoDB 비밀번호로 바꾸세요.

Twikoo 백엔드에 MONGODB_URI 환경 변수 추가추가 후 다시 배포합니다

배포 후 이 서비스가 공개 접근 가능한지 확인해야 합니다. Vercel 대시보드의 권한 검증이 꺼져 있어야 합니다. SettingsDeployment Protection에서 Disabled 상태인지 확인하세요.

149B6744-99AC-46B3-88C4-7114006F620A.jpeg

위 배포가 끝나면 Vercel의 Twikoo 백엔드 페이지를 얻게 됩니다. Vercel 대시보드의 Domains에서 플랫폼이 할당한 기본 도메인을 확인할 수 있으며, 직접 사용자 정의 도메인을 연결할 수도 있습니다. 자세한 내용은 Vercel 사용자 정의 도메인 연결 문서를 참고하세요.

https://twikoo.tangly1024.com/

NotionNext에 설정

Twikoo 백엔드 주소를 NotionNext 백엔드에 설정하고 redeploy하면 됩니다.

Untitled

완료

여기까지 완료입니다. 오른쪽 아래의 작은 톱니바퀴를 클릭하면 관리자 비밀번호와 더 많은 기능을 설정할 수 있습니다.

Untitled

Twikoo 문서

공식 문서에서 설치와 배포 도움말을 확인하고 Twikoo의 더 많은 기능을 볼 수 있습니다.

Twikoo

Twikoo는 여러 배포 방식을 제공합니다. 공식 문서를 확인해 현재 권장되는 배포 방식을 선택하세요.

마무리

NotionNext는 다른 여러 댓글 플러그인도 지원합니다. 아래 문서를 참고하세요.

NotionNext에 댓글 플러그인을 추가하는 방법

Cusdis, Giscus, Gitalk, Utterances를 NotionNext에 추가하는 단계별 튜토리얼입니다.

NotionNext 댓글 플러그인 설정 - Valine/Waline

Valine과 Waline은 LeanCloud를 기반으로 하는 빠르고 간결한 댓글 시스템입니다. 데이터 구조가 호환되며, 배포와 설정 방법은 해당 문서를 참고하세요.

FAQ

Twikoo는 예전에 블로그 목록에 글별 댓글 수를 직접 표시할 수 있었지만, 성능 소모가 커서 현재는 꺼 두었습니다. 이 기능은 당분간 지원하지 않습니다.

SQL
COMMENT_TWIKOO_COUNT_ENABLE:
    process.env.NEXT_PUBLIC_COMMENT_TWIKOO_COUNT_ENABLE || false, // Whether to show comment counts in the blog list

원문 링크

https://docs.tangly1024.com/article/notionnext-twikoo