「Django」の版間の差分

提供: wikipokpok
移動先: 案内検索
(仮想環境作成 psycopg2インストール Djangoインストール プロジェクト作成 アプリ作成)
(データベース)
44行目: 44行目:
 
     }
 
     }
 
}</nowiki>
 
}</nowiki>
 +
 +
=== Reactアプリケーションのセットアップ ===
 +
* Reactアプリケーションをプロジェクトにセットアップする
 +
npx create-react-app myreactapp
 +
<nowiki>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
 +
</nowiki>
 +
* 依存関係のインストール
 +
cd myreactapp
 +
 +
npm install
 +
 +
npm list
 +
 +
npm start

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

準備

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をインストール
% 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