Django 開発環境と運用環境との同期方法

LINEで送る
Pocket

Django 開発環境と運用環境との同期方法

開発環境は、Windows10、Django2.2、Pycharm、python3.7、PostgreSQLです。

運用環境はAWSのEC2クラウドコンピューティングです。

 

データベースを運用している場合、バックアップ、リストアをが必要になります。
本番運用環境へ移行後も機能追加などで、データベースのフィールド追加、変更、削除は必要になります。

また、検証のために本番運用データを検証用データベースに丸ごとコピーするなどの場合にもバックアップやリストアは必要な作業となります。

常に開発環境と本番運用環境の同期をとることが必要となります。

本記事では、パンク-タイヤというWebサイト構築して本番運用している場合の同期の取り方の一例を示します。

AWSへの変更手順

app_adは、仮のユーザ名です。ご自分のユーザ名に置き換えて下さい。
ip-172-31-99-999は、AWSの仮のipです。ご自分のipに置き換えて下さい。

1) ローカル側の最新版プログラムをGitへアップロードする。
2) ローカル側の最新版プログラムをローカルホルダーにバックアップする。
3) AWS側のデータベース「tire」をバックアップ

以下はflat-tireのAWS環境でのバックアップの例
flatc0131aws.backupは、バックアップ・ファイル名で任意の名前を付与する。

pg_dumpの場所確認

WinSCPのAWS側でのファイル検索で、
ファイルマスク:pg_dump.exe
検索結果:/home/app_ad/venv/bin

[app_ad@ip-172-31-99-999 ~]$ cd ~/venv
[app_ad@ip-172-31-99-999 venv]$ cd bin
[app_ad@ip-172-31-99-999 bin] $ pg_dump -Fc tire -f ~/venv/flat/dbback/flatc0131aws.backup
[app_ad@ip-172-31-99-999 bin]$

$ pg_dump -Fc tire -f ~/venv/flat/dbback/flatc0131aws.backup

オプションの詳細
-F 出力する際の形式を指定します(cがカスタム、tがtar、pがテキスト)
-f 出力するファイルを指定します。 ファイルを基にする出力形式ではこのパラメータは省くことができます。

4) AWS側のプログラムをバックアップ

flat以下のデータをWinSCPでローカル側にコピーして保存。

5) ローカル側で変更したデータベース名を「flat」とする。

ローカル側にて「flat」というデータベースを作成

DjangoのTerminalで新規「flat」データベースを作成
psql –version
psql -U postgres
postgres=# create database flat owner app_ad;

postgres=# \q

変更したデータベースをバックアップして、データベース・ファイル名を「flat20210211c.backup」とする。

ローカル側のflat開発環境でのデータベースバックアップの例

Django「flat」プロジェクトの「dbback」ホルダーにデータベース・ファイル「flat20210211c.backup」を格納する。

Windows Powershellを起動します。

Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.
新しいクロスプラットフォームの PowerShell をお試しください https://aka.ms/pscore6

PS C:\Users\user> psql –version
psql (PostgreSQL) 10.14
PS C:\Users\user> pg_dump -U app_ad -f ” C:\Users\user \PycharmProjects\flat\dbback\flat20210211c.backup” -Fc flat
パスワード:

オプションの詳細
-F 出力する際の形式を指定します(cがカスタム、tがtar、pがテキスト)
-f 出力するファイルを指定します。 ファイルを基にする出力形式ではこのパラメータは省くことができます。

 

6)Djangoの settings.pyで、データベース名を「flat」に変更
Pycharm側の
settings.pyで、データベース名を「flat」に変更するだけで切り替わる。

# データベース設定
DATABASES = {
‘default’: {
‘ENGINE’: ‘django.db.backends.postgresql_psycopg2’,

‘NAME’: ‘flat’,
# ‘USER’: os.environ.get(‘DB_USER’),
‘USER’: ‘app_ad’,  # ユーザ名
# ‘PASSWORD’: os.environ.get(‘DB_PASSWORD’),
‘PASSWORD’: ‘xxxxxxxx’,  # パスワード
‘HOST’: ”,
‘PORT’: ”,
}
}

7) Pycharm側(ローカル)の新規プログラムをWinSCPでAWS側(本番環境)に転送する。

AWSサーバー側の「flat」以下のディレクトリ&ファイルを右クリックで削除。
ローカル側のvenvディレクトリ以外をサーバー側に転送。

