Django

準備

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

• Djangoをインストール　仮想環境内で行う

% 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アプリの静的ファイルを配信するには、以下の手順を実行します¹²³⁴⁵:

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.