質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Q&A

解決済

1回答

1381閲覧

Nuxt.jsでビルドしたファイルのスクリプトがDjango上で実行されない

sika

総合スコア52

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

0グッド

0クリップ

投稿2021/08/20 18:18

現在、GAEインスタンスへデプロイを目的としてNuxt.jsでビルドした静的ファイルをDjangoアプリ内に組み込みたく
生成されたファイルのhtmlファイルをnuxtフォルダへ。jsファイルをstaticフォルダ内へ移行したのですが
ページにアクセスするとページがすべて表示されず、consoleにて以下のメッセージが出ました

Refused to execute script from '<URL>' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Networkでは各jsファイルのステータスコードは200で読み込みは確認できたのですがスクリプトとして実行ができません

開発時はDocker環境内でNuxt.js <=> Nginx <=> Djangoのコンテナ構成では問題なく動作しており
Nuxtでビルドした同様のファイルをFirebase Hostingにデプロイした際には問題なく表示できたので
Djangoに組み込んだ故の不具合だとは思うのですが、どの様に対応すればよいかわかりません

Djangoアプリのディレクトリ構成

django_app/ ┣ config/ ┣ api/ # REST APIフォルダ ┣ nuxt/ ┃  ┗ index.html  # Nuxtのindex ┣ static/ ┃  ┗ _nuxt/ # Nuxtのjsファイル ┣ manage.py ┗ requirements.txt

Django3.2
Nuxt.js7.16.0

試した事

pythonのwhitenoiseモジュールでDjangoのstatic構造に組み込みを試みましたが改善はみられず

python

1# settings.py 2MIDDLEWARE = [ 3 'django.middleware.security.SecurityMiddleware', 4 'whitenoise.middleware.WhiteNoiseMiddleware', 5] 6 7STATIC_URL = '/static/' 8STATIC_ROOT = os.path.join(BASE_DIR, "static") 9 10STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage" 11# Nuxt.jsが書き出すjavascriptへのパス 12STATICFILES_DIRS = [os.path.join(BASE_DIR , 'static/_nuxt/')] 13 14WHITENOISE_MIMETYPES= { 15 '.js': 'application/x-javascript' 16}

python

1# config/urls.py 2urlpatterns = [ 3 path('api/', include('api.urls')), 4 path('admin/', admin.site.urls), 5 re_path('', TemplateView.as_view(template_name='index.html')), # Nuxtのindex.htmlファイルにルーティング 6]

どなたかご教授お願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

静的ファイルなのでDjangoに組み込ませずインスタンス設定で対応しました

投稿2021/08/22 19:45

sika

総合スコア52

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問