8) AWS側に新規に、「flat」というデータベースを作成
「tire」データベースは、変更前のデータベースとして温存しておき、何か支障が生じた場合にこのデータベースに切り替える。
「flat」データベースは変更後のデータベースとする。

$ sudo -u postgres -i psql

postgres=# create database flat owner app_ad;

postgres=# \q

9) ローカル側でリストアしたデータベース・ファイル「flat20210211c.backup」をAWS側の「flat」データベースにリストアする。

以下はflat-tireのAWS環境でのリストアの例

[app_ad@ip-172-31-99-999 ~]$ cd ~/venv
[app_ad@ip-172-31-99-999 venv]$ cd bin
[app_ad@ip-172-31-99-999 bin]$ pg_restore -Fc -c -d flat ~/venv/flat/dbback/flat20210211c.backup
[app_ad@ip-172-31-99-999 bin]$

$ pg_restore -Fc -c -d flat ~/venv/flat/dbback/flat20210211c.backup

オプションの詳細
-F アーカイブの形式を指定します。 pg_restoreは形式を自動認識するので、このオプションは必須ではありません。
(cがカスタム、tがtar、pがテキスト)
-c データベースを再作成前に、テーブルなどのデータベースオブジェクトを削除します
-d リストアするデータベースを指定します

10) nginxの再起動
  $ sudo systemctl restart nginx.service

  $ systemctl status nginx.service

11) Gunicornの再起動
  Python仮想環境に入る
  $ source ~/venv/bin/activate
  (venv) $ cd ~/venv/flat
  (venv) $ pkill gunicorn
  (venv) $ gunicorn –bind 127.0.0.1:8000 config.wsgi -D
  (venv) $ ps ax | grep gunicorn

パンク-タイヤサイトは、こちら

LINEで送る
Pocket

Django-Bootstrap設定&利用法

LINEで送る
Pocket

Django-Bootstrap設定&利用法

  1. Bootstrap

DjangoでWebアプリケーション開発を行う際に、レスポンシブWebデザイン機能を利用するための設定と利用法を記述します。

Bootstrapは、レスポンシブWebデザイン機能を有し、CSS,javascript,font, iconなどを提供するWEBフレームワークです。

BootstrapウェブサイトWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。タイポグラフィフォームボタンナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして用意されている。引用:ウィキペディア

CSS(Cascading Style Sheets)とは、HTML や XML の要素をどのように修飾するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。 引用:ウィキペディア

Bootstrapによって、Webアプリケーション開発者は予め用意されたコードを記載するだけで、見栄えの良いレスポンシブWebサイトを短期間で制作できます。

1つのWEBページ(HTML)で、PC、スマートフォン、タブレットなどに対応することをレスポンシブといいます。

またレスポンシブで、かつ端末ごとに使いやすい適切なデザインがされていることをレスポンシブWEBデザインと呼んでいます。

レスポンシブWEBデザインはブラウザの大きさに合わせて自動的に表示幅や配置などを調整してくれるデザインのことで、PC,スマートフォン,タブレットで同じhtmlを使い回すことができます。

レスポンシブWEBデザインは、WEBページを閲覧するユーザーの端末に応じて自動で表示が最適化されるように、jQuery(JavaScript)で制御されています。

WEBページでよく使われるフォーム、ボタン、メニューなどのコンポーネント(部品)がテンプレートとして用意されています。

Webアプリケーション開発者はこれらのコンポーネント(部品)を自作する必要はなく、HTMLタグにクラスを追加するだけで、体裁の整ったコンポーネントをすぐに利用できます。

また、デザイン性も確保されているため、WEBページのスタイルも最低限の調整で済んでしまいます。

 

  1. Bootstrapの特徴

  • レスポンシブWEBデザイン
  • 知識がなくても使える
  • デザイン性の確保

という特徴があります。

Bootstrapは、小~大規模のWEBサイトやWEBアプリでも使うことができます。

WEBサイトやWEBアプリでは、「デザイン性」や「操作性」はとても重要な要素です。

Bootstrapでは、あらかじめ用意されているCSSを適用することで、デザインが全くわからない人でも、ある程度の見栄えを確保することが可能です。

さらに端末に合わせて操作しやすいようにデザインも工夫されているため、ユーザーにとって使いやすいサイトを簡単につくることができます。

 

  1. Bootstrapのグリッドシステム

レスポンシブWebデザインは、グリッドシステムによって支えられています。

図3-1

グリッドシステムは、3つのCSSクラスで構成されます。

.container(コンテナ)
.row(ロー)
.col-(カラム)

