シンプルブログ、本番環境準備

Vue.js

概要

DRFとVue.jsで、シンプルブログを作るシリーズの一つです。本番環境のための準備をしていきますが、以前作ったアプリとやることは殆ど同じです。

frontendディレクトリ内にvue.config.jsを作り、次のようにします。

if (process.env.NODE_ENV === 'production') {
    module.exports = {
        outputDir: '../static',
        assetsDir: '../static/nblog3',
        indexPath: '../templates/nblog3/index.html',
        publicPath: '/design-note/',
    }
}

また、幾つかの設定を本番と開発環境で違う値になるようにします。まずはmain.js

Vue.prototype.$httpPosts = process.env.NODE_ENV === 'production' ? '/design-note/api/posts/' : 'http://127.0.0.1:8000/design-note/api/posts/'
Vue.prototype.$httpCategories = process.env.NODE_ENV === 'production' ? '/design-note/api/categories/' : 'http://127.0.0.1:8000/design-note/api/categories/'

本番環境では、単純な相対パスで指定するようにしました。サーバーの構成によってもここは変わるでしょう。

store/index.jsの次の部分も書き換えます。

strict: process.env.NODE_ENV !== 'production',

strictは、ストアの値がちゃんとミューテーションを通して変更されているか?と言った監視をして警告してくれますが、本番環境では不要です。

最後に、index.htmlを配信するビューを作りましょう。まずurls.pyに追加します。

urlpatterns = [
    path('api/posts/', views.PostList.as_view(), name='post_list'),
    path('api/posts/<int:pk>/', views.PostDetail.as_view(), name='post_detail'),
    path('api/categories/', views.CategoryList.as_view(), name='category_list'),
    path('', views.Top.as_view(), name='top'),
    path('<path:path>', views.Top.as_view(), name='top_sub'),
]

api関連のURLじゃなければ、全てのURLでTopビューが呼ばれるようになり、Topビューではindex.htmlを返却して、そこから先はindex.html内のvueが処理するようになります。

views.pyに追加します。

from django.views import generic


class Top(generic.TemplateView):
    template_name = 'nblog3/index.html'

frontendディレクトリ内でnpm run buildすれば終了です。127.0.0.1:8000/design-note/(8000ポート)にアクセスし、動作するかを確認しておきましょう(その際、Djangoのrunserverはし直しましょう。追加したファイルなどは基本的に検知されません)

Relation Posts

Comment

記事にコメントする

まだコメントはありません。