Wagtail 사용법
얼마 전 썼던 Wagtail vs Wordpress - 프로젝트에 적합한 CMS를 선택하는 방법에 대해 글을 작성했는데 Wagtail에 대해 직접 써보고 작성해 보고자 글을 적어봤습니다.
Wagtail과 Wordpress는 모두 뛰어난 오픈 소스 콘텐츠 관리 시스템입니다. 프로젝트에 가장 적합한 기술을 결정할 때 고려해야 할 몇 가지 사항은 다음과 같습니다. Overview 오늘날 사용할 수 있는 오
Wagtail에 대해 알게 된 배경은 한번씩 검색해 보는 Trending 에서 Python 언어로 검색했을 때 높은 순위에 있었기 떄문입니다.
Wagtail은 위에 설명과 같이 CMS(Content Management System)에 사용할 수 있는 Wordpress 같은 기능을 할 수 있는 오픈소스 솔루션이었습니다. wordpress를 써 본 적은 없지만 php 기반의 wordpress 보다는 python djanog 기반의 wagtail이 더 나을 것이란 생각을 했습니다.(개인적 취향입니다.)
Wordpress는 개발자가 아닌 사람들이 블로그나 간단한 소개 웹 싸이트를 만들기 쉽게 구성되어 있습니다.
하지만 커스터마이징을 위해서는 플러그인을 사용해야 하는데, 문제는 플러그인으로 인해 보안에 문제가 될 수 있다는 겁니다.
하지만 Wagtail은 Django 기반의 솔루션으로서 Wordpress와 같이 페이지를 rich text 로 작성할 수 있으면서도 그 컴포넌트들을 코드 상에 배치하고 Django framework을 이용하듯 사용할 수 있는 장점이 있습니다.
Wordpress 보다 개발자 친화적이고 구성 방법도 어렵지 않습니다. 심지어 공식 문서도 잘 되 어 있으니 한번 읽어 보는 것이 좋습니다. 그리고 NASA에서도 사용한다고 합니다.
Welcome to Wagtail’s documentation — Wagtail Documentation 6.0.2 documentation
시작하는 방법은 간단합니다.
저는 Mac OS 기준으로 작성합니다. Windows OS도 거의 비슷한데 경로 설정이나 약간의 환경적인 부분이 다를 수 있으니 유의하세요.
우선 가상 환경을 생성하고 가상 환경을 활성화 합니다.(프로젝트 별로 환경을 별도로 두는 것이 글로벌 환경에 영향을 덜 주고 깔끔합니다.)
# Create a virtual environment
python -m venv venv
# Activate the virtual environment
source venv/bin/activate
가상 환경이 활성화 되었다면 이제 라이브러리를 설치해 줍니다.
# Upgrade pip
pip install --upgrade pip
# Install Wagtail
pip install wagtail
이제 wagtail 라이브러리를 사용할 수 있습니다.
wagtail을 이용해 프로젝트를 생성해 보세요.
# Create a new project
wagtail start myapp
# Go into the project
cd myapp
# Install requirements
pip install -r requirements.txt
myapp 폴더에 들어가면 아래와 같이 폴더 구조가 보입니다.(db.sqlite3은 다음 단계에서 생성됩니다.)
생성된 폴더에서 필요한 라이브러리들도 모두 설치했으니 myapp/myapp/settings/base.py 에 있는 데이터베이스 설정을 원하는대로 변경해 줍니다. (변경을 하지 않아도 default로 있던 sqlite3를 그대로 사용해도 됩니다.)
DATABASES = {
"default": {
"ENGINE": "django.db.backends.sqlite3",
"NAME": os.path.join(BASE_DIR, "db.sqlite3"),
}
}
이제 기본 wagtail 솔루션 실행을 위한 데이터베이스 마이그레이션 및 서버 실행을 진행합니다.
python manage.py migrate
# Create superuser
python manage.py createsuperuser
# Run server
python manage.py runserver
# Open Website in browser
http://localhost:8000
# Open Admin Website in browser
http://localhost:8000/admin
wagtail 프로젝트를 생성할 때 이미 기본 마이그레이션을 생성해 뒀기 때문에 python manage.py makemigrations를 하지 않고 바로 python manage.py migrate를 진행한 겁니다. 아무튼 이렇게 해서 어드민 계정도 생성했고 서버도 실행하면 8000포트로 솔루션 초기 화면과 관리자 화면을 확인할 수 있습니다.
wagtail 본 화면은 React 초기 화면과 같이 아무런 의미가 없습니다. admin으로 들어가서 superuser 생성 때 만든 계정을 적어서 로그인 해줍니다. 어드민에 로그인하고 나면 아래와 같이 pages, images, documents, reports, settings, help 메뉴가 보입니다. (search 는 검색하는 거라서 생략)
페이지를 누르면 edit 아이콘이 보인느데 그걸 눌러줍니다.
잠시 코드로 돌아와서 myapp/home/model.py 를 아래와 같이 수정합니다.
from django.db import models
from wagtail.models import Page
from wagtail.fields import RichTextField
# import MultiFieldPanel:
from wagtail.admin.panels import FieldPanel, MultiFieldPanel
class HomePage(Page):
# add the Hero section of HomePage:
image = models.ForeignKey(
"wagtailimages.Image",
null=True,
blank=True,
on_delete=models.SET_NULL,
related_name="+",
help_text="Homepage image",
)
hero_text = models.CharField(
blank=True,
max_length=255, help_text="Write an introduction for the site"
)
hero_cta = models.CharField(
blank=True,
verbose_name="Hero CTA",
max_length=255,
help_text="Text to display on Call to Action",
)
hero_cta_link = models.ForeignKey(
"wagtailcore.Page",
null=True,
blank=True,
on_delete=models.SET_NULL,
related_name="+",
verbose_name="Hero CTA link",
help_text="Choose a page to link to for the Call to Action",
)
body = RichTextField(blank=True)
# modify your content_panels:
content_panels = Page.content_panels + [
MultiFieldPanel(
[
FieldPanel("image"),
FieldPanel("hero_text"),
FieldPanel("hero_cta"),
FieldPanel("hero_cta_link"),
],
heading="Hero section",
),
FieldPanel('body'),
]
또한 myapp/home/templates/home/home_page.html을 아래와 같이 수정합니다.
위에 model에서 추가된 필드들을 html에서 불러오도록 맵핑해주는 작업입니다. 원래는 보여주는 것이 page.title 밖에 없었는데 page.image, page.hero\_text, ... 추가 된 것을 볼 수 있습니다. 또한 가장 중요한 명시인 load wagtailcore\_tags는 꼭 있어야 합니다. 이것이 있어야 내용을 보여준다고 합니다.
{% extends "base.html" %}
{% load wagtailcore_tags wagtailimages_tags %}
{% block body_class %}template-homepage{% endblock %}
{% block content %}
<div>
<h1>{{ page.title }}</h1>
{% image page.image fill-480x320 %}
<p>{{ page.hero_text }}</p>
{% if page.hero_cta_link %}
<a href="{% pageurl page.hero_cta_link %}">
{% firstof page.hero_cta page.hero_cta_link.title %}
</a>
{% endif %}
</div>
{{ page.body|richtext }}
{% endblock content %}
위에서 model을 수정했으니 마이그레이션을 진행해줍니다.
python manage.py makemigrations
python manage.py migrate
# Create superuser
python manage.py createsuperuser
# Run server
python manage.py runserver
다시 실행한 화면에서 admin에 들어온 뒤 다시 page edit 화면으로 온 뒤 아래와 같이 수정해 줍니다.
이미지 추가부터 텍스트 입력 모든 것이 가능합니다. 아까 수정한 html을 이용해 다른 수정들도 또 가능합니다.
또한 body 는 입력이 RichTextField이기 때문에 텍스트 편집기 작성하듯 편하게 작성할 수 있습니다.
게다가 아래 오른쪽을 보면 프리뷰까지 보여줍니다.(모바일, 웹, 테블릿 등 환경 별로도 보여줍니다.)
오른쪽 상단에 라이브 버튼을 누르면 아직 프리뷰 화면에 작성한 내용이 보이지 않고 있는데,
이건 Pages 버튼을 눌러 페이지 목록으로 간 뒤 해당 페이지를 체크하면 아래 publish 버튼이 보이는데 이걸 클릭하면 라이브에도 반영됩니다!
wagtail을 이용하면 아래와 같이 문서, 이미지를 쉽게 등록하고 이것을 페이지에 보여주는 것도 자연스럽게 이용해 보여줄 수 있습니다.
또한 히스토리 관리도 해주고, 싸이트 설정, 유저 및 그룹 관리, 리다이렉트 등 엔터프라이즈 급의 관리를 아무 코딩 없이 바로 솔루션을 통해 사용 가능합니다.
구성에 대한 이해도 직관적으로 알 수 있습니다. html에 database에서 관리되는 필드들을 저장하고 가져와 보여주는 방식입니다.
html에 등록할 때 Django 유저에 친숙하게 {{}} 를 통해 값을 찝어 넣어주면 됩니다.
아직 많이 사용해 보지 않아 익숙하진 않지만 조금 더 사용하다 보면 CMS 기능을 만들 때는 이걸로 계속 만들지 않을까 생각합니다.
배포 방법은 공식 문서를 참조하면 좋습니다. Dockerfile도 있기 때문에 Dockerize 할 수 있는 방법도 제공합니다.
Wagtail이 정말 좋은 솔루션이라는 생각이 들었고 더 많이 사용하게 되서 오픈 소스가 더 발전해 나가고 모두에게 좋은 기회가 되길 기원합니다!
