Python 으로 URL 단축기 만들기 | Flask 프로젝트

소개

이 프로젝트에서는 Python 과 Flask 를 사용하여 URL 단축기를 만드는 방법을 배웁니다. URL 단축기는 긴 URL 을 받아 더 짧고 관리하기 쉬운 URL 로 변환하는 도구입니다. 이는 소셜 미디어나 이메일에서 링크를 공유하거나 긴 URL 을 사용자 친화적으로 만들 때 유용할 수 있습니다.

👀 미리보기

URL shortener interface preview

🎯 과제

이 프로젝트에서는 다음을 배우게 됩니다.

URL 단축기에 필요한 프로젝트 폴더를 설정하고 파일을 만드는 방법.
원래 URL 과 해당 단축 URL 을 저장하기 위해 SQLite 데이터베이스를 설정하는 방법.
무작위 문자를 사용하여 짧은 URL 을 생성하는 방법.
사용자가 단축할 URL 을 제출하고 단축된 URL 을 표시할 수 있는 인덱스 페이지를 만드는 방법.
단축 URL 을 입력하면 사용자를 원래 URL 로 리디렉션하는 방법.
단축된 모든 URL 을 표시하는 기록 페이지를 만드는 방법.
프로젝트를 실행하고 웹 브라우저에서 테스트하는 방법.

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다.

Flask 프로젝트를 설정하고 필요한 파일을 만드는 방법을 이해합니다.
SQLite 를 사용하여 데이터베이스를 생성하고 쿼리를 실행합니다.
짧은 URL 에 대한 무작위 문자를 생성합니다.
HTML 템플릿을 개발하고 기본 템플릿을 확장합니다.
Flask 를 사용하여 양식 제출을 처리하고 동적 콘텐츠를 표시합니다.
사용자 입력을 기반으로 URL 리디렉션을 구현합니다.

프로젝트 파일 생성

시작하려면 프로젝트 폴더를 생성하고 다음 파일을 추가해야 합니다.

app.py: 이 파일에는 URL 단축기에 대한 모든 코드가 포함됩니다.
templates/index.html: 이 파일에는 웹사이트의 인덱스 페이지에 대한 HTML 코드가 포함됩니다.
templates/history.html: 이 파일에는 웹사이트의 기록 페이지에 대한 HTML 코드가 포함됩니다.
templates/base.html: 이 파일에는 index.html과 history.html 모두에서 사용될 기본 HTML 코드가 포함됩니다.

cd ~/project
touch app.py
mkdir templates
touch templates/index.html templates/history.html templates/base.html

데이터베이스 설정

URL 단축기에는 원래 URL 과 해당 단축 URL 을 저장할 데이터베이스가 필요합니다. 우리는 가볍고 사용하기 쉬운 데이터베이스 관리 시스템인 SQLite 를 데이터베이스로 사용할 것입니다.

데이터베이스를 설정하려면 먼저 app.py에서 필요한 모듈을 가져와야 합니다.

## app.py
from flask import Flask, render_template, request, redirect
import string
import random
import sqlite3

다음으로, SQLite 데이터베이스에 연결하고 커서 객체를 생성해야 합니다.

## Connect to the SQLite database
conn = sqlite3.connect("urls.db", check_same_thread=False)
db = conn.cursor()

그런 다음, URL 을 저장하기 위해 데이터베이스에 테이블을 생성할 수 있습니다.

## Create the URLs table if it doesn't exist
db.execute(
    """CREATE TABLE IF NOT EXISTS urls
              (id INTEGER PRIMARY KEY AUTOINCREMENT,
               original_url TEXT NOT NULL,
               short_url TEXT NOT NULL,
               created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP)"""
)
conn.commit()

짧은 URL 생성

짧은 URL 을 생성하기 위해, 우리는 무작위 문자 및 숫자의 조합을 사용할 것입니다. 이는 Python 의 string 및 random 모듈을 사용하여 수행할 수 있습니다. 6 개의 문자로 구성된 무작위 문자열을 반환하는 generate_short_url() 함수를 생성할 것입니다.

def generate_short_url():
    characters = string.ascii_letters + string.digits
    short_url = "".join(random.choice(characters) for _ in range(6))
    return short_url

인덱스 페이지 생성

웹사이트의 인덱스 페이지는 사용자가 단축할 URL 을 제출할 수 있도록 합니다. 또한 단축된 URL 이 생성되면 이를 표시합니다. 이 페이지의 HTML 코드는 templates/index.html에서 찾을 수 있습니다.

먼저, base.html 템플릿을 확장하고 사용자가 URL 을 제출할 수 있는 양식을 생성해야 합니다.

{% extends "base.html" %} {% block content %}
<div class="text-center">
  <h1 class="text-3xl font-bold text-gray-900 mb-8">URL 단축하기</h1>
  <form action="/" method="POST" class="w-full max-w-sm mx-auto">
    <div
      class="flex items-center border-2 border-blue-500 rounded overflow-hidden"
    >
      <input
        type="text"
        name="original_url"
        placeholder="URL 입력"
        class="appearance-none bg-transparent border-none w-full text-gray-700 py-2 px-4 leading-tight focus:outline-none"
      />
      <button
        type="submit"
        class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded-r focus:outline-none"
      >
        단축
      </button>
    </div>
  </form>
  {% if short_url %}
  <div class="mt-4">
    <p class="text-lg text-gray-700">
      단축 URL:
      <a href="{{ request.host_url }}{{ short_url }}" class="text-blue-500"
        >{{ request.host_url }}{{ short_url }}</a
      >
    </p>
  </div>
  {% endif %}
</div>
{% endblock %}

