vue index-html DRF辿り着き方

2024年1月1日 21:45

example.com/index.htmlはどのような記述がなされているのでしょうか?また、それはvueのツールが自動生成するのでしょうか?開発者が記述するのでしょうか?

example.com/index.html は、Vue.js のフロントエンドアプリケーションのエントリーポイントとなる HTML ファイルです。このファイルには、以下の記述がなされています。
·         ルートコンポーネントの読み込み
·         スタイルシートの読み込み
·         JavaScript ファイルの読み込み
具体的には、以下のようなものになります。

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue.js アプリケーション</title>
</head>
<body>
<div id="app"></div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="./js/app.js"></script>
</body>
</html>

このファイルは、Vue.js のツールによって自動生成することができます。また、開発者が手動で記述することもできます。
自動生成する場合は、以下のコマンドを実行します。

vue create my-app

このコマンドを実行すると、my-app という名前の Vue.js プロジェクトが作成されます。このプロジェクトの public ディレクトリに index.html ファイルが存在します。
手動で記述する場合は、以下の内容を記述します。

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue.js アプリケーション</title>
</head>
<body>
<div id="app"></div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="./js/app.js"></script>
</body>
</html>

id="app" の部分は、ルートコンポーネントを表示する要素の ID です。src="./js/app.js" の部分は、ルートコンポーネントの JavaScript ファイルのパスです。
このファイルの内容は、プロジェクトの要件に合わせて変更することができます。

このindex.htmlはvueが作成したindex.htmlですよね。上記のurls.pyの環境でどのようにpublicのindex.htmlに繋がるのでしょうか？
はい、その通りです。上記のurls.pyの環境で、Vueが作成したindex.htmlに繋がるには、以下の2つの方法があります。
1. Vueのアプリケーションを、Djangoのプロジェクトに組み込む
2. Djangoのプロジェクトとは独立して、Vueのアプリケーションを作成
Vueのアプリケーションを、Djangoのプロジェクトに組み込む場合
この場合、Vueのアプリケーションを、Djangoのプロジェクトのプロジェクトルートに配置します。たとえば、プロジェクトルートに vue_app ディレクトリを作成して、そこに Vueのアプリケーションを配置します。
次に、urls.py ファイルに、Vueのアプリケーションの URL を定義します。たとえば、以下のように定義します。

Python
from django.contrib import admin
from django.urls import path

from . import views
from .vue_app import urls as vue_urls

urlpatterns = [
path('admin/', admin.site.urls),
path('', views.index, name='index'),
path('vue_app/', include(vue_urls)),
]

この定義により、/vue_app/ にアクセスすると、Vueのアプリケーションの URLConf である vue_urls が処理されます。
Vueのアプリケーションの URLConf では、/ へのルーティングを定義します。たとえば、以下のように定義します。

Python
from django.urls import path

urlpatterns = [
path('', views.index, name='index'),
]

この定義により、/ にアクセスすると、Vueのアプリケーションの index.html がレスポンスされます。
Djangoのプロジェクトとは独立して、Vueのアプリケーションを作成する場合
この場合、Vueのアプリケーションを、Djangoのプロジェクトとは独立した場所に配置します。たとえば、プロジェクトルートとは別のディレクトリに vue_app ディレクトリを作成して、そこに Vueのアプリケーションを配置します。
次に、/vue_app/ にアクセスすると、Vueのアプリケーションの index.html をレスポンスするように、Djangoのプロジェクトの Webサーバーを設定します。たとえば、Nginx を使用している場合は、以下のように設定します。

location /vue_app/ {
alias /path/to/vue_app/;
}

この設定により、/vue_app/ にアクセスすると、/path/to/vue_app/ ディレクトリのコンテンツがレスポンスされます。
具体的には、/path/to/vue_app/index.html がレスポンスされます。

Vueのアプリケーションを、Djangoのプロジェクトに組み込む場合の説明でpath('', views.index, name='index')でvue_app/public/index.htmlがレスポンスされるのでしょうか？
なぜvue_app/public/index.htmlがレスポンス出来るのでしょうか？

はい、その通りです。path('', views.index, name='index')でvue_app/public/index.htmlがレスポンスされます。
Djangoのプロジェクトでは、デフォルトで、プロジェクトのルートディレクトリに static ディレクトリが作成されます。このディレクトリには、静的ファイル（CSS、JavaScript、画像など）を配置します。
Vueのアプリケーションを、Djangoのプロジェクトに組み込む場合、Vueのアプリケーションの静的ファイルは、static ディレクトリに配置します。たとえば、vue_app ディレクトリに public ディレクトリを作成して、そこに Vueのアプリケーションの静的ファイルを配置します。
この場合、static ディレクトリには、以下のようなファイル構成になります。
static
└── vue_app
└── public
└── index.html

上記の設定で、/ にアクセスすると、views.index ビューが呼び出されます。views.index ビューは、static ディレクトリから index.html を読み取って、レスポンスします。
具体的には、static/vue_app/public/index.html がレスポンスされます。
なお、vue_app/public/index.html を直接呼び出すこともできます。たとえば、以下のように定義します。

Python
from django.contrib import admin
from django.urls import path

from . import views

urlpatterns = [
path('admin/', admin.site.urls),
path('', views.index, name='index'),
path('vue_app/public/index.html', views.index, name='index'),
]

この定義により、/ にアクセスすると、vue_app/public/index.html がレスポンスされます。
ソース
1. https://django.fun/en/qa/434323/

このindex.htmlはvueが作成したindex.htmlですよね。上記のurls.pyの環境でどのようにpublicのindex.htmlに繋がるのでしょうか？

はい、Django REST Framework (DRF) の URLs.py にパス情報が書かれています。
DRF では、URL とビューの対応関係を、URLConf と呼ばれる仕組みで管理しています。URLConf は、urls.py ファイルに記述します。
たとえば、以下のような URLs.py ファイルがあるとします。

Python
from django.contrib import admin
from django.urls import path

from . import views

urlpatterns = [
path('admin/', admin.site.urls),
path('', views.index, name='index'),
]

この場合、URL が / の場合、views.index ビューが呼び出されます。
DRF では、デフォルトで / へのルーティングが定義されています。そのため、何も設定しなくても、/ にアクセスすると、DRF のルーティングが処理され、index.html がレスポンスされます。
具体的には、DRF のルーティングは、次のような処理を行います。
1.    URL を解析して、パスとクエリパラメータを抽出します。
2.    パスとクエリパラメータから、ビューを検索します。
3.    ビューを呼び出して、レスポンスオブジェクトを生成します。
この処理により、/ へのアクセスは、views.index ビューに送られ、index.html がレスポンスされます。

vue.config.js ファイルで、indexPath オプションを指定することで、index.html を指定できます。
たとえば、以下のように設定します。

JavaScript
const path = require('path');

module.exports = {
// ...
indexPath: path.resolve(__dirname, 'public/index.html'),
};

この場合、public ディレクトリに index.html が配置されます。
また、Vueのアプリケーションのルート URL を / に指定しています。
ただし、static ディレクトリを指定していない場合、index.html は、indexPath オプションで指定したディレクトリに配置する必要があります。
static ディレクトリを指定している場合、index.html は、static ディレクトリに配置できます。
なお、indexPath オプションの値は、絶対パスまたは相対パスで指定できます。

static ディレクトリを指定していない場合、Vueのアプリケーションの静的ファイルは、出力ディレクトリ（outputDir オプションで指定）に配置されます。
たとえば、outputDir オプションを dist に指定した場合、静的ファイルは dist ディレクトリに配置されます。
この場合、index.html は、dist ディレクトリに配置する必要があります。
static ディレクトリを指定している場合、Vueのアプリケーションの静的ファイルは、指定したディレクトリに配置されます。
たとえば、staticDir オプションを public に指定した場合、静的ファイルは public ディレクトリに配置されます。
この場合、index.html は、public ディレクトリに配置できます。
したがって、static ディレクトリを指定している場合とは、staticDir オプションでディレクトリを指定している場合を指します。
static ディレクトリを指定していない場合とは、staticDir オプションでディレクトリを指定していない場合を指します。
なお、indexPath オプションは、どちらの場合でも使用できます。

static ディレクトリにindex.htmlを置く場合、vueのアプリケーションを作成する時static ディレクトリをどのように教えてあげるのでしょうか？
Vueのアプリケーションを作成する際、static ディレクトリを教えてあげるには、以下の2つの方法があります。
1. vue-cli のオプションを使用する
Vue CLI のオプションで、static ディレクトリを指定できます。たとえば、以下のように指定します。

vue create my-app --static-directory=public

この場合、my-app ディレクトリに public ディレクトリが作成され、そこに Vueのアプリケーションの静的ファイルが配置されます。
2. webpack.config.js で設定する
webpack.config.js ファイルで、static ディレクトリを設定できます。たとえば、以下のように設定します。

JavaScript
const path = require('path');

module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
resolve: {
extensions: ['.js', '.vue'],
},
module: {
rules: [
{
test: /\.(js|vue)$/,
use: {
loader: 'eslint-loader',
options: {
fix: true,
},
},
},
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
],
},
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
loader: 'url-loader',
options: {
limit: 10000,
},
},
],
},
// 静的ディレクトリを指定
static: {
// ディレクトリ名
dir: 'public',
// ルート URL
url: '/',
},
};

この場合、my-app ディレクトリに public ディレクトリが作成され、そこに Vueのアプリケーションの静的ファイルが配置されます。
また、Vueのアプリケーションのルート URL を / に指定しています。
どちらの方法でも、static ディレクトリを指定することで、Vueのアプリケーションで静的ファイルを使用できるようになります。
ソース
1. https://github.com/KudouRan/learning
2. https://github.com/gogo-wwc/gogo-wwc

Django REST FrameworkとVue.jsの環境構築 #Python - Qiita
django-vue-env/以下にstaticとtemplatesのディレクトリを作成します。
django-vue-env/
├app/
├frontend/
├project/
├static/ # 追加
├templates/　# 追加
├venv/
├db.sqlite3
└manage.py
frontend/vue.config.jsにビルド用の設定を追加します。
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
publicPath: "/",
outputDir: "../static",
assetsDir: "../static",
indexPath: "../templates/index.html",
transpileDependencies: true,
devServer: {
host: "localhost",
hot: "only",
proxy: {
"^/api": {
target: "http://localhost:8000",
changeOrigin: true,
},
},
},
})
※Vue CLIの公式ドキュメント
https://cli.vuejs.org/config/
上記ファイルの編集ができたら、ビルドを実行します。
frontend% npm run build
templates/index.htmlが生成されており、staticディレクトリ以下にcss, jsファイルが生成されていればOK。

vue build 本番
create-vue (Vite ベース) または Vue CLI (webpack ベース) で生成されたプロジェクトは、本番ビルド用にあらかじめ設定がされています。
https://ja.vuejs.org/guide/best-practices/production-deployment
https://jp.skilled.yashio-corp.com/media/programming/5807/
ViteはJavaScript フレームワークの中でも人気を誇っている『Vue.js』の開発者である『Evan You(イヴァン・ヨー)氏』によって開発されました。

この記事が気に入ったらサポートをしてみませんか？