この3つのCSSクラスでレイアウトを設計します。

コンテナは一番外枠のエリアで、この中にロー(行)があり、行の中にカラム(列)があります。

Bootstrapのグリッドシステムは、あらかじめ1行(rowの範囲)が12列に分割されています。

カラム(列)の幅は、最小値は1グリッド幅で、最大値は12グリッド幅になります。

図3-1は、2行あり、上の行は、行内に3カラムあり、各カラムは4グリッド保有しています。

下の行は、行内に2カラムあり、各カラムは6グリッド保有しています。

このように、グリッドを合体させて、カラムとして分割するのが、Bootstrapのグリッドシステムの使い方です。

 

カラムの書式は、「.col-XX-数字」となります。

数字は、カラムのグリッド数を表して、1~12の数字が入ります。

カラム割には「row」と「.col- XX -数字」をセットで使います。

rowは、12分割されており、好きな数だけ列をまとめて1カラムとできます。

まとめる列数は「.col- XX -数字」の数字部分で指定します。

XXにはBootstrapであらかじめ定義してある、「xl、lg、md、sm、xs」のどれかを指定しなくてはなりません。

この「xl、lg、md、sm、xs」には、画面の幅がそれぞれ指定してあります。

普通のPC画面では、「md」となります。このPC画面で図3-1のようなレイアウトになるようにするには、図3-1の上の行内の各カラムは、「.col-md-4」となります。下の行内のカラムは、「.col-md-6」となります。

 

 
 
 
 

 

<div>は、単体では特に意味を持たないタグですが、<div>で囲った部分をブロックレベル要素としてグループ化することができるタグです。

グループ化することで、align属性により水平方向の位置をまとめて指定したり、指定した範囲にスタイルシートを適用したりすることができます。

XXで指定した画面サイズまでカラムは横並びにするけど、それより小サイズになったら横並びやめて縦積みになります。

図3-1の例では、表3-1からみるとタブレットの画面幅(768px =< 画面幅 < 940px)になると、横並びしていた3つのカラムは、縦積みのレイアウトになります。

グリッドシステム

 

レイアウトの切り替えサイズ(ブレイクポイント)が設定されています。

 

コンテナの幅は、各クラスごとに以下の表のように定められています。

「.col-xs-」の場合は、「auto」となりスマホの画面幅いっぱいにレイアウトされます。

表3-1

「Visual Bootstrap 3 Grid Builder」というジェネレータを使用すると、複雑なカラムの雛形を即座に作成することができます。

http://shoelace.io/

Visual Bootstrap 3 Grid Builder

 

ブラウザで、ビジュアルイメージでカラムのレイアウトを作成するとコードが自動作成されます。

生成カラム構成

 

  1. Bootstrapの導入

Bootstrapは現在も開発が進められており、最新バージョンは「Bootstrap4」です。

WebデザインをサポートしてくれるBootStrapライブラリの導入には、以下の3通りの方法があります。

(1)公式からダウンロードしたスタイルシートを指定する方法
(2)公式サイトのBootstrapCDNを利用する方法
(3)Djangoのデザインを取入れた「django-bootstrap4」を利用する方法

(1)と(2)は、二者択一で利用します。

(3)は、(1)か(2)と併用して利用することができます。

(1)は、CSSの「Bootstrap」をダウンロードしてサーバーにアップしてから利用するスタイルです。

(2)は、ダウンロードせずにインターネット経由で直接利用するタイプです。

CDN (コンテンツデリバリネットワーク: content delivery network)とは、ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。コンテンツ配信網とも。出典:コンテンツデリバリネットワーク – Wikipedia

「django-bootstrap4」は、DjangoとBootstrapとの連携用のライブラリです。

 

最初に、公式からダウンロードしたスタイルシートを指定する方法について記述します。

 

  1. Bootstrapのダウンロードと設定

以下のURLから一式をダウンロードできます。

https://getbootstrap.com/

 

以下のCompiled CSS and JSをダウンロードします。

 

 

ダウンロードファイルを解凍すると、cssとjsホルダー内に以下のファイルが格納されています。

bootstrap-css

 

bootstrap-js

 

ダウンロードしたファイルを、mysite/static/ というディレクトリを作って、以下のように配置します。

「mysite」は、Djangoのベースディレクトリであり、「プロジェクト名」でもあります。

 

  1. Djangoプロジェクト構成

Djangoでプロジェクトを作成する際に、プロジェクト名を「mysite」として、

