準備
PostgreSQL
postgres=# CREATE USER terajq WITH PASSWORD 'pas';
postgres=# CREATE DATABASE teranote;
postgres=# GRANT ALL PRIVILEGES ON DATABASE teranote TO terajq;
Python Djangoインストール
仮想環境作成 psycopg2インストール Djangoインストール プロジェクト作成 アプリ作成
- コードを置きたい場所に cd し、仮想環境作成し、psycopg2（データベースのバインディング ）インストール、Djangoをインストールし、プロジェクト作成し、アプリを作成する。
- 仮想環境を作成
python3 -m venv <仮想環境名>
% python3 -m venv venv
% source ./venv/bin/activate // アクティベート
- psycopg2をインストール PostgreSQLデータベースとの連携のため
% pip install psycopg2
% pip install django
django-admin startproject <プロジェクト名>
% django-admin startproject mysite
- Django REST Frameworkをインストール、設定する 仮想環境内で行う
pip install djangorestframework
% cd mysite
% python manage.py runserver
Djangoプロジェクトのルートディレクトリ内で、以下のコマンドを使用してアプリケーションを作成
$ python manage.py startapp teranote
データベース
DATABASES = {
"default": {
"ENGINE": "django.db.backends.postgresql",
"NAME": "mydatabase",
"USER": "mydatabaseuser",
"PASSWORD": "mypassword",
"HOST": "127.0.0.1",
"PORT": "5432",
}
}
Reactアプリケーションのセットアップ
- Reactアプリケーションをプロジェクトにセットアップする
npx create-react-app myreactapp
mysite/
├── myapp/
│ ├── __init__.py
│ ├── admin.py
│ ├── apps.py
│ ├── migrations/
│ ├── models.py
│ ├── tests.py
│ └── views.py
├── myreactapp/
│ ├── node_modules/
│ ├── public/
│ ├── src/
│ ├── package.json
│ ├── package-lock.json
│ ├── README.md
│ └── ...
├── mysite/
│ ├── __init__.py
│ ├── asgi.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
└── manage.py
cd myreactapp
npm install
npm list
npm start
参考
本番環境でのDjangoとReactのプロジェクトのディレクトリ構造は、開発環境とは異なる場合があります。一般的には、Reactアプリケーションをビルド（`npm run build`）した後、その出力をDjangoが提供する静的ファイルとして扱います。これにより、Reactアプリケーションのビルド出力はDjangoプロジェクトの一部となります。
以下に、そのような構成を示します：
```
django-teranote/
|
|---mysite/ #djangoプロジェクトのルートディレクトリ
| ├── myapp/
| │ ├── __init__.py
| │ ├── admin.py
| │ ├── apps.py
| │ ├── migrations/
| │ ├── models.py
| │ ├── tests.py
| │ └── views.py
| ├── mysite/
| │ ├── __init__.py
| │ ├── asgi.py
| │ ├── settings.py
| │ ├── urls.py
| │ └── wsgi.py
| └── manage.py
|
| ── myreactapp/ #reactのルートディレクトリ
├── node_modules/
├── public/
├── src/
├── package.json
├── package-lock.json
├── README.md
└── ...
|
└── staticfiles/ # Djangoが提供する静的ファイルディレクトリ
└── myreactapp/ # Reactアプリケーションのビルド出力
└── ...
```
この構造では、Reactアプリケーションは独立したディレクトリで開発され、ビルドされた出力はDjangoが提供する`staticfiles/`ディレクトリに配置されます。これにより、DjangoはReactアプリケーションの静的ファイルを提供できます。
ただし、この構造は一例であり、具体的な要件や目標によって最適な構造は変わる可能性があります。また、本番環境でのデプロイメントには追加の設定が必要になる場合があります¹²³⁴。
ソース: Bing との会話 2023/10/2
(1) Folder structure for React and Django REST - Stack Overflow. https://stackoverflow.com/questions/44232828/folder-structure-for-react-and-django-rest.
(2) How to structure django + react project for deployment?. https://stackoverflow.com/questions/68966770/how-to-structure-django-react-project-for-deployment.
(3) reactjs - Django React project structure - Stack Overflow. https://stackoverflow.com/questions/61153118/django-react-project-structure.
(4) Best Practices for a Django Working Directory Structure. https://www.delftstack.com/howto/django/django-project-structure/.
DjangoでReactアプリの静的ファイルを配信するには、以下の手順を実行します¹²³⁴⁵:
1. **Reactアプリのビルド**: Reactアプリをビルドして、静的ファイル（`bundle.js`、`styles.css`など）を生成します¹.
2. **静的ファイルの配置**: ビルドした静的ファイルをDjangoプロジェクト内の適切なディレクトリ（通常は`STATICFILES_DIRS`で指定したディレクトリ）に配置します¹.
3. **テンプレートの作成**: Djangoのテンプレート（通常は`index.html`）を作成し、その中で静的ファイルを読み込むように設定します¹. これにより、DjangoがReactアプリを読み込むことができます¹.
4. **静的ファイルの集約**: `python manage.py collectstatic`コマンドを実行して、すべての静的ファイルを`STATIC_ROOT`で設定したディレクトリに集めます³⁵.
5. **Webサーバーの設定**: Webサーバーを設定して、`STATIC_ROOT`に置かれたファイルを`STATIC_URL`から配信するようにします³⁴.
以上が基本的な手順ですが、具体的なコードや詳細な手順は参考資料¹²をご覧ください。また、開発環境や要件によって手順が異なる場合がありますのでご注意ください。
ソース: Bing との会話 2023/10/2
(1) Djangoの静的ファイルにReactを配置し、連携させる - Qiita. https://qiita.com/shota_mci/items/314c1f25d2c8dc47b4e4.
(2) 静的ファイル (画像、JavaScript、CSS など) を管理する | Django .... https://docs.djangoproject.com/ja//2.2/howto/static-files/.
(3) 静的ファイルのデプロイ | Django ドキュメント | Django. https://bing.com/search?q=Django%e3%81%a7React%e3%82%a2%e3%83%97%e3%83%aa%e3%81%ae%e9%9d%99%e7%9a%84%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e3%82%92%e9%85%8d%e4%bf%a1%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95.
(4) 静的ファイルのデプロイ | Django ドキュメント | Django. https://docs.djangoproject.com/ja//2.2/howto/static-files/deployment/.
(5) Djangoアプリのデプロイ時に静的ファイルを読み込むようにする方法. https://denno-sekai.com/django-collectstatic/.
(6) undefined. http://static.example.com/%29.
(7) undefined. http://media.example.com/%29.