DjangoとReactで作るWebアプリ入門

やっていきますよーーー

本日の作業

必要なもののインストール

python -m pip install Django
sudo apt install -y nodejs npm
sudo npm install n -g
sudo n stable
sudo apt purge -y nodejs npm
exec $SHELL -l
curl https://cli-assets.heroku.com/install.sh | sh

Djangoアプリケーションの作成

django-admin startprojcect backend

cd backend

python mange.py startapp GetLine

python manage.py migrate
python manage.py runserver

http://127.0.0.1:8000をブラウザで開くとアプリケーションが作れていることがわかります。

GetLineアプリケーションの追加

backend / settings.pyにINSTALLED_APPSを追加します。

INSTALLED_APPS = [
    ...
    'GetLine',
]

GetLine / models.pyに追記します。

from django.db import models

# Create your models here.

class GetLine(models.Model):
    line_name = "line_name"
    line_color = "line_color"
    
    def _str_(self):
        return self.line_name

追記したらmakemigrationsしておきます

python manage.py makemigrations GetLine
python manage.py migrate GetLine

Superuserの設定

python manage.py createsuperuser

UsernameとEmailとPasswordを設定します。これで http://127.0.0.1:8000/admin/ から管理者ページヘアクセスすることができるようになります。

Heroku用の設定

ファイルの追加

rootに
Procfile

web: gunicorn backend.wsgi

requirements.txt

dj-database-url==0.5.0
Django==2.2.6
django-heroku==0.3.1
gunicorn==20.1.0
psycopg2==2.8.4
pytz==2019.3
whitenoise==4.1.4

runtime.txt

python-3.10.4

heroku.yml

build:
  docker:
    web: Dockerfile

.ignore

*.log
*.pyc
__pycache__/
db-volumes/
db.sqlite3

composer.json(空)

backendディレクトリ

local_settings.py(追加)

import os
BASE_DIR = os.path.dirname(os.path.dirname(__file__))

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

DEBUG = True

settings.py

import osまとめ〜
〜
DEBUG = False

ALLOWED_HOSTS = ['.herokuapp.com', '127.0.0.1']

MIDDLEWARE = [
        'whitenoise.middleware.WhiteNoiseMiddleware',
]

LANGUAGE_CODE = 'ja'〜
TIME_ZONE = 'Asia/Tokyo'

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = 'static/'

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

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),

STATICFILES_STORAGE = 'whitenoise.storage.ComprまとめessedManifestStaticFilesStorage'

import django_on_heroku
django_on_heroku.settings(locals())
)

Reactアプリの作成

rootに移動してから

npx create-react-app frontend

起動は

cd frontend
npm start

まとめ

1, 2ヶ月前に同じところはやったけど再び開いたら動かなくなっていたのでやり直しです......8時間ぐらいかかりました。つらい。明日は同じDynoの上で起動できるようにします。あと、今日の段階だとherokuでエラーが発生しますがそれはmanage.pyがrootより一段階深いところにあるからっぽいです（階層を移動させたらちゃんと起動した）なので明日の作業が終わればちゃんと動く！はず！

それでは〜〜〜