「Django」の版間の差分

2023年10月2日 (月) 11:07時点における版

準備

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

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
     └── ...

• 依存関係のインストール

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.