今回やる事
DRF、Vue.js、dockerでの環境構築をする上で、各ファイルの意味だったりコマンドだったりをよく忘れるので、とりあえずDRFとVueが連携出来るまでを、ほぼ自分用に残しておきます。
例として、ユーザー一覧を取得するだけの処理を実装します。
環境
docker
$ docker version
Version: 20.10.6
docker_compose
$ docker-compose -v
docker-compose version 1.29.1, build c34c88b2
python
$ python --version
Python 3.8.10
構築編
DBは開発段階ではsqliteを使い、DRF用にコンテナ1つ、Vue用にコンテナ1つを用意します。
サーバーはそれぞれの開発サーバーを使用するとします。
まずは、以下の様なディレクトリ構成でファイルを作成します。
アプリ名は「k2」です。
k2/
├ api
│ ├ Dockerfile
│ └ requirements.txt
├ web
│ └ Dockerfile
└docker-compose.yml
※一部省略。
docker-composeを定義
まずは、docker-composeでDRF用のコンテナとVue用のコンテナを定義します。
docker-compose.yml
version: '3'
services:
api:
# Dockerfileの場所
build: ./api
# どのimageを使うか。Dockerfileでimageは作成する。
image: k2-drf-image
# コンテナ名を指定出来る。
container_name: k2-api
# 公開用のポート。ホスト側:コンテナ側を指定
# コンテナ側のみ指定も可能だが、その時ホスト側はランダムになる。
ports:
- '8000:8000'
# マウントするパス
volumes:
- ./api/:/usr/src/k2/api/
# dockerコンテナを落とさず起動し続けるようにする
tty: true
web:
build: ./web
image: k2-vue-image
container_name: k2-web
ports:
- '8080:8080'
volumes:
- ./web/:/usr/src/k2/web/
tty: true
次に、apiとwebのDockerfileを定義します。
apiのDockerfile
# イメージを選択
FROM python:3.9.5-alpine
# バイナリレイヤ下での標準出力とエラー出力を抑制
ENV PYTHONUNBUFFERED 1
# 開始ディレクトリ位置
WORKDIR /usr/src/k2/api
# 必要なものをインストール
# 今回はalpineなのでapkを使用する。
RUN apk update
RUN apk add --no-cache --vertual=wow-ini-module \
net-tools \
sudo \
bzip2 \
curl \
gcc \
git \
python3-dev \
vim \
bash
# ADDかCOPYを使うなら.dockerignoreを書いておく。
ADD . .
RUN pip install --upgrade pip
RUN pip install -r requirements.txt
とりあえず最小限をrequirements.txtに記述する。
requirements.txt
Django==3.2.4
django-cors-headers==3.4.0
django-environ==0.4.5
django-filter==2.3.0
djangorestframework==3.12.4
djangorestframework-jwt==1.11.0
gunicorn==20.0.4
requests==2.24.0
webのDockerfile
FROM node:10.17.0
WORKDIR /usr/src/k2/web/
RUN apt-get update
RUN apt-get install -y --no-install-recommends \
net-tools \
sudo \
bzip2 \
curl \
gcc \
git \
vim
RUN apt-get clean
RUN npm install -g yarn \
&& yarn global add @vue/cli \
イメージ構築、コンテナ作成～立ち上げ
$ docker-compose up -d --build
コンテナに接続し、環境を整える
ターミナルを2つ立ち上げてそれぞれで接続し、それぞれの最低限の環境を整える。
DRF側
$ docker-compose exec api bash
$ django-admin startproject api
$ django-admin startapp k2
$ python manage.py makemigrations
$ python manage.py migrate
$ python manage.py createsuperuser
上記で作ったファイル群を以下のフォルダ構成に直します。
k2/
└ api
├ api/
├ k2/
├ db.sqlite3
├ Dockerfile
├ manage.py
└ requirements.txt
とりあえずこの段階で、python manage.py runserver 0.0.0.0:8000で開発サーバーは立ち上がる。
Vue側
$ docker-compose exec web bash
vueプロジェクトの作成
①現在のディレクトリにフォルダ群を展開する。
$ vue create .
? Generate project in current directory? (Y/n) y
②マニュアルで導入するものを選択する。
? Please pick a preset:
Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
❯ Manually select features
③導入するものにスペースで☑を入れる。
? Check the features needed for your project:
◉ Choose Vue version
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router
◉ Vuex
◉ CSS Pre-processors
◉ Linter / Formatter
◉ Unit Testing
❯◉ E2E Testing
・Babel
JSのコードを新しい書き方から古い書き方へと変換するツール。
ブラウザによって古いバージョンしか対応していないため、このようなツールが必要になる。
・PWA
ネイティブアプリのような使い勝手を実現したWEBアプリの事。
インストール不要で、ホーム画面やアイコン追加やプッシュ通知などが可能。
そのほかに読み込み速度や表示の高速化、オフラインで閲覧化などのメリットもある。
・CSS Pre-processor
Sass, Less, Stylusなどのプリプロセッサ独自の構文でCSSを作成するプログラム。
純粋なCSSにはない、ミックスイン、セレクターの入れ子、セレクター継承などが可能。
・Linter
ESLint等のコードフォーマッターなどを使用するか選択する。
・Unit Testing（単体テスト）
Mocha+Chainや、Jestなどを使用するか選択する。
・E2E Testing（End to Endテスト）
システム全体を通してテストを行う事。
それらのライブラリなどを使うか選択する。
④vueのバージョンを選択する。
3.x系だとvuetify Alphaしか対応してないみたいなので、今回は普通の2.xを使います。
? Choose a version of Vue.js that you want to start the project with
❯ 2.x
3.x
⑤routerのhistoryモードを使うか選択。
? Use history mode for router? (Requires proper server setup for index fallback in producti
on) (Y/n) y
・historyモード
ページのリロード無しにURL遷移を実現するhistory.pushState APIを利用したルーターのモード。シングルページのクライアントアプリなので、適切なサーバーの設定をしないと、404エラーが起きる。そのため、どのアセットにもURLがマッチしなかった場合に、index.htmlを返す設定が必要。
・hashモード（vue-routerのデフォルト）
完全なURLをhashを使ってシミュレートし、URLが変更された時にページのリロードが起きない。
⑥ どのCSS pre-processorを使うか選択。
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)
: (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
⑦ linterを選択する。
? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
⑧ lintの追加の機能を設定
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert
selection)
❯◉ Lint on save
◯ Lint and fix on commit
⑨ unitテストに何を使用するか。
? Pick a unit testing solution: (Use arrow keys)
❯ Mocha + Chai
Jest
・Mochaは、BDD/TDDをするための枠組みを提供、chaiはテストを実施するための便利なメソッドを提供してくれる。TDD（テスト駆動開発）/BDD（振る舞い駆動開発）
・JestはFacebookが開発したテストランナ。
⑩ E2Eテストに何を使用するか。
? Pick an E2E testing solution:
❯ Cypress (Chrome only)
Nightwatch (WebDriver-based)
WebdriverIO (WebDriver/DevTools based)
・Cypress
E2Eテストフレームワーク
・Nightwatch
Seleniumを基盤として作られており、Node.jsでブラウザを操作してE2Eテストを行うツール
・WebdriverIO
ウェブブラウザによるテストを自動的に実行するライブラリ
⑪ Babel, ESLintなどをどのファイルで管理するか。
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
In package.json
⑫ プリセットをセーブするか
? Save this as a preset for future projects? (y/N) n
⑬ どちらのパッケージマネージャーを使うか。
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn
Use NPM
これでvueのプロジェクトが出来上がり、yarn serveで開発サーバーが立ち上がる。
あと、必要に応じて下記のライブラリ等も導入しておく。
下の連携テストでは、
・vuetify
・sass
・axios
・boxicons
・vue-loading-template
を使っている。
# update
yarn install
# vuetify
yarn add vuetify (vue add vuetify)
# sass
yarn add --dev sass
# vuesax
npm install vuesax
# material-icons（アイコン）
npm install material-icons --save
# axios
npm install --save axios vue-axios
# boxicons（アイコン）
npm i boxicons
# lodash
npm i --save lodash
# vue-persistedstate
npm i vuex-persistedstate
# vue-session
npm i vue-session
# vue-loading-template
npm install vue-loading-template --save
連携テスト
とりあえず、ユーザー一覧をDRFから受け取ってそれを表示させるところまでをやります。
DRF側
やる事
- 初期設定
- ルーティング
- View記述
DRF: 初期設定
k2/api/api/settings.py
# 追加
import logging
logging.basicConfig(
level=logging.DEBUG,
format='''%(levelname)s %(asctime)s %(pathname)s:%(funcName)s 行数:%(lineno)s:%(lineno)s
%(message)s'''
# 編集
ALLOWED_HOSTS = ['*']
# 追加
INSTALLED_APPS = [
...
'rest_framework',
# Json Web Token関連のライブラリ
'rest_framework_jwt',
'django_filters',
'k2.apps.K2Config',
]
# 追加
REST_FRAMEWORK = {
# デフォルトのパーミッションクラス
'DEFAULT_PERMISSION_CLASSES': [
'rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly',
],
# デフォルトの認証クラス
'DEFAULT_AUTHENTICATION_CLASSES': [
'rest_framework_jwt.authentication.JSONWebTokenAuthentication',
'rest_framework.authentication.SessionAuthentication',
'rest_framework.authentication.BasicAuthentication',
],
# デフォルトのフィルターバックエンド
'DEFAULT_FILTER_BACKENDS': [
'django_filters.rest_framework.DjangoFilterBackend',
],
# デフォルトのスロットルクラス
'DEFAULT_THROTTLE_CLASSES': [
'rest_framework.throttling.AnonRateThrottle',
'rest_framework.throttling.UserRateThrottle',
],
# デフォルトのスロットルの制限
'DEFAULT_THROTTLE_RATES': {
'anon': '100/day',
'user': '5/sec',
}
}
# 追加
if DEBUG:
# CORS関連の設定追加。
INSTALLED_APPS += ['corsheaders']
MIDDLEWARE = ['corsheaders.middleware.CorsMiddleware'] + MIDDLEWARE
CORS_ORIGIN_ALLOW_ALL = True
DRF: ルーティング
k2/api/k2/urls.py
from django.urls import path, include
from . import views, viewsets
from rest_framework.routers import DefaultRouter
router = DefaultRouter()
router.register('users', viewsets.UserViewSet)
app_name = 'k2'
urlpatterns = [
path('', include(router.urls)),
]
k2/api/api/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include('k2.urls')),
]
DRF: View記述
今回はDjangoデフォルトのUserモデルを使用します。
k2/api/k2/viewsets.py
from django.contrib.auth.models import User
from serializers import UserSerializer
from rest_framework import (
viewsets
)
import logging
logger = logging.getLogger(__name__)
class BaseModelViewSet(viewsets.ModelViewSet):
pass
class UserViewSet(BaseModelViewSet):
queryset = User.objects.all()
serializer_class = UserSerializer
def list(self, request, *args, **kwargs):
return super().list(request, *args, **kwargs)
k2/api/k2/serializers.py
from rest_framework import serializers
from django.contrib.auth.models import User
import logging
import logging
logger = logging.getLogger(__name__)
class UserSerializer(serializers.ModelSerializer):
class Meta:
model = User
fields = '__all__'
これで、localhost:8000/api/users/にアクセスすると、python manage.py createsuperuserコマンドなどで作成したユーザー一覧が返る。
Vue側
やる事
- 初期設定
- ルーティング
- 画面実装
- ajax投げて表示
Vue: 初期設定
main.jsでライブラリ等を読み込む。
k2/web/src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import http from '@/plugins/http'
import vuetify from './plugins/vuetify'
import eventHub from '@/plugins/eventHub'
import 'boxicons/css/boxicons.min.css'
Vue.config.productionTip = false
Vue.use(http)
Vue.use(eventHub)
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
k2/web/src/App.vue
<template>
<v-app>
<router-view/>
</v-app>
</template>
<script>
export default {
name: 'App',
}
</script>
axiosのデフォルト設定をしておく。
k2/web/src/plugins/http.js
import Vue from 'vue'
import axios from 'axios'
import router from '@/router'
export default {
install: function (Vue, options) {
const http = axios.create({
baseURL: 'http://localhost:8000/',
xsrfCookieName: 'csrftoken',
xsrfHeaderName: 'X-CSRFTOKEN',
timeout: 10000,
})
Vue.prototype.$axios = http
}
}
k2/web/src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
export default new Vuetify({
})
孫コンポーネントとか遠い関係のコンポーネントのイベントを検知するためのもの。
k2/web/src/plugins/eventHub.js
import Vue from 'vue'
const eventHub = {
install: function (Vue, options) {
Vue.prototype.$eventHub = new Vue()
}
}
export default eventHub
eslintがうるさいので最低限だまらせておく。
k2/web/.eslintrc.js
...
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-tabs': 'off',
'indent': 'off',
'comma-dangle': 'off',
'eol-last': 'off',
'no-unused-vars': 'off',
'no-mixed-spaces-and-tabs': 'off',
'no-unneeded-ternary': 'off',
'vue/no-unused-components': 'off',
'no-multi-spaces': 'off'
},
...
Vue: ルーティング
全体のルート
k2/web/src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import pages from './pages'
Vue.use(VueRouter)
const routes = [...pages]
const router = new VueRouter({
mode: 'history',
routes
})
export default router
ページ関連のルート
k2/web/src/router/pages.js
import { Home } from '@/views/index'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
]
export default routes
Vue: 画面実装
index.jsにコンポーネントを纏める。
k2/web/src/views/index.js
export { default as Home } from './Home'
Home画面のコンポーネント。今回はコンポーネント分けないで直書きしちゃいます。
k2/web/src/views/Home.vue
<template>
<div id="home_wrap">
<v-card
flat
tile
>
<div v-if="loading">
<Loading/>
</div>
<div v-else>
<v-card-title>
users
</v-card-title>
<v-list three-line>
<template v-for="(user, i) in users">
<v-list-item
:key="i"
>
<v-list-item-avatar>
<i class='bx bxs-user'></i>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>
{{ user.username }}
</v-list-item-title>
<v-list-item-subtitle>
id: {{ user.id }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</template>
</v-list>
</div>
</v-card>
</div>
</template>
<script>
import Loading from '../components/Loading'
export default {
name: 'Home',
components: {
Loading,
},
data: () => ({
loading: true,
users: [],
}),
mounted () {
this.getUsers()
},
methods: {
getUsers () {
this.loading = true
this.$axios({
url: '/api/users/',
method: 'GET',
})
.then(res => {
console.log(res)
this.users = res.data
this.loading = false
})
.catch(e => {
console.log(e)
this.loading = false
})
}
}
}
</script>
<style lang="scss" scoped>
#home_wrap {
width: 1200px;
margin: 0 auto;
}
</style>
ロード画面のコンポーネント
k2/web/src/components/Loading.vue
<template>
<div class="loading_wrap">
<vue-loading
type="cylon"
color="#aaa"
:size="{ width: '50px', height: '50px' }"
></vue-loading>
</div>
</template>
<script>
import { VueLoading } from 'vue-loading-template'
export default {
name: 'Loading',
components: {
VueLoading,
},
}
</script>
<style lang="scss" scoped>
.loading_wrap {
width: 50px;
height: 50px;
margin: 50px auto;
}
</style>
まとめ
こんな感じの画面になりました。