$ django-admin startproject mysite

を実行すると、現ディレクトリ直下にプロジェクト名と同じ「mysite」というディレクトリが作成されます。

このディレクトリは、起点となるディレクトリで、「ベースディレクトリ」と呼ばれるます。

ベースディレクトリ以下のファイル構成は、以下のようになります。

 

ベースディレクトリの下にプロジェクト名と同じ同名のディレクトリが作られその中に「–init–.py」、「setting.py」などの設定ファイルが自動作成されます。

このディレクトリを「設定ディレクトリ」と呼びます。

 

次に、「hello」というアプリケーションを作成します。

$ cd mysite/

$ python3 manage.py startapp hello

このDjangoコマンドを実行すると「hello」というアプリケーション用のディレクトリが作成され、その直下にいくつかのファイルが自動生成されます。

 

一般に、アプリケーションディレクトリごとに、以下のようなテンプレートファイルや静的ファイルを配置するためのディレクトリを追加します。

 

アプリケーションが追加されるごとに、アプリケーションディレクトリの下にテンプレートファイルや静的ファイルが配置されることになります。Djangoの設計思想として、このような構成になっています。

しかしながら、テンプレートファイルや静的ファイルがアプリケーションごとにバラバラになってしまうのは分かりづらいという問題も生じます。

このような問題を解決するために、以下のようなプロジェクト構成にします。

 

  • ベースディレクトリ名と設定ディレクトリ名が同じになりややこしいため、それぞれ別のディレクトリ名にします。
  • テンプレートファイルと静的ファイルがアプリケーションごとにバラバラに配置されてしまうので、ベースディレクトリ直下にまとめて以下のような配置構成にします。

 

このようなプロジェクト構成にするために、

ベースディレクトリを任意の名前で作成した後に、

ベースディレクトリの下に移動し、第一引数に任意の設定ディレクトリ名、第二引数に、「.」を指定して「startproject」を実行する。

設定ディレクトリを「config」とした場合、

 

$ mkdir mysite

$ cd mysite/

$ django-admin startproject config .

 

これでベースディレクトリと設定ディレクトリの名前を変えることができます。

 

次に、テンプレートファイルと静的ファイルをベースディレクトリ直下にまとめて配置します。

 

上記のようなプロジェクト構成にしたら、テンプレートファイルと静的ファイル関連の設定を「settings.py」に行います。

 

  1. 「TEMPLATES」に関する設定

「DIRS」には、ビューから指定されるテンプレート名に対してどのディレクトリを優先してテンプレートを探しに行くかという順番をリスト形式で指定します。

この例では、ベースディレクトリ直下の「templates」を最初の検索候補として指定しています。

また、「APP_DIRS」にはテンプレートを探す際に各アプリケーションディレクトリ直下の「templates」ディレクトリを優先するかどうかを指定します。

この例では「APP_DIRS」が「True」になっているのでこちらが優先されます。

BASE_DIRは、「__file__」は実行しているファイル名、settings.pyとなります。

BASE_DIRは、

「C:\Users\user\PycharmProjects\mysite」となります。

PROJECT_NAMEは、

「mysite」となります。

 

  1. 「静的ファイル」に関する設定

Djangoで静的ファイルを配信するためには、次の表に示した3つの設定をしておく必要があります。

静的ファイル

 

アプリケーションに紐付いた静的ファイルの置き場所の例:

これは、Djangoが指定するデフォルトの置き場所です。

 

なぜ mysite/hello/static/hello/ なのかというと、

Django は static ディレクトリを、プロジェクト(mysite)配下の各アプリケーション(hello)の static ディレクトリを探します(mysite/hello/static)

各アプリケーションの static ディレクトリは1つにまとめられて解釈されるため、識別のため自分のアプリケーション名(hello)を更に追加しておきます。(mysite/hello/static/hello)

一般にホームページの内容は、データベースの内容によって表示される内容が変わります。

このようなページ(URL)は動的コンテンツなどと呼ばれます。

それに対し,今回ダウンロードしたbootstrap.cssのようなcssやjsファイルは同じURLにアクセスすると常に同じ内容が返って来ます。

このようなページは、静的コンテンツなどと呼ばれます。

動的コンテンツはアクセス毎に内容が変化するため,プログラムを実行し,ページ内容を変更します。

これに対して静的コンテンツは内容がかわらないため,アクセス毎に問い合わせをする必要がなく,ブラウザなどに内容がキャッシュされます。

キャッシュすることにより,読み込みが高速化され,サーバの負荷が軽減されます。

djangoでは画像ファイル,cssファイル,javascriptファイルなどの静的ファイルはstatic filesとして管理し,運用時に一箇所にまとめることで管理しやすくしています。

一箇所にまとめる方法は $ ./manage.py collectstatic ですが,runserver で実行している間はこのコマンドを使う必要はありません。

staticファイルは各アプリの下にあるstaticディレクトリの中がかき集められ,urls.pyにURLを追加することなく,http://localhost:8000/static/ でアクセスすることができます。

アプリケーション(hello)独自のcssが必要な場合は、hello/static/hello/css/style.css のように設置し,http://localhost:8000/static/hello/css/style.css のようにアクセスします。

ただし,デフォルトで探索されるstaticディレクトリはアプリ(settings.pyの中のINSTALLED_APPS)の下にあるアプリケーションに紐付いたstaticファイルのみです。

manage.pyと同じ階層にstaticディレクトリを作成した場合は,このディレクトリも読み込ませるように設定を追加します。

静的ファイルが置かれているディレクトリを追加するには,STATICFILES_DIRSに追加したいディレクトリをリストで指定します。

 

「STATIC_ROOT」は、「DEBUG」がFalseの場合に必要となる設定で、本番環境での設定です。

cssはhtmlのタグにclassを指定することで真価を発揮します。

  1. bootstrapの「starter-template」

は、以下の通りです。

https://getbootstrap.com/

Starter template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

starter-template

That’s all you need for overall page requirements. Visit the Layout docs or our official examples to start laying out your site’s content and components.

WebデザインをサポートしてくれるBootStrapライブラリの導入には、以下の3通りの方法があります。

(1)公式からダウンロードしたスタイルシートを指定する方法
(2)公式サイトのBootstrapCDNを利用する方法
(3)Djangoのデザインを取入れた「django-bootstrap4」を利用する方法

(1)と(2)は、二者択一で利用します。

(3)は、(1)か(2)と併用して利用することができます。

(1)は、CSSの「Bootstrap」をダウンロードしてサーバーにアップしてから利用するスタイルです。

(2)は、ダウンロードせずにインターネット経由で直接利用するタイプです。

 

CDN (コンテンツデリバリネットワーク: content delivery network)とは、ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。コンテンツ配信網とも。出典:コンテンツデリバリネットワーク – Wikipedia

「django-bootstrap4」は、DjangoとBootstrapとの連携用のライブラリです。

Welcome to django-bootstrap4’s documentation!

https://django-bootstrap4.readthedocs.io/en/latest/

 

  1. 「django-bootstrap4」を利用する方法

を以下に記述します。

一覧系HTMLは、Bootstrapで必要なclassを手書きして、登録/修正のフォーム系HTMLは django-bootstrap4 という Python モジュールを使います。

 

インストールは、pip コマンドで行います。

python manage.py runserver で動いている時は、Ctrl + c で停止してから実行します。

仮想環境にいることを前提にしています。

BootstrapのDjangoパッケージのインストール

以下のコマンドでdjango-bootstrap4をプロジェクトにインストールします。

 

次にsettings.pyでインストールライブラリの設定を行います。

 

 

 

  1. base.htmlの作成

templates内にbase.htmlを作成します。

base.htmlの存在理由は共通設定を繰り返し利用と修正をしやすくするためです。

 

 

「mysite」で使用しているbase.htmlです。

 

 

  1. django-bootstrap4の例

 

 

  1. cssについて

bootstrap.css は、全てのCSSが入った基本の全部入りのスタイルシートです。

bootstrap-reboot.css と bootstrap-grid.css は、それぞれ リセット、グリッドレイアウトに必要な部分のみ切り出したバージョンです。

Bootstrap4のすべての機能を必要としない場合に利用します。

*.min.css は、圧縮版になります。

以下の通り、bootstrap.css には全部含まれています。

bootstrap-css

 

bootstrap.css

 

  1. レスポンシブWebデザインの検証

デスクトップ版Google Chrome(以下、Chromeと略)の「デベロッパーツール(開発者ツール)」を利用すると、PCでレスポンシブWebデザインの確認ができます。

デベロッパーツールでスマートフォンのWebブラウザをエミュレートするには、最初に対象のWebページを表示してから、右上のメニューボタンをクリックして[その他のツール]-[デベロッパー ツール]をクリックします。

レスポンシブWebデザインの確認
LINEで送る
Pocket