Djangoプロジェクトの初期設定についてのマイルール覚書。

2020年6月28日 10:51

そろそろ、Djangoプロジェクトを作るのにも慣れてきたので、フォルダ構成や立ち上げ時にやることをまとめていく。適宜追加、修正

どこに何を入れておくかなどもまとめる。

Djangoプロジェクトの立ち上げ

フォルダ作成。そこに仮想環境を立ち上げる。仮想環境にDjangoをインストールする。venvフォルダはmyvenvとする。

mkdir xxx
cd xxx
python -m venv myvenv
myvenv\Scripts\activate

pip install django

プロジェクトは.を付けてそのディレクトリに入れる。プロジェクト名はprojectにする。

django-admin startproject project .

Settings.pyの設定

local_settings.pyを作成。個人用の設定はすべてこちら側に書く。

from .settings import *

DEBUG = True

ALLOWED_HOSTS = ['*']

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

ひとまずはこれだけ。

Settings.pyの方を本番用の環境に合わせて書き直す。

DEBUG = False

ALLOWED_HOSTS = ['domein.com'] #本番のドメイン

TEMPLATES = [
#TopのTemplatesフォルダを有効化
'DIRS': [os.path.join(BASE_DIR, "templates")],

LANGUAGE_CODE = 'ja'

TIME_ZONE = 'Asia/Tokyo'

STATIC_URL = '/static/'
STATICFILES_DIRS = (
   os.path.join(BASE_DIR, 'static'),
)
STATIC_ROOT = '/usr/share/nginx/html/static' #honban

MEDIA_URL = '/media/'
MEDIA_ROOT = '/usr/share/nginx/html/media' #honban

大体こんなところかな。静的ファイルはnginxのパスにしておく。

django-environの導入。環境変数として読み込ませるため。

python -m pip install --upgrade pip

.envファイルをmanage.pyと同じ階層に保存。なおバージョン管理外にしておく。Setting.pyでimport

import environ

env = environ.Env()
env.read_env(os.path.join(BASE_DIR, '.env'))

SECRET_KEY = env('SECRET_KEY')

envには元のセキュリティキーを用意しておく。

SECRET_KEY=ｘｘｘｘｘｘｘ

フォルダの作成

media
static

static/common/ #共通のヘッダ画像とか。

templates

templates/common/

それぞれ作っておく。

起動

python manage.py runserver --settings project.local_settings

ユーザー関係アプリ

python manage.py startapp accounts

accountsという名前で作成。

カスタムユーザーモデルを採用する。AbstractUserかAbstractBaseUserかはまだいまいち使い勝手が分かってないのでしばらく様子見。

使用するユーザーモデルをsettings.pyに追加。

AUTH_USER_MODEL = 'accounts.CustomUser'

なお、マイグレーションするまでにカスタムユーザーを作っておくこと。

スーパーユーザーの作成

python manage.py createsuperuser

運営用アプリ

python manage.py startapp information

informationという名前で作成。

お知らせ、Topページ、Help、企画などをここに突っ込む。

共通テンプレート

base.htmlという名前で作成

{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>{% block title %}{% endblock %}</title>
  <meta content="" name="description">
  <meta name="viewport" content="width=device-width,initial-scale=1">
<!-- OGP settings -->
   <meta property="og:title" content="" />
   <meta property="og:type" content="website" />
   <meta property="og:description" content="" />
<!--    <meta property="og:image" content="https://{{ request.get_host }}{% static 'ogp.png' %}"/>-->
   <meta property="og:url" content="{{ request.build_absolute_uri }}" />
   <meta property="og:site_name" content="" />
<!--    <meta name="twitter:card" content="summary_large_image" /> -->
   <meta name="twitter:site" content="" />
  <!--<link rel="stylesheet" href="{% static 'common/base.css' %}">-->
  <link rel="icon" type="image/png" href="{% static 'common/favicon.png' %}">
  {% block header %}{% endblock %}
</head>
<body class="base-body">
<header class="base-header"></header>
<main class="base-content">{% block content %}{% endblock %}</main>
<nav class="base-nav"></nav>
<footer class="base-footer">©</footer>
{% block script %}{% endblock %}
</body>
</html>

URL取得

テンプレート上でURLを取得したいとき

{{ request.get_host }} ドメイン
{{ request.path }} パラメータなしパス
{{ request.get_full_path }} パラメータありパス
{{ request.build_absolute_uri }} パラメータありURL

PWA化

path('sw.js', (TemplateView.as_view(template_name="sw.js",content_type='application/javascript', )), name='sw.js'),

sw.jsを上位ディレクトリにするためにurls.pyにテンプレートから取得するようにする。

template/sw.jsを作成。

// Cache name
const CACHE_NAME = 'pwa-caches-v1';
// Cache targets
const urlsToCache = [
   'static/common/favicon.png',
];
self.addEventListener('install', (event) => {
 event.waitUntil(
   caches
     .open(CACHE_NAME)
     .then((cache) => {
       return cache.addAll(urlsToCache);
     })
 );
});
self.addEventListener('fetch', (event) => {
 event.respondWith(
   caches
     .match(event.request)
     .then((response) => {
       return response ? response : fetch(event.request);
     })
 );
});

Cache targetsにキャッシュさせたいファイルを作成しておく。

common/manifest.jsonを作成

{
 "name": "",
 "short_name": "",
 "start_url": "../../",
 "display": "minimal-ui",
 "background_color": "#fff",
 "theme_color": "#fff",
  "Scope": "../../",
 "description": "",
 "icons": [
   {
     "src": "icon192.png",
     "sizes": "192x192",
     "type": "image/png"
   },
   {
     "src": "icon512.png",
     "sizes": "512x512",
     "type": "image/png"
   }
 ]
}

名前など入力する。

base.htmlにマニュフェストファイルを読み込ませる。

<link rel="manifest" href="{% static 'common/manifest.json' %}">

ページネーション

common/page_nation.htmlで作成.

403, 404, 405, 500

templates/に403.html,404.html, 405.html, 500.htmlを作成する。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>404</title>
   <meta name="robots" content="noindex">
   <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
   <h1>このページはありません！</h1>
   <p>アクセスできないURLか、ページが削除されています。</p>
   <p>もしくは、URLの打ち間違い、リンクミスの可能性があります。確認してみてください。</p>
   <p><a href="/">トップページに戻る</a></p>
</body>
</html>

noteの404美術館みたいな感じもいいと思う。余裕があれば考えたい。

良ければサポートお願いします。サポート費用はサーバー維持などの開発費に使わせていただきます。