줄거리

부업 안건으로 Django제의 블로그 사이트의 개발을 서포트하고 있었을 때의 이야기입니다.

블로그 기사는 markdown에서 쓰고 싶다는 것으로, 장고-마크 다운x 를 도입하고 있었습니다.
개발은 어렵지 않고 완료.
heroku에 배포합니다.

무려 이미지를 업로드할 수 없습니다.

원본이라면 텍스트 영역에 이미지를 놓으면 markdownx js에 의해 업로드되고 이미지 경로가 markdown 형식으로 텍스트 영역에 표시됩니다.

프로덕션 환경에서 시도하면 이미지를 삭제한 후 몇 초 안에 이미지 경로가 텍스트 영역에 표시되었지만 미리보기에 이미지가 표시되지 않습니다.
콘솔을 보면 이미지에 대해 404가 되었습니다.
heroku에 액세스하고 응용 프로그램의 디렉토리를 확인하면 업로드 대상으로 지정한 디렉토리에 이미지가 없습니다.

문제발각

곳곳에서도 언급되었지만 heroku에서는 DEBUG=False의 장고가 파일을 업로드 할 수 없습니다.DEBUG=True 로 해서 운용할 수 없기 때문에 앞으로와 상담한 결과, heroku+Django로 비교적 실적이 있는 cloudinary 을 이미지 업로드처로 하기로 했습니다.

cloudinary의 SDK를 프로젝트에 설치하고 막상.
그러나 지금까지와 마찬가지로 텍스트 영역에 이미지 경로가 표시되지만 이미지는 표시되지 않았습니다.

cloudinary를 직접 확인해 보면 업로드한 파일이 존재했습니다.
그러나 파일의 URL이 텍스트 영역에 표시된 URL과 다릅니다.

원인

원인은 markdownx와 cloudinary가 친절했기 때문입니다.

markdownx는 이미지를 업로드할 때 기존 파일과 파일 이름이 충돌하지 않도록 파일 이름을 uuid로 변경한 후 업로드합니다.


반면에 cloudinary는 기존 파일과 파일 이름이 충돌하지 않도록 파일 이름을 uuid로 변경 한 후 저장합니다.


이것들을 조합하면, markdownx씨는 이름을 바꾼 다음 cloudinary씨에게 건네주고, cloudinary씨가 어떤 이름으로 해 파일을 보존했는지를 묻지 않고, 자신이 알고 있는 파일명을 브라우저에 돌려줍니다.
이 동작은 cloudinary의 파일 이름과 텍스트 영역에 표시되는 URL이 다릅니다.

해결책

markdownx 님은 그만두고 cloudinary 님의 말씀을 들어보세요.

markdownx는 기본적으로 이미지 업로드를 라이브러리의 뷰에서 처리합니다.
설정을 변경하여 자신의 보기로 전달하도록 변경합니다.

settings.py

+ MARKDOWNX_UPLOAD_URLS_PATH = '/upload'

이미지 업로드 처리용 뷰를 준비합니다.
markdownx의 이미지 업로드 요청은 'image'라는 이름으로 파일이 옵니다.
응답은 {"image_code": テキストエリアに表示する画像パス} 형식의 JSON입니다.
cloudinary 업로드 응답은 사전 형식이며 'url'로 이미지 URL을 가져올 수 있습니다.

urls.py

+ path('upload', views.UploadView.as_view(),name='upload'),

views.py

# 追記
import cloudinary
import cloudinary.uploader
import cloudinary.api
from django.conf import settings
from django.http.response import JsonResponse

class UploadView(View):
    def post(self,request, *args,**kwargs):
        file = request.FILES['image']

        cloudinary.config( 
            cloud_name = settings.CLOUDINARY_STORAGE['CLOUD_NAME'], 
            api_key = settings.CLOUDINARY_STORAGE['API_KEY'], 
            api_secret = settings.CLOUDINARY_STORAGE['API_SECRET']
        )
        res = cloudinary.uploader.upload(
            file = file,
            folder = settings.MARKDOWNX_MEDIA_PATH,
        )

        return JsonResponse({"image_code": f"![]({res['url']})"})

이제 markdownx를 거치지 않고 cloudinary에 직접 업로드하여 올바른 URL을 텍스트 영역에서 가져올 수 있습니다.

heroku+django+cloudinary라는 조합은 메이저인데, markdown이 얽힌 기사가 없어서 고생했습니다.
누군가의 도움을 받으면 다행입니다.

여러분도 사람의 이야기에 귀를 기울이십시오.