[{"data":1,"prerenderedAt":124},["ShallowReactive",2],{"article-django-nuxt-routing":3},{"id":4,"title":5,"body":6,"category":110,"createdAt":112,"description":5,"extension":113,"index":114,"meta":115,"navigation":116,"path":117,"publish":116,"seo":118,"series":114,"seriesTitle":114,"stem":119,"tag":120,"thumbnail":114,"updatedAt":114,"__hash__":123},"articles\u002Farticles\u002Fdjango-nuxt-routing.md","djangoでNuxt SPAを使うときのルーティング 設定",{"type":7,"value":8,"toc":108},"minimark",[9,13,16,22,34,82,89,104],[10,11,12],"p",{},"大体のwebフレームワークではルーティングの設定ができます。最近のフロントエンド はNuxt、Nextとかjsを用いて構築して、バックエンドへの通信はAPIを用いていると思います。Djangoにもurls.pyというルーティング を定義するファイルがあります。",[10,14,15],{},"しかし一部のurlではNuxt.jsのjsとhtmlを返すことができず、404になってしまいます。api、adminのルートを生かしながらそのほかのURLに対してはNuxtのファイルを返すにはどうすればいいのか？それを調べていたら、以下のstack overflow の記事が答えてくれました",[10,17,18],{},[19,20,21],"strong",{},"検索ワード「Django SPA url」",[23,24,28],"div",{"className":25},[26,27],"alert","alert-success",[29,30,33],"a",{"href":31,"target":32},"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F42864641\u002Fhandling-single-page-application-url-and-django-url","_blank","Handling single page application url and django url",[35,36,41],"pre",{"className":37,"code":38,"language":39,"meta":40,"style":40},"language-python shiki shiki-themes material-theme-ocean","urlpatterns = [\n    url(r'^admin\u002F', admin.site.urls),\n    url(r'^api-auth\u002F', include('rest_framework.urls', namespace='rest_framework')),\n    url(r'^api\u002F', include(router.urls)),\n    url(r'^.*$', TemplateView.as_view(template_name=\"index.html\")),\n]\n","python","",[42,43,44,52,58,64,70,76],"code",{"__ignoreMap":40},[45,46,49],"span",{"class":47,"line":48},"line",1,[45,50,51],{},"urlpatterns = [\n",[45,53,55],{"class":47,"line":54},2,[45,56,57],{},"    url(r'^admin\u002F', admin.site.urls),\n",[45,59,61],{"class":47,"line":60},3,[45,62,63],{},"    url(r'^api-auth\u002F', include('rest_framework.urls', namespace='rest_framework')),\n",[45,65,67],{"class":47,"line":66},4,[45,68,69],{},"    url(r'^api\u002F', include(router.urls)),\n",[45,71,73],{"class":47,"line":72},5,[45,74,75],{},"    url(r'^.*$', TemplateView.as_view(template_name=\"index.html\")),\n",[45,77,79],{"class":47,"line":78},6,[45,80,81],{},"]\n",[10,83,84,85,88],{},"admin、api-auth、apiなど必要なルーティングはurlpatternsの最初の方に定義して、残りの全てのurlパターンを",[42,86,87],{},"r'^.*$"," という正規表現でカバーしています。ちなみにこの正規表現は「いかなる文字の全て」という意味です。そしてSPAのファイルをtemplateから引っ張ってきています。",[10,90,91,92,95,96,99,100,103],{},"こうすることで、例えば ",[42,93,94],{},"https:\u002F\u002F~~~\u002Faaa","、",[42,97,98],{},"https:\u002F\u002F~~~\u002Fbbb\u002Faa","、などはSPAのファイルが返され、あとはSPAがそのURLに対しての処理を行ってくれます。一方で",[42,101,102],{},"https:\u002F\u002F~~~\u002Fadmin"," とすればDjangoの場合は管理画面にアクセスできます。",[105,106,107],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":40,"searchDepth":60,"depth":60,"links":109},[],[111],"ministack","2020-12-04","md",null,{},true,"\u002Farticles\u002Fdjango-nuxt-routing",{"title":5,"description":5},"articles\u002Fdjango-nuxt-routing",[121,122],"django","nuxt","u-7H0bMOrS2JKrDbSIBUgp_ZgGLGpmCAjFGtTaDoVqc",1780987145020]