django 設定手順 - KomaKomaBlog

djangoは最初の設定手順が多く覚えられないのでメモ
前回作った仮想通貨のチャートを表示するwebアプリを作る

プロジェクトの作成

django-admin startproject chart_prj

作成したプロジェクトフォルダにtemplatesとstaticという名のフォルダを作成

cd chart_prj
mkdir templates
mkdir static

chart_prjの中のsettings.pyにtemplatesフォルダを紐づける

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],    <--------ここ！
        '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',
            ],
        },
    },
]

そのままsettings.pyの一番下にstaticフォルダを紐づける記述を追加

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

表示するhtmlを作成し、templatesの中へ入れる
index.htmlの中身

<html>
<head>
<title>staticfile test</title>
<style>
p.chart_png img{width: 100%}
</style>
</head>
<body>
    <p class="chart_png">
          {% load static %}
          <img src="{% static "chart.png" %}">
    </p>
</body>
</html>

index.htmlで表示するchart.pngをstaticの中へ入れる

一通りフォルダを作ったりファイルを置いたりが終了

webアプリを作成

python manage.py startapp drawapp

settings.pyのINSTALLED_APPSにアプリを追加

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'drawapp',     <-------ここ！
]

INSTALEED_APPSに何かものを追加したらmigrateする

python manage.py migrate

drawappの中のviews.pyにindex.htmlを呼ぶプログラムを書く

from django.shortcuts import render
 
def index_template(request):
    return render(request, 'index.html')

drawappの中にurls.pyを作り、中身を次のように書く

from django.urls import path
from . import views

urlpatterns = [
    path('templates/', views.index_template, name='index_template'),
]

chart_prjの中にもurls.pyがあるので、上記のurls.pyを参照できるように追加で記述

from django.contrib import admin
from django.urls import path, include     <---------ここ！
 
urlpatterns = [
    path('admin/', admin.site.urls),
    path('drawapp/', include('drawapp.urls')),     <---------ここ！
]

ここまででローカルでのwebアプリ作成が終了
サーバーを立ち上げて確認

python manage.py runserver

http://localhost:8000/drawapp/templates
にアクセスし、正しくchart.pngが表示されることを確認

herokuにデプロイするための準備

Procfileというファイルを作りchart_prjのルートに配置
Procfileの中身

web: gunicorn chart_prj.wsgi --log-file -

runtime.txtを作りchart_prjのルートに配置
runtime.txtの中身

python-3.7.10

chart_prjのルートに仮想環境を設置

python -m venv chart_env

仮想環境をアクティベート

source chart_env/bin/activate

必要なライブラリを仮想環境にインストール

pip install django whitenoise gunicorn

herokuにログインする

heroku login

ブラウザが起動するので、ログインボタンをクリックする

heroku上にwebアプリを格納する場所を作る

heroku create chart-page

作った場所のWeb URLを確認する

heroku apps:info chart-page

settings.pyを編集

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = False       <---------ここ！

ALLOWED_HOSTS = ['chart-page.herokuapp.com', '127.0.0.1']        <-----------ここ！


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'drawapp',
]

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',
    'whitenoise.middleware.WhiteNoiseMiddleware',                <--------------ここ！
]

settings.pyの一番下のSTATICの設定も変更
STATICFILES_DIRSはコメントアウトし、STATIC_ROOTを追加

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

STATIC_URL = '/static/'
"""
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)
"""
STATIC_ROOT = os.path.join(BASE_DIR, 'static')           <------------ここ！

下のコマンドで静的ファイルを一箇所にまとめる

python manage.py collectstatic

staticフォルダにadminフォルダが生成されているのを確認

ブラウザ上のherokuから作成したアプリを開き、settingsをクリック
右下Add BuildpackをクリックしてPythonを選びsave changesをクリック
メニューバーのDeployをクリック

chart_prjのルートにリポジトリを作成し、herokuにセット

git init
heroku git:remote -a chart-page

herokuのリモートリポジトリに、変更点をaddして、commitし、push
git add . の「.」は全てのファイルをまとめて追加という意味

git add .
git commit -am "first commit"
git push heroku master

pushに失敗したら下のコマンドを実行し、再度push

heroku config:set DISABLE_COLLECTSTATIC=1

https://chart-page.herokuapp.com/drawapp/templates/
にアクセスし、chart.pngが表示されることを確認

以上