はじめに
フロントエンドNext.jsとバックエンドDjangoの環境構築のメモです。
環境
- Linux Debian 13 Trixie - Next.js 15.5.4 - Django 5.2.8
バックエンドDjangoの手順
pipxとそれに必要なDebianパッケージをインストールします。
sudo apt install pipx python3-all python-is-python3 pyenv
~/.bashrcにpipxのパス(~/.local/bin/)を追加し、反映させます。
pipx ensurepath source ~/.bashrc
uvをインストールします。
pipx install uv
uvをアップデートします。
pipx upgrade uv
pyenvがインストール先とするディレクトリを、ホームディレクトリ下に変更します。
vi ~/.bashrc
~/.bashrcの内容は以下の通り。
export PYENV_ROOT="$HOME/.pyenv" export PATH="$PYENV_ROOT/bin:$PATH" eval "$(pyenv init --path)" export WORKON_HOME=~/.venvs export PIPENV_VENV_IN_PROJECT=true
反映させます。
source ~/.bashrc
システムのpyenvを使います。
利用可能なPythonのバージョン一覧を表示します。
pyenv install --list
指定したバージョンをホームディレクトリ「/home/hoge/.pyenv」にインストールします。
pyenv install 3.12.9
プロジェクトのディレクトリでのみPython 3.12.9 を有効にします。
cd /home/www/app/backend pyenv local 3.12.9
仮想環境を/home/www/app/backend/.venvに作成します。
cd /home/www/app/backend uv venv -p 3.12.9 backend
仮想環境を有効化します。
cd /home/www/app/backend source .venv/bin/activate
必要なパッケージのインストールします。
uv pip install django uwsgi django-filter dotenv werkzeug uv pip install djangorestframework djangorestframework-simplejwt uv pip install django-cors-headers django-extensions uv pip install google-auth google-auth-oauthlib
インストールしたパッケージを確認します。
uv pip freeze
仮想環境にインストールされているすべてのパッケージを、バージョンを固定してrequirements.txtに出力するコマンドです。
uv pip freeze > requirements.txt
インストールされている全パッケージのアップデート
uv pip freeze | uv pip install --upgrade --requirement /dev/stdin
パッケージを個別アップデートします。
uv pip install --upgrade パッケージ名
Djangoの設定ファイルを作成します。
cd /home/www/app/backend ango-admin startproject conf .
Djangoのアプリケーションを作成します。
cd /home/www/app/backend django-admin startapp myapp
開発サーバを起動します。
django-extensionsをインストールしたのでrunserver_plusを使います。
python manage.py runserver_plus 192.168.1.1:8000
仮想環境を無効化します。
deactivate
フロントエンドNext.jsの手順
Node.jsをインストールします。
curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash - sudo apt-get install -y nodejs
環境変数を反映させます。
source ~/.bashrc
Next.jsをインストールします。
cd /home/www/app
pnpm create next-app@latest frontend --typescript --tailwind --eslint --app
✔ Would you like to use React Compiler? … Yes
✔ Would you like your code inside a `src/` directory? … Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No
ビルドし、必要なパッケージをインストールします。
pnpm approve-builds pnpm add @react-oauth/google axios jwt-decode zustand
開発サーバを起動します。
cd /home/www/app cd rm -fr .next/cache/ pnpm dev
ホスト名やIPアドレスを指定する場合は、
cd /home/www/app cd rm -fr .next/cache/ pnpm next dev -H gamma.nips.ac.jp -p 3000
Comments