Vercel 배포
서버 패키지로 @waline/vercel 패키지를 배포했으며, Vercel 배포가 가장 권장하는 방법입니다.
배포 방법
위의 파란색 버튼을 클릭하면 Waline 템플릿으로 배포하기 위해 Vercel로 이동합니다.
노트
로그인하지 않은 경우 GitHub으로 로그인하는 것을 권장합니다.
Vercel 프로젝트 이름을 입력한 후
Create를 클릭합니다.
Create Project Vercel이 Waline 예제 템플릿을 기반으로 입력한 이름의 저장소를 자동으로 생성하고 초기화합니다.
new project 1~2분 후 Vercel이 배포를 완료합니다.
Go to Dashboard버튼을 클릭하여 애플리케이션 대시보드로 이동합니다.
dashboard
데이터베이스 생성
상단의
Storage를 클릭하여 스토리지 서비스 페이지로 이동한 후Create Database를 선택합니다.Marketplace Database Providers에서Neon을 선택한 후Continue를 클릭합니다.
storage Neon 계정을 생성하라는 메시지가 표시됩니다.
Accept and Create를 선택합니다. 그런 다음 리전과 할당량을 포함한 데이터베이스 플랜 구성을 선택합니다. 기본값을 유지하고Continue를 클릭해도 됩니다.
neon 데이터베이스 이름을 정의합니다. 기본값을 유지하고
Continue를 클릭해도 됩니다.
neon 이제
Storage아래에 데이터베이스가 표시됩니다. 클릭한 후Open in Neon을 선택하여 Neon으로 이동합니다. Neon에서 왼쪽의SQL Editor를 선택하고, waline.pgsql의 SQL을 에디터에 붙여넣은 후Run을 클릭하여 테이블을 생성합니다.
neon 
neon 잠시 후 성공 메시지가 표시됩니다. Vercel로 돌아가서
Deployments를 클릭한 후, 최신 배포에서Redeploy를 클릭하여 새 데이터베이스 구성을 적용합니다.
redeploy success Vercel이
Overview로 이동하여 배포를 시작합니다.STATUS가Ready가 되면,Visit을 클릭하여 배포된 사이트를 엽니다. 이 URL이 서버 주소입니다.
visit
도메인 연결
Settings - Domains를 클릭하여 도메인 설정 페이지로 이동합니다.
연결할 도메인을 입력하고 Add 버튼을 클릭합니다.
Add domain 도메인 서비스 서버에 새
CNAME레코드를 추가합니다.Type Name Value CNAME example cname.vercel-dns.com 적용된 후에는 자신의 도메인으로 Waline에 접속할 수 있습니다. 🎉
- 댓글 시스템: example.your-domain.com
- 관리자 패널: example.your-domain.com/ui
success
HTML 가져오기
웹 페이지에서 다음과 같이 설정합니다:
https://unpkg.com/@waline/client@v3/dist/waline.css에서 Waline 스타일을 가져옵니다.https://unpkg.com/@waline/client@v3/dist/waline.js에서init()을 사용하는<script>태그를 생성하고, 필수 옵션el과serverURL을 전달합니다.el은 Waline을 렌더링하는 데 사용되는 요소입니다. CSS 선택자 문자열 또는 HTMLElement가 될 수 있습니다.serverURL은 이전 단계에서 얻은 서버 주소입니다.
<head>
<!-- ... -->
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
<!-- ... -->
</head>
<body>
<!-- ... -->
<div id="waline"></div>
<script type="module">
import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
init({
el: '#waline',
serverURL: 'https://your-domain.vercel.app',
});
</script>
</body>댓글 관리
- 배포 후
<serverURL>/ui/register에 접속하여 등록합니다. 최초 등록한 사용자가 관리자가 됩니다. - 로그인 후 관리자는 댓글을 편집, 표시 또는 삭제하여 관리할 수 있습니다.
- 사용자는 댓글 입력란을 통해서도 등록할 수 있습니다. 로그인 후 프로필 페이지로 이동됩니다.