メモ DjangoNuxt.js

    djangoでNuxt SPAを使うときのルーティング 設定

    2020.12.04

    大体のwebフレームワークではルーティングの設定ができます。最近のフロントエンド はNuxt、Nextとかjsを用いて構築して、バックエンドへの通信はAPIを用いていると思います。Djangoにもurls.pyというルーティング を定義するファイルがあります。

    しかし一部のurlではNuxt.jsのjsとhtmlを返すことができず、404になってしまいます。api、adminのルートを生かしながらそのほかのURLに対してはNuxtのファイルを返すにはどうすればいいのか?それを調べていたら、以下のstack overflow の記事が答えてくれました

    検索ワード「Django SPA url」

    urlpatterns = [
        url(r'^admin/', admin.site.urls),
        url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework')),
        url(r'^api/', include(router.urls)),
        url(r'^.*$', TemplateView.as_view(template_name="index.html")),
    ]
    

    admin、api-auth、apiなど必要なルーティングはurlpatternsの最初の方に定義して、残りの全てのurlパターンをr'^.*$ という正規表現でカバーしています。ちなみにこの正規表現は「いかなる文字の全て」という意味です。そしてSPAのファイルをtemplateから引っ張ってきています。

    こうすることで、例えば https://~~~/aaahttps://~~~/bbb/aa、などはSPAのファイルが返され、あとはSPAがそのURLに対しての処理を行ってくれます。一方でhttps://~~~/admin とすればDjangoの場合は管理画面にアクセスできます。

    Copyright © 2021 jun. All rights reserved.