Zenn
📘

Next.js + Typescript + Django + TailwindcssでSNSを作りたい　Part3

2021/12/28に公開
django
Next.js
Python
TypeScript
Tailwind CSS
tech

とゆうことで、Part3です。
前回はある程度のデザインを作成しました。
前回の記事

今回は環境構築をしていきます。
といっても詳しくは解説しません。

環境構築

今回はフロントにNext.js
バックエンドにPythonのwebフレームワークのDjangoを使用していきます。

フロントエンド

バックエンド

  • Python 3.8またはそれ以降
    これはDjangoのバージョンによるみたいなので下記を参考にしてください
    Django FAQ

仮想環境について

Pythonを使用する場合は仮想環境を使用します。
今回はPipenvを使用します。
以下を参考にインストールをお願いします
https://zenn.dev/nekoallergy/articles/py-env-pipenv01

使用エディタについて

vscodeを使用します。

特に指定はないので、普段から使用しているもので大丈夫だと思う。

拡張機能

これらをインストールしておばだいぶ効率よくなると思います

ディレクトリの作成

ディレクトリは独自で大丈夫です。
フロントとバックをそれぞれ分けてもいいし、全体のフォルダを作成してその中にフロントとバックをまとめてもいいです。
保守・管理のことを考えると圧倒的に後者だと思います。
私自身もそうします。
なので任意を場所に今回のプロジェクトフォルダを作成してください。
私の場合はsnsapp-projectとしておきます

mkdir snsapp-projects
cd snsapp-projects

その中にフロントとバックのフォルダを作成します

mkdir front
mkdir back

Git init

gitの初期化を行います

cd snsapp-projects
git init
git checkout -b main

フロントエンドの基礎設定

今回は自分がある程度の基礎を作った上でGithubに上げているものがあるためそちらをクローンしてきます。
https://github.com/RajikuBlanc/next-base.git
最後に.をつけることでfrontフォルダ内にクローンできます

cd front
git clone -b tailwind https://github.com/RajikuBlanc/next-base.git .

クローンすると.gitファイルもクローンされてしまうので削除しておきます

rm -rf .git

諸々インストールします

npm install

開発環境を立ち上げる
ブラウザで画面が見れたらそれでオッケー

npm run dev

クローンしたらこんな画面になる

クローンせずに、一から構築したい場合は以下を参考に行なっていただければと思います。
https://next-myblog.vercel.app/blog/a9tungnoef
Tailwindまではインストールできていないのでドキュメントを参考にインストールしてください
Tailwindcss Next.js

バックエンドの基礎設定

まず、仮想環境に入ります

cd snsapp-projects
cd back
pipenv shell

ターミナルのディレクトリ表示の前側に()付きでフォルダ名が書いてあれば仮想環境に入っています。
バックエンド作業する場合は必ず仮想環境に入っておいてください

パッケージ等のインストール

とりあえず、DjangoとAPIを作成するためのRestFrameworkをインストールしておきます。

pipenv install django djagnorestframework

https://www.django-rest-framework.org/

djangoプロジェクト及びアプリの作成

django-admin startproject config .

全体のプロジェクトフォルダはconfigという名前にして、ルートディレクトリに作成します。
.をつけることでルートに作成できます。

django-admin startapp restapi

アプリ名はなんでもいいです

djagnoの設定及びrestftrameworkの設定は省きます。以下を参考に行なってください
https://qiita.com/ykoji/items/ab8eb64f3903b0d7c1f2
https://qiita.com/honda28/items/a179c26c2cf147a247dd

githubなどでコード管理をする場合は、環境変数を使って隠さなければならないコードやキーがある
.envで管理します
https://uha-blog.com/programming/django-environ/

pipenv install django-environ

touch .env
.env
DJANGOSECRET_KEY=xxxxxxxxxxxxxxxx
DJANGO_DEBUG=xxxx

シークレットキーなどは自分で入れてください

.gitignore

.envと同じ階層に.gitignoreを作成

touch .gitignore
.gitignore
.env
*.log
*.pyc
__pycache__/
db-volumes/
db.sqlite3

https://zenn.dev/wtkn25/articles/django-gitignore

開発サーバーを起動する

python manage.py runserver

やったことある人ならわかるけどロケットが表示されたらオッケーです

settings.pyの参照コード
settings.py
from pathlib import Path
import os
import environ

# Baseディレクトリ
BASE_DIR = Path(__file__).resolve().parent.parent


# 環境変数設定
env = environ.Env()
env.read_env(os.path.join(BASE_DIR,'.env'))

SECRET_KEY = env('DJANGOSECRET_KEY')
DEBUG = env('DJANGO_DEBUG')

ALLOWED_HOSTS = []


# Application definition
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # アプリを追加
    'restapi.apps.RestapiConfig',
    # restframeworkを追加
    'rest_framework',

]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'config.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'config.wsgi.application'


# Database
# https://docs.djangoproject.com/en/4.0/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


# Password validation
# https://docs.djangoproject.com/en/4.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/4.0/topics/i18n/

# 言語・時間設定
LANGUAGE_CODE = 'ja'

TIME_ZONE = 'Asia/Tokyo'

USE_I18N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.0/howto/static-files/

STATIC_URL = 'static/'

# Default primary key field type
# https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

まとめ

とりあえず今のところはこんな感じで良さそうです。
Djangoは設定する項目とかが多くて、テンプレート表示させるまでに時間がかかります。

まだ、models,views,selializers,urlsが残っているので、一つづつやっていこうと思います。
その前に次は認証系を設定してしまいたいと思います。

Discussion