忙しい人のために！
- mkdir プロジェクト名&&cd プロジェクト名&&crate react-app (--template typescript)でフロントのベースを作成！
- rootでディレクトリでdjango-admin startproject+django-admin startappでバックのベースを作成
- フロントにAxiosをインストールし、App.js or App.tsxにポート8000番にGETリクエストを送るようなボタンでも作る（AxiosでGETリクエストを送ることさえできればなんでも良い）
- バック側のstartappで指定したディレクトリのviews.pyとurls.py(新しく作る)にてとレスポンスとリクエストのurl指定を作成。
- startprojectで指定したディレクトリのurls.pyでstartapp側のディレクトリのurls.pyをincludeする
- startprojectで指定したディレクトリのsettings.pyにてインストールapp、middlewareとcorsの対策を記述する。
- rootディレクトリ上からcd front&&yarn start => 3000番が立ち上がる
- rootディレクトリ上からcd back&& python manage.py migrate(初回だけ)&&python manage.py runserver => 8000番にサーバーが立ち上がる
- この状態で3000番のビューのPush!!ボタンをクリックしてYay!!とでたら成功です!
ちゃんとみてくれる方へ！
ありがとうございます！
今回の記事のざっくりとした仕組み図です！
作成の動機
チーム開発でフロントエンドをReact,バックエンドをPythonにすることが決まりました。
バックエンドをPythonで書くときのフレームワークはFlaskしか触ったことがなく、これを機にDjangoを勉強してみようと思い、作った試作アプリの過程をこの記事に吐いてます！
プロジェクトディレクトリ図
root/
┣ back
┃ ┣ back(rootディレクトリでのdjango-admin startprojectで作成)
┃ ┣ backend(django-admin startappで作成)
┃ ┗ manage.py
┃
┣ front
┃ ┣ public
┃ ┗ src
┃ ┗ App.js
┗ READMEとか、、、
今回は一つのプロジェクトにbackendとfrontendのソースを入れることにしています。
環境
OS
- macOS Catalina 10.15.7
front
- node v16.0.0
back
- python 3.9.0
- Django 3.2.6
- django-cors-headers 3.8.0
- djangorestframework 3.12.4
バックエンドの実装ではvenvを使ってDjango用の仮想環境を別途構築した方が他のプロジェクトのことも考えると良いと思います
今回は目的と外れるのでvenvでの仮想環境の構築とプロジェクトへの適用は解説しませんが、下記に参考資料を載せておきます
また、pythonをWeb開発にごりごり使いたいよーって人はvertualenvwrapperというvenvで構築した仮想環境を管理できるライブラリを使用するのもおすすめです！
front実装1
1. mkdir project名&&cd project名
# 今回はsample_appにしています
2. yarn create react-app front
#TypeScriptを使用する場合は --template typescriptも
3. cd front&&yarn add Axios
これで一旦front側に必要な環境の構築が完了しました
今回はパッケージマネージャにyarnを利用していますが、npmでも大丈夫です
後ろにAxiosについての簡単な説明を乗っけておきますので、Axiosとはなんぞやという方は見てみてください！！
front実装2
frontディレクトリの中にあるsrcディレクトリのApp.jsを次のように変更します。
import { useState } from "react";
import "./App.css";
import logo from "./logo.svg";
import axios from "axios";
function App() {
const [text, setText] = useState("");
const handleClick = () => {
axios.get("http://127.0.0.1:8000/test").then((res) => {
console.log(res);
setText(res.data);
});
};
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<button type="button" onClick={handleClick}>
PUSH!!
</button>
<h1>{text}</h1>
</header>
</div>
);
}
export default App;
見た目はこんな感じになります
ざっくり説明
- ボタンを配置し、そのボタンをクリックしたときにhandleClick関数が発動するようにしています
- handleClick関数はクリックされた際にAxiosを利用して"http://127.0.0.1:8000/test" このURLにGETリクエストを送信する仕組みにしています(後に説明するバックエンドでサーバーを立ち上げた時のURL/testを記述してください！)
- バックエンド側から返ってきたResponseの中のdataをsetTextメソッドによってボタンの下に表示するようにしています。
- バックエンドからはYay!!という文字列をレスポンスに含めているので下記のような見た目になります。
back実装1
ルートディレクトリ（今回で言うとsample_app）に戻ってください！
今回のバックエンドの開発に必要なライブラリを入れていきます
pip install Django
pip install djangorestframework
pip install django-cors-headers
ざっくり説明
Django
DjangoとはPythonでバックエンドを開発する際に利用するフレームワークの一つです。
同じようなことができるフレームワークとしてFlaskがありますが、今回はDjangoを使用します
DjangoとFlaskの違いは？PythonのWebフレームワーク2種を比較します
djangorestframework
djangorestframeworkはflaskと同じぐらい簡単にWebAPIサーバーを構築できるやつです！すごい！
django-cors-headers
djnago-cors-headersを利用してバックエンドにフロントで立てたportのアクセス権を付与します
これをする理由はCORS(オリジン間共有)で怒られないためになんですが、CORSとはなんぞやという人はこれを機に勉強するといいと思います！（自分も勉強します、、、）
なんとなく CORS がわかる...はもう終わりにする
back実装2
django-adminでプロジェクトとWebAPIサーバー用のアプリケーションを作成
1. django-admin startproject back&&cd back
2. django-admin startapp backend
back実装3
- backディレクトリの中の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',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
+'corsheaders.middleware.CorsMiddleware',
]
#これを追加
CORS_ALLOWED_ORIGINS = [
'http://localhost:3000',
]
CORS_ALLOWED_ORIGINSでどのオリジン（どのURL）からのアクセスを許可するかを指定
フロントで立てたポートを指定してください（自分は3000番に立てたので上のように指定しました）
- backディレクトリの中のviews.pyとulrs.pyを設定する
views.py
from rest_framework import status
from rest_framework.decorators import api_view
from rest_framework.response import Response
@api_view(["GET"])
def test(request):
return Response("Yay!!", status=status.HTTP_201_CREATED)
testという関数にリクエストが入ってきたら"Yay!!"というレスポンスをリターンするように記述
urls.py(無いと思うので作成してください touch urls.py)
from django.urls import path
from rest_framework.urlpatterns import format_suffix_patterns
from backend import views
urlpatterns = [
path('test', views.test),
]
urlpatterns = format_suffix_patterns(urlpatterns)
/testにリクエストが来たときviews.pyのtest関数にリクエストを渡すように記述
backディレクトリのurls.pyもいじる（こっちはもともとあると思います）
from django.urls import path, include
urlpatterns = [
path('', include('backend.urls')),
]
プロジェクト自体にアプリケーションで指定したURLの存在を設定する
これでコーディングは終了です！！
アプリの動かし方
rootディレクトリ上から
- cd front&&yarn start => 3000番が立ち上がる
- cd back&& python manage.py migrate(初回だけ)&&python manage.py runserver => 8000番にサーバーが立ち上がる
- この状態で3000番のビューのPush!!ボタンをクリックしてYay!!とでたら成功です!
後書き
ここまで読んでくださった方、誠にありがとうございます！
正直、説明が簡潔では無い部分が多く、読みにくかったと思われましたよね、、、
このようなベースとなる仕組みを作成するだけでもDB周りの知識をつけるだけで自分の作りたいアプリケーションを簡単に作れると思います！！
では良い開発ライフを！！！