3,728
回編集
差分
→仮想環境作成 psycopg2インストール Djangoインストール プロジェクト作成 アプリ作成
% python3 -m venv venv
% source ./venv/bin/activate // アクティベート
* psycopg2をインストールpsycopg2をインストール PostgreSQLデータベースとの連携のため
% pip install psycopg2
* DjangoをインストールDjangoをインストール 仮想環境内で行う
% pip install django
* プロジェクトを作成プロジェクトを作成 仮想環境内で行う django-admin startproject <プロジェクト名> プロジェクト名は、URL、サイト名、またはSEOに影響を与えない
% django-admin startproject mysite
* Django REST Frameworkをインストール、設定するFrameworkをインストール、設定する 仮想環境内で行う
pip install djangorestframework
* 開発用サーバーの起動
% python manage.py runserver
* アプリケーションをつくる
=== データベース ===
=== Reactアプリケーションのセットアップ ===
* ReactアプリケーションをプロジェクトにセットアップするDjangoプロジェクトのルートディレクトリではなく、プロジェクトの外部で実行する
npx create-react-app myreactapp
<nowiki>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 └── ...</nowiki> * 依存関係のインストール cd myreactapp npm install npm list npm start == アプリのディレクトリ構成 == <nowiki>myapp/├── 名簿管理アプリ/│ ├── __init__.py│ ├── admin.py│ ├── apps.py│ ├── migrations/│ ├── models.py│ ├── tests.py│ └── views.py│├── カレンダーイベント管理アプリ/
│ ├── __init__.py
│ ├── admin.py
│ ├── tests.py
│ └── views.py
│ ├── __init__.py
│ ├── asgiadmin.py│ ├── settingsapps.py│ ├── urlsmigrations/│ ├── models.py│ ├── tests.py│ └── wsgiviews.py│└── manage.py..
</nowiki>
== 参考 == <nowiki>本番環境でのDjangoとReactのプロジェクトのディレクトリ構造は、開発環境とは異なる場合があります。一般的には、Reactアプリケーションをビルド（`npm installrun 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/.</nowiki> <nowiki>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`から配信するようにします³⁴.