StudyDjango and Web server

Editor project

[ Editor project ]

  • WYSIWYG 사용하기

    • WYSIWYG(What you see is what you get)
    • 웹 브라우저에서 사용할 수 있는 HTML 편집기

    1. django-ckeditor 모듈을 다운받아 설치한다.

      1
      $ pip install django-ckeditor

    2. settings.py의 INSTALLED_APPS에 추가한다.

      1
      2
      3
      4
      INSTALLED_APPS = [
          #...
          'ckeditor',
      ]

    3. models.py를 작성한다.

      1
      2
      3
      4
      5
      from django.db import models
      from ckeditor.fields import RichTextField

      class Post(models.Model):
          content = RichTextField()

    4. migrate를 진행한다.

      1
      2
      3
      $ python manage.py makemigrations [앱 이름]

      $ python manage.py migrate [앱 이름]

    5. 관리자 페이지에서 해당 필드가 에디터 형태로 나타나는지 확인한다.

    6. template 파일을 통해 폼을 출력할 때는 필수로 form.media를 사용하도록 한다.
      1
      2
      3
      4
      5
      6
      <form action="" method="post">
          {% csrf_token %}
          {{form.media}}
          {{form.as_p}}
          <input type="submit" value="Write">
      </form>

  • CKEditor 이미지 파일 업로더 설정하기

    1. django-ckeditor 모듈을 다운받아 설치한다.

      1
      $ pip install django-ckeditor

    2. settings.py의 INSTALLED_APPS에 추가한다.

      1
      2
      3
      4
      5
      INSTALLED_APPS = [
          #...
          'ckeditor',
          'ckeditor_uploader',
      ]

    3. settings.py에 MEDIA_ROOT를 꼭 지정한다.

      1
      2
      3
      4
      5
      6
      7
      8
      # Amazon AWS S3를 사용할 경우, 지정할 필요가 없다.
      MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

      # MEDIA_ROOT 하위 폴더에 전용 경로를 설정하고 싶다면
      CKEDITOR_UPLOAD_PATH = 'upload/'

      # 에디터를 사용하는 유저별로 자신이 올린 파일드란 사용할 수 있게 하려면
      CKEDITOR_RESTRICT_BY_USER = True

    4. models.py를 작성한다.

      1
      2
      3
      4
      5
      from django.db import models
      from ckeditor_uploader.fields import RichTextUploadingField

      class Post(models.Model):
          content = RichTextUploadingField()

    5. migrate를 진행한다.

      1
      2
      3
      $ python manage.py makemigrations [앱 이름]

      $ python manage.py migrate [앱 이름]

    6. urls.py에 업로더 내용을 추가한다.

      1
      2
      3
      4
      5
      6
      urlpatterns = [
          #...
          path('ckeditor/', include('ckeditor_uploader.urls')),
          # Amazon AWS S3를 사용하지 않는 경우, media 파일 서빙하기
          re_path(r'^media/(?P<path>.*)$', serve, {'document_root':settings.MEDIA_ROOT}),
      ]

    7. 파일을 업로드하여 확인한다.

  • Media 파일 서빙하기

    • Amazon AWS S3를 사용할 수 없을 경우, serve view를 사용하여 서빙할 수 있다.

    1. settings.py에 media 관련 경로를 추가한다.

      1
      2
      MEDIA_URL = '/media/'
      MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

    2. 디버그 모드일 경우, 다음과 같이 url pattern을 추가하여 사용할 수 있다.

      1
      2
      3
      4
      5
      from django.conf import settings

      if settings.DEBUG:
          from django.conf.urls.static import static
          urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

    3. 라이브 상태일 경우, serve view를 사용하여 연결해준다.

      1
      2
      3
      4
      5
      6
      7
      from django.views.static import serve
      from django.urls import re_path

      url_patterns = [
          #...
          re_path(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),
      ]

    4. settings.py에서 DEBUG를 False로 변경한다.

      1
      2
      3
      DEBUG = False

      ALLOWED_HOSTS = ['*']

    5. 이미지를 업로드해보고 출력되는지 확인한다.

  • Static 파일 서빙하기

    • 디버그 모드일 때만
      load static %}```을 이용하여 static 태그를 이용해 리소스를 사용할 수 있다.
      1
      2
      3
      4
      5
      - Amazon AWS S3를 사용할 수 없을 경우, serve view를 사용하여 서빙할 수 있다.
      1. whitenoise를 설치한다.
      ```bash
      # whitenoise는 static 파일들을 collectstatic 명령 수행시 지정 경로에 파일을 모아준다.
      $ pip install whitenoise

    1. settings.py의 MIDDLEWARE에 추가하고 static 경로를 추가한다.

      1
      2
      3
      4
      5
      6
      7
      MIDDLEWARE = [
          #...
          'whitenoise.middleware.WhiteNoiseMiddleware',
      ]

      STATIC_URL = '/static/'
      STATIC_ROOT = os.path.join(BASE_DIR, 'static')

    2. settings.py에서 DEBUG를 False로 변경한다.

      1
      2
      3
      DEBUG = False

      ALLOWED_HOSTS = ['*']

    3. collectstatic 명령어를 실행한다.

      1
      2
      3
      # 아래 명령어를 실행하지 않고 관리자 페이지를 접속할 경우, 폼이 깨져서 나온다.
      # whitenoise는 STATIC_URL이 포함된 리소스를 STATIC_ROOT를 통해 찾아 전달한다.
      $ python manage.py collectstatic

    4. 관리자 페이지로 접속하여 확인한다.

  • Nginx를 사용한 리소스 파일 서빙하기

    • Nginx 설정 파일에 다음과 같은 내용을 추가한다.

    • ex) vim /etc/nginx/sites-available/default

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      # 최대 업로드 용량
      client_max_body_size 75M

      location /media {
          alias /var/www/django/media;
      }

      location /static {
          alias /var/www/django/static;
      }

    • 서버 설정 적용을 위해 Nginx를 재시작한다.

      1
      $ sudo systemctl restart nginx

  • FTP로 파일 업로드 하기

    • FTP 프로그램을 이용하여 서버에 직접 소스 코드를 업로드하는 방식을 알아보자.
    • Filezilla를 이용한다.

    1. filezilla를 설치한다.

      1
      $ sudo apt-get install filezilla

    2. filezilla를 실행하여 왼쪽 상단 탭에서 사이트 관리자로 들어간다.

    3. 새로운 사이트를 추가하고 접속 정보를 설정한다.

      1
      2
      3
      4
      5
      - 프로토콜 : SFTP
      - 호스트 : EC2의 접속 주소
      - 로그온 유형 : 키 파일
      - 사용자 : ubuntu
      - 키 파일 : 키 페어 파일 경로 지정

    4. 고급 탭에서 기본 로컬 디렉터리와 기본 리모트 디렉터리를 지정한다.

      1
      2
      기본 로컬 디렉터리 = pycharm으로 만든 프로젝트 폴더
      기본 리모트 디렉터리 = 소스 코드를 업로드할 폴더

    5. 설정이 완료되었다면 연결을 누른다.

    6. 처음 접속 시, 알 수 없는 호스트 창이 나타나면 캐시에 등록을 체크하고 확인을 누른다.
    7. 접속이 성공했다면, 소스 코드를 업로드한다.
Share