EP.1 링크 단축 서비스 (2) — Vercel 연결 및 데이터베이스 구축

잇(IT)! 가이드
EP.1 링크 단축 서비스 (2) — Vercel 연결 및 데이터베이스 구축
잇(IT)! 가이드는 IT 프로젝트를 따라해보실 수 있도록 하는 가이드입니다. 여러 프로젝트를 단계별로 설명드리며, 누구나 쉽게 따라할 수 있도록 설명해 드립니다.

 

본 포스팅은 이전 게시물과 이어지는 내용입니다. 아래 게시글을 먼저 확인해 보시기를 추천드립니다.

2024.05.14 - [잇(IT)! 가이드] - EP.1 링크 단축 서비스 (1) — 시작하기

EP.1 링크 단축 서비스 (1) — 시작하기

 

Vercel 연결

vercel.json 설정

이전 게시글까지 잘 따라왔다면, GitHub 리포지토리에 app.js라는 파일과 package.json이라는 파일이 생성되어 있을 것이다.

우리는 이제, 이 리포지토리를 서버에 호스팅하기 위해 Vercel이라는 사이트를 이용할 것이다.

Vercel에 대한 설명과 설정 방법은 아래 포스팅에 자세히 설명해 놓았으니, 아래 게시글을 보고 다시 이 글로 돌아오자.

이전 게시글을 봤다면, 남은 단계를 모두 진행하면 된다.

2024.05.13 - [잇(IT)! 가이드] - EP.0 웹사이트 무료로 호스팅하기 (feat. Vercel & GitHub)

EP.0 웹사이트 무료로 호스팅하기 (feat. Vercel & GitHub)

 

지금은 app.js에 아무 내용이 없어 제대로 실행이 되지 않을 것이다.

또한, app.js에 내용을 작성해도 Vercel에서 이를 인식하지 못해 제대로 작동하지 않을 것이다.

이를 해결하기 위해, 우리는 vercel.json이라는 파일을 만들어 주어야 한다.

VSCode에서 vercel.json이라는 파일을 새로 만들어 주고, 아래 내용을 복붙해 준다.

{
    "version": 2,
    "builds": [
        {
            "src": "app.js",
            "use": "@now/node"
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "app.js"
        }
    ]
}

 

Git Commit & Push

GitHub Desktop으로 돌아가 이 내용을 Commit & Push해 주자. VSCode 내의 Git 확장 기능을 사용해도 좋다. (이와 관련해서는 구글 검색을 해보면 많은 자료가 나와 있을 것이다.)

Commit & Push

 

데이터베이스 구조

데이터베이스를 구축하기 전에, 간단하게 우리의 데이터베이스 구조와 서버의 연결 에 대해 살펴보자면, 우리는 links라는 이름의 테이블에 우리가 사용할 링크의 정보(원래 url, 나중 url, 보안 기능, 설명 등등등)를 담아놓고, 서버에서 접속한 url과 데이터베이스의 내용을 비교하여 원래 url로 갈 수 있도록 한다. 이 때, 접속과 동시에 로그 기록을 남겨 ip주소와 useragent 등의 정보를 logs 테이블에 저장하도록 하였다.

DISCLAIMER:
본 블로그에서는 링크 연결에 대해 접속자의 데이터를 로그에 기록하는 기능을 포함하여 설명합니다.
접속자 데이터 수집에 대한 개인정보 보호법 준수를 포함하되, 이에 국한되지 않는 모든 책임은 방문자님께 있음을 알려드립니다.

데이터베이스 구축

Vercel의 postgresql 데이터베이스 생성

다시 Vercel 창을 열고, 스토리지 탭에 접속한다.

Storage

Postgres라는 데이터베이스를 선택하여 만들어 준다.

Postgres

동의를 눌러주고, 리전 선택에서 한국과 그나마 가까운 싱가포르를 선택해 준다.

(다른 곳을 선택해도 큰 문제가 있는 것은 아니다.)

그리고, 데이터베이스 이름을 원하는 것으로 바꿔준다.

리전 선택

이후, connect 버튼을 눌러준다.

데이터베이스—프로젝트 연결

바로 열리는 페이지에서 .env.local 탭을 눌러 나오는 데이터베이스 접속 정보를 메모해 둔다.

Show secret 버튼을 눌러 상세정보를 표시할 수 있다.

아래 데이터에 유념해서 메모해 준다.

POSTGRES_USER="************"
POSTGRES_HOST="************"
POSTGRES_PASSWORD="************"
POSTGRES_DATABASE="************"

 

 

Datagrip 설치

SQL 문법에 대해 잘 안다면 직접 연결해서 사용하거나, 코드를 짜서 데이터베이스를 관리할 수도 있지만 본 프로젝트에서는 GUI(그래픽 사용자 인터페이스) 기반의 툴을 사용해서 쉽게 데이터베이스를 관리하고자 한다.

이를 위해서 Datagrip을 설치해 준다. (30일 무료 체험판을 제공하며, 학생은 무료이다.) 만약 다른 소프트웨어를 사용하고 있다면, 그 제품을 써도 무방하다. (Tableplus도 무료로 쓸만 하다.) 다만, 본 예시에서는 Datagrip을 기준으로 설명하도록 하겠다.

https://www.jetbrains.com/ko-kr/datagrip/

DataGrip: JetBrains가 만든 데이터베이스 및 SQL용 크로스 플랫폼 IDE

데이터 소스 추가

Datagrip을 열고, File 메뉴>아래 경로(macOS 기준)를 따라서 Postgresql을 추가해 준다.

데이터 소스 추가

이후, 메모해둔 정보를 입력해 준다.

데이터 소스 추가 (정보 입력)

콘솔 확인

만약 잘 추가했다면, 아래와 같은 페이지를 볼 수 있을 것이다.

성공 페이지

links 테이블 생성

위에서 열린 콘솔에 아래 명령어를 입력해 준다.

id는 고유한 값으로 각 링크와 1:1로 연결된다. alias는 [도메인주소]/[텍스트] 형식에서 [텍스트] 부분에 들어갈 문자열을 뜻한다.

url은 단축할 url, name은 내부적으로 확인할 별칭, status와 password는 보안 관련 기능(추후에 설명하도록 하겠다.), description은 내부적으로 확인할 설명, timestamp는 생성 시간을 의미한다.

또한, ios_url과 android_url은 접속 장치에 따라 다른 url로 접속하도록 할 때 필요한 기능이다.

CREATE TABLE links(
    id SERIAL PRIMARY KEY,
    alias text,
    url text,
    name text,
    status integer DEFAULT 1,
    password text,
    description text,
    timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    ios_url text,
    android_url text
);

 

logs 테이블 생성

links 테이블이 잘 생성된 것을 확인하고, 아래 명령어도 콘솔에 다시 입력해 주자.

이전에 입력한 명령어는 지우는 것을 잊지 말자.

마찬가지로 id를 만들어 주고, ip주소는 방문자의 ip주소를 기록하는 공간이며, alias를 통해 위에서 만든 links 테이블과 연결된다.

또한, 접속 시간을 timestamp에 기록하며, 방문자 브라우저의 상세정보를 useragent에 기록한다.

CREATE TABLE logs(
    id SERIAL PRIMARY KEY,
    ip text,
    alias text,
    timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    useragent text
);

 

이번 단계의 게시물은 여기까지이다.

다음 단계에서는 실제 서버 측 코드를 작성하고, 데이터베이스와 연결하는 작업을 할 것이다.

다음 단계부터가 진짜라고 할 수 있으니(?) 기대해도 좋다.

 

다음 편 바로가기

2024.05.16 - [잇(IT)! 가이드] - EP.1 링크 단축 서비스 (3) — 서버측 코드 작성

EP.1 링크 단축 서비스 (3) — 서버측 코드 작성