DjangoでGoogle Cloud Storageのアップロードする署名付きURLを作ってもError413になる

Question

前提・実現したいこと

djangoを使って動画投稿サイトの作成をし、「GoogleAppEngin」にデプロイを行いました。動画の視聴や画像の更新などの通信は可能なのですがアカウントから動画をアップロードすると以下のエラーメッセージが発生します。

エラーメッセージ

”””
error 413　That’s an error.

Your client issued a request that was too large. That’s all we know.
”””

エラーの原因

原因としてGoogle App Enginが関わっており、一回のリクエストの最大サイズが32MBまでとなっています。解決策として「GoogleCloudStorage」や「S3」の署名付きURLを使って直接アップロードするとのことです。いろいろ試してみたのですが動画ファイルをアップロードする署名付きURLの作成&使用することができず、エラー413が出てしまい白旗です。どうしたらエラー413を出さずに32MB以上の動画のアップロードができるようになるか教えていただければ幸いです。

試したこと

こちらのサイトを参考にapp/views.pyに組み込みました。

#省略
from google.cloud import storage
＃省略
class MovieUpload(OnlyYouMixin,generic.CreateView,):
    template_name = 'app/movie_upload.html'
    form_class = Upload

    def form_valid(self,form,):
        movie = form.save(commit=False) 
        movie.user = self.request.user
        CLIENT = storage.Client.from_service_account_json('GAE defaultservice accountkey.json')
        bucket = CLIENT.bucket(settings.GS_BUCKET_NAME)

        blob = bucket.blob(str(movie.video))
        # Blob data gets input form data and change it str data.
        #It is name of file to be saved/uploaded to storage
        url = blob.generate_signed_url(
            version='v4',
            expiration=datetime.timedelta(minutes=60),
            method='POST',
            content_type="application/octet-stream",
　　　　　　　) 
        movie.save()
        
    
    def get_success_url(self):
        return resolve_url('movie:user_detail', pk=self.kwargs['pk'])

###補足
django-storageも導入しており、画像や動画を一時的に見ることができるURLがあるのでダウンロードに関する署名付きURLはできていると考えます。またこの方法でもAPP Engineではアップロードはできませんが、LocalHOST上ではうまく動くので余計混乱しています。

###追記
attakei様のアドバイスを受けてjavascript（ajax)を利用したアップロードフォームをこちらのサイトを参考に組み込んでみました。LocalhostでテストしてみるとPOST後の処理が正常に行われているのかが怪しいものとなります。どこが間違っているのかをご指摘いただければ幸いです。

class MovieUpload(OnlyYouMixin,generic.CreateView,):
    template_name = 'app/movie_upload.html'
    form_class = Upload

    def form_valid(self,form,):
        movie = form.save(commit=False) 
        movie.user = self.request.user
        movie.save()
        
    
    def get_success_url(self):
        return resolve_url('movie:user_detail', pk=self.kwargs['pk'])



def get_signed_url(request,pk):
    if request.method == 'POST' and request.is_ajax():
        filename = request.POST.get('filename')
        filetype = request.POST.get('type')
        filesize = request.POST.get('size', 0)

        # build the URL path using whatever information
        fullpath = '/path/'+filename

        # create the blob - the blob has to be created in order to get a signed URL
        blob = default_storage.open(fullpath, 'wb')

        # generate the signed URL through the blob object - don't use django-storages (yet)
        signed_url = blob.blob.generate_signed_url(expiration=default_storage.expiration, method='PUT', content_type=filetype)

        # This is what you'd do with djagno-storages
        #signed_url = default_storage.url(fullpath)
        
        # Send the signed URL back. I also send the path back because I want to display the uploaded image (relative path)
        return JsonResponse({ 'signed_url': signed_url, 'url': settings.MEDIA_URL + fullpath })

    # Probably a terrible way to respond. You do you.
    return JsonResponse({})

path('user_datail/User<int:pk>/upload',views.MovieUpload.as_view(),name='movie_upload_in'),
path('user_datail/User<int:pk>/upload/sign',views.get_signed_url,name='sign'),