index.html에는 사용자가 URL 을 입력할 수 있는 단일 입력 필드가 있는 양식이 있습니다. 양식은 동일한 페이지로 제출되므로 action 속성을 /로 설정합니다. 또한 method 속성을 POST로 설정하여 양식 데이터가 요청 본문에 전송되도록 합니다.

이제 templates/base.html을 추가해야 합니다.

<!doctype html>
<html>
  <head>
    <title>URL 단축기</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <nav class="p-6 bg-white flex justify-between items-center">
      <a href="/" class="text-2xl font-bold text-gray-900">URL 단축기</a>
      <div>
        <a href="/" class="text-gray-800 mr-6">홈</a>
        <a href="/history" class="text-gray-800">히스토리</a>
      </div>
    </nav>
    <main class="container mx-auto max-w-xl pt-8 min-h-screen">
      {% block content %} {% endblock %}
    </main>
  </body>
</html>

base.html에는 페이지 상단에 홈 페이지와 히스토리 페이지로 연결되는 링크가 있는 탐색 모음이 있습니다. 또한 각 페이지의 내용을 포함할 main 요소가 있습니다. content 블록은 각 페이지의 내용이 삽입될 위치입니다.

또한 양식 제출을 처리하고 단축된 URL 을 생성하기 위해 app.py에 필요한 코드를 추가해야 합니다.

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "POST":
        original_url = request.form["original_url"]
        short_url = generate_short_url()

        ## 데이터베이스에 원래 URL 과 단축 URL 삽입
        db.execute(
            "INSERT INTO urls (original_url, short_url) VALUES (?, ?)",
            (original_url, short_url),
        )
        conn.commit()

        return render_template("index.html", short_url=short_url)

    return render_template("index.html")

index()에서 요청 메서드가 POST인지 확인합니다. 그렇다면 양식 데이터에서 원래 URL 을 가져와 단축 URL 을 생성합니다. 그런 다음 원래 URL 과 단축 URL 을 데이터베이스에 삽입하고 단축 URL 로 index.html 템플릿을 렌더링합니다.

원래 URL 로 리다이렉션

사용자가 단축된 URL 을 입력하면 해당 원래 URL 로 리디렉션하려고 합니다. 이를 위해 단축된 URL 을 기반으로 데이터베이스에서 원래 URL 을 검색하는 함수를 생성해야 합니다.

@app.route("/<short_url>")
def redirect_to_url(short_url):
    ## 단축 URL 을 기반으로 데이터베이스에서 원래 URL 검색
    db.execute("SELECT original_url FROM urls WHERE short_url=?", (short_url,))
    result = db.fetchone()

    if result:
        original_url = result[0]
        return redirect(original_url)

    return render_template("index.html")

히스토리 페이지 생성

히스토리 페이지는 단축된 모든 URL 을 원래 URL 및 추가된 날짜와 함께 표시합니다. 이 페이지의 HTML 코드는 templates/history.html에서 찾을 수 있습니다.

먼저, base.html 템플릿을 확장하고 URL 을 표시할 테이블을 추가해야 합니다.

{% extends "base.html" %} {% block content %}
<div class="w-full overflow-x-auto">
  <table class="w-full bg-white rounded shadow overflow-hidden">
    <thead class="bg-gray-200">
      <tr>
        <th
          class="text-left py-3 px-4 uppercase font-semibold text-sm text-gray-700"
        >
          Original URL
        </th>
        <th
          class="text-left py-3 px-4 uppercase font-semibold text-sm text-gray-700"
        >
          Short URL
        </th>
        <th
          class="text-left py-3 px-4 uppercase font-semibold text-sm text-gray-700"
        >
          Date
        </th>
      </tr>
    </thead>
    <tbody>
      {% for result in results %}
      <tr class="hover:bg-gray-100">
        <td class="border-t">
          <p class="py-3 px-4">{{ result[0] }}</p>
        </td>
        <td class="border-t">
          <a
            href="{{ request.host_url }}{{ result[1] }}"
            class="py-3 px-4 text-blue-500 hover:text-blue-700"
            >{{ request.host_url }}{{ result[1] }}</a
          >
        </td>
        <td class="border-t">
          <p class="py-3 px-4">{{ result[2] }}</p>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}

또한 데이터베이스에서 URL 을 검색하여 템플릿으로 전달하기 위해 app.py에 필요한 코드를 추가해야 합니다.

@app.route("/history")
def history():
    ## 데이터베이스에서 모든 URL 을 검색하고, 최신순으로 정렬합니다.
    db.execute(
        "SELECT original_url, short_url, created_at FROM urls ORDER BY created_at DESC"
    )
    results = db.fetchall()
    return render_template("history.html", results=results)

프로젝트 실행

app.py의 맨 아래에 다음 코드를 추가합니다.

if __name__ == "__main__":
    app.run(debug=True, host="0.0.0.0", port=8080)

모듈이 설치되면 터미널에서 python app.py를 실행하여 프로젝트를 실행할 수 있습니다. 이렇게 하면 Flask 개발 서버가 시작되고 웹사이트는 http://localhost:8080에서 액세스할 수 있습니다.

8080 탭으로 전환하고 페이지를 새로 고칩니다. 다음을 볼 수 있습니다.

Flask server running successfully

요약

이 프로젝트에서는 Python 과 Flask 를 사용하여 URL 단축기를 만드는 방법을 배웠습니다. 먼저 필요한 프로젝트 파일과 데이터베이스를 설정한 다음, 짧은 URL 을 생성하고 폼 제출을 처리하는 함수를 만들었습니다. 또한 데이터베이스에서 URL 을 검색하고 표시하는 방법도 배웠습니다. 이 프로젝트를 통해 이제 자신만의 URL 단축기를 만들고 원하는 대로 사용자 정의할 수 있습니다.

Python Flask 로 URL 단축기 만들기

소개