こちらの動画を参考にして、Django REST frameworkとVue.jsでTODOアプリを作成してみます。
まず下記コマンドを実行しvuengo_3_6_4という仮想環境を作成します。
virtualenv vuengo_3_6_4
virtualenvコマンドもよくわかってなかったので調べました。
こちらの記事がわかりやすかったです。
次に下記コマンドを実行して仮想環境を有効化します。
cd vuengo_3_6_4 source bin/activate
するとターミナルの表示が変わり、仮想環境に入れたことが確認できました。
pip freezeコマンドで仮想環境にインストールされているパッケージを確認することができるようです。
自分の環境でpip freezeを実行してみると何もインストールされていないようでした。
次に以下のコマンドでDjangoをインストールします。
pip install django
上記コマンド実行後pip freezeすると新しくパッケージがインストールされていました。
次に以下のコマンドでDjango REST frameworkをインストールします。
pip install djangorestframework
上記コマンド実行後pip freezeするとDRFがパッケージに追加されていました。
次に以下のコマンドでdjango-cors-headersをインストールします。
pip install django-cors-headers
次に以下のコマンドでDjangoの新規プロジェクトを作成します。
django-admin startproject vuengo
仮想環境のvuengo_3_6_4をルートディレクトリにしてVSCodeを開くと、以下の画像のようなディレクトリ構成になりました。
次にvuengo/settings.pyに以下の設定を追記します。
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
# 追加
'rest_framework',
'corsheaders',
]
また、フロントエンドからの通信を許可するために以下の設定をsettings.pyに追加します。
ALLOWED_HOSTS = ['127.0.0.1'] CORS_ORIGIN_ALLOW_ALL = True
次にsettings.pyのMIDDLEWARE[]内に以下の設定を追記します。
'corsheaders.middleware.CorsMiddleware',
ここまで来たら以下のコマンドでマイグレーションを実行します。
python manage.py makemigrations
本来問題なくマイグレーションが実行されるはずですが、自分の場合はエラーが出てしまったので、仮想環境から抜けて再度makemigrationsコマンドを実行するとマイグレーション成功しました。
(エラーはおそらくインストールしてるパッケージが干渉してるのかと推測してますが、原因はまだわかっていません。
Dockerで開発環境立ち上げる方法に変えようか考え中です。 )
次に以下のコマンドを実行してサーバーを立ち上げます。
python manage.py migrate python manage.py runserver
ブラウザにアクセスすると無事DRFのサーバーが起動していました。
手を動かしながら知見深めていきます。