<form  method="POST" enctype="multipart/form-data"action="{% url 'movie:sign' user.pk %}" >
<div class="container mt-3">
            <button  id ="Upload"class="btn btn-info btn-lg" name="next">Upload</button>
 <div class="field">
                {{ form.title.label }}
                {{ form.title }}
                <span class="helptext">{{ form.title.help_text }}</span>
                {{ form.title.errors }}
            </div>
            <div class="field">
              {{ form.name.label }}
              {{ form.name }}
          </div>
            <div class="field">
                {{ form.publick.label }}
                {{ form.publick }}
               <label for="id_publick">Release</label> <span class="helptext"></span>
                {{ form.publick.errors }}
            </div>
            <div class="field" id="cover_image">
            {{ form.video.label_tag }}
            {{ form.video }}
            <span class="helptext">{{ form.video.help_text }}</span>
</div>

<script>
          $('#id_video').fileupload({
    // most of these doesn't matter and will be removed
    // because the add() function does the actual upload now
    dropZone: $('#id_video'),
    add: function(e, data) {
        $.each(data.files, function(index, file) {
            // pack our data to get signature url
            var formData = new FormData();
            formData.append('filename', file.name);
            formData.append('type', file.type);
            formData.append('size', file.size);

            // Step 3: get our signature URL
            $.ajax({
                url:  "{% url 'movie:sign' user.pk %}",
                type: 'POST',
                processData: false,
                contentType: false,
                dataType: 'json',
                headers: {
                    'X-CSRFToken': Cookies.get('csrftoken'),
                },
                data: formData
            }).done(function (data) {
                // Step 5: got our url, push to GCS
                const xhr = new XMLHttpRequest();
                if ('withCredentials' in xhr) {
                    xhr.open("PUT", data.signed_url, true);
                }
                else if (typeof XDomainRequest !== 'undefined') {
                    xhr = new XDomainRequest();
                    xhr.open("PUT", data.signed_url);
                }
                else {
                    xhr = null;
                }

                xhr.onload = () => {
                    const status = xhr.status;
                    if (status === 200) {
                        //alert("File is uploaded");
                        // show the image (uploadDone is separate function)
                        uploadDone(data.url)
                    } else {
                        alert("Failed to upload");
                    }
                };

                xhr.onerror = () => {
                    alert("Failed to upload");
                };

                xhr.setRequestHeader('Content-Type', file.type);
                xhr.send(file);
            });
        });
    },
    done: function (e, data) {
    }
});
        </script>

Answer 1

概要

記載されているコードは「動画を直接Cloud Storageにアップロードしている」実装になっていません。
あくまで、AppEngine上へのリクエストとして動画アップロードを行い、アップロードされた動画の署名付きURL生成しているだけです。
つまり、この実装ではレスポンス上の制限は回避できても、リクエストのサイズ制限を回避できません。

（ローカルホストでの挙動に問題がないのは、アップロード時にサイズ制限がないためです）

簡易的な図

おそらく、大本の実装がこうです。

[ブラウザ] --(アップロード)-|-> [AppEngine] --> [CloudStorage]
[ブラウザ] <-(ダウンロード)-|-- [AppEngine] <-- [CloudStorage]
                           ↑ここに、上下ともに32MBのサイズ制限

質問内の実装は、上記をこう変えたものと捉えられます

[ブラウザ] --(アップロード)-|-> [AppEngine] --> [CloudStorage]
[ブラウザ] <----------------------------------- [CloudStorage]

• 署名付きURLでCloudStorageに直接アクセスできるので下りは回避できる
• アップロード自体はAppEngineのままのため、32MBを超えた時点でTooLargeは発生する

どうするか

考え方としては以下の2通りになると思います。
理論上は出来るはずですが、実際に手を動かしてみたことがない範囲のはないsなので、コード等の提供は出来ません。

• App Engineをやめて、リクエストサイズ制限のない環境にデプロイする
• JavaScriptと連携して、安全な設計でブラウザから直接Cloud Storageにアップロードするように実装

Comments

[TRUM]

Javascriptの項目で安全な設計と書いてありますが、どういうことをすれば安全な設計になるのでしょうか？JavaScriptファイルも含めてwebインスペクター（MAC)を覗いてしまえばコードがわかってしまうので、本人にしかわからないレベルでの見難いコードを書くことぐらいしか思いつきません。

Answer 2

Javascript と 'rest_framework'を使いAWSからアップロードできました。記載するにかなり複雑なのでこちらに記載しています。