この記事では、Djangoウェブフレームワークを使ってクラウドからアプリケーションを構築する方法を紹介し、ウェブ開発者が今日直面している課題を対処するのに役立ちます。

本ブログは英語版からの翻訳です。オリジナルはこちらからご確認いただけます。一部機械翻訳を使用しております。翻訳の間違いがありましたら、ご指摘いただけると幸いです。

#なぜ Django なのか？
Django について説明する前に、ウェブアプリケーションとは何かをお伝えします。ウェブアプリケーションとは、ブラウザ上でレンダリングされるプログラミング言語で書かれたコードの集合であり、通常、明確に定義された問題に対処します。例えば、ブログの記事（この記事のようなものです！）、eコマースのウェブサイト、あるいはソーシャルネットワークなどです。

さて、これはとても簡単なことですが、ウェブフレームワークとは何でしょうか？ウェブフレームワークは、ウェブアプリケーション開発の一般的で反復的なタスクの多くを統合された方法で処理する、再利用可能なコンポーネントの集合体です。異なるコードのライブラリを入手して、それらを一緒に動作させる方法を見つける必要がある代わりに、ウェブフレームワークは必要なすべてのコンポーネントを単一のパッケージで提供し、統合作業を代行してくれます。

さて、ウェブアプリとフレームワークの概念がわかったところで、Djangoの話をしてみましょう。Djangoは、ウェブアプリの作成を簡素化することを目的とした、最新のウェブフレームワークの一つです。Djangoは、再利用可能でスケーラブルでクリーンで、非常にダイナミックなWebアプリケーションを素早く開発するのに役立つ一連のツールを提供してくれます。

Django は DRY (Don't Repeat Yourself) パラダイムに基づいて構築されており、開発プロセスのすべてのステップにおいて、他のフレームワークを使って必要とされる平均的なコードよりも少ないコードを書かなければならないことを意味しています。

この一連のチュートリアルでは、いくつかのアプリケーションの開発を案内し、Django にバンドルされている様々なコンポーネントやアプリケーションが、開発プロセスの各段階でより少ないコードを書くのにどのように役立つのか、また、これらのことをすべてクラウドで行う方法を紹介します。今回は Alibaba Cloud Elastic Compute Service (ECS) インスタンス上で Web アプリケーションを実行します。ECS上でDjangoを設定する手順は説明しません。代わりに、以下の2つのチュートリアルを参考にしてください。

1、https://www.alibabacloud.com/getting-started/projects/how-to-deploy-django-application-on-alibaba-cloud
2、http://www.alibabacloud.com/blog/how-to-deploy-a-django-application-with-docker_581157

#プロジェクトの定義
私たちが構築しようとしているプロジェクトは、人々が商品を購入したり販売したりすることができる電子商取引のウェブアプリケーションです。柔軟性と保守性の理由から、プロジェクトはコアアプリ、カートアプリ、決済アプリの3つの独立したアプリに分割されます。

#各アプリケーションのプレゼンテーション
###コアアプリケーション
前述したように、コアアプリは販売したい商品に関連するすべてのこと（追加、変更、削除）を管理します。コアアプリは、購入プロセスを全て管理することを目的としています。

1、ユーザー（購入者/販売者と管理者)
2、製品情報
3、製品カテゴリー

###カートアプリケーション
カートアプリケーションは、売買プロセスを管理するために使用されます。ここで管理される具体的な要素は以下の通りです。

1、購入と販売のオプション
2、クライアントのカートとカートアイテム
3、カートへの商品の追加と削除

###決済アプリケーション
決済アプリでは、決済ゲートウェイへのアクセス権が与えられ、クライアントから渡されたお金を受け取ることができます。
内容はこちら：

1、支払いゲートウェイ
2、お支払い方法
3、決済APIの統合

#開発環境の設定
python 3 とpipをインストール

$ python --version
# sudo apt-get install python3
# sudo apt-get install python-pip

PostgreSQLデータベースのインストール

# sudo apt-get update
# sudo apt-get install python-dev libpq-dev postgresql postgresql-contrib

virtualenv のインストール

# sudo pip install virtualenv

Pillowのインストール
このライブラリを利用することで、プロフィールや商品画像をテンプレートに印刷することができるようになります。

(venv)$ pip install pillow

#プロジェクトの起動と設定
###仮想環境を作成してアクティベートする
このコマンドは、python3 をデフォルトの python インタプリタとする venv フォルダ内に仮想環境を作成します。

$ virtualenv venv --python=python3               
$ cd venv

このコマンドは、この仮想環境をアクティブにします。

$ source bin/activate

###仮想環境にDjangoをインストール

(venv)$ cd venv
(venv)$ pip install django==2.1

###Djangoプロジェクトの作成

(venv)$ django-admin startproject buyandsell

上記の各ステップが正常に完了した後、結果として得られるプロジェクトフォルダは以下のようになります。

buyandsell/
    buyandsell/
        __init__.py
        settings.py
        urls.py
        wsgi.py
    db.sqlite3
    manage.py

ここでは、そのフォルダに表示されているファイルをいくつか説明します。

1、settings.py: このファイルは、データベースアクセスパラメータ、静的ファイルサービスの定義など、アプリのコア構成を設定するために使用されます。
2、urls.py: このファイルは、アプリケーションが保存しているコンテンツを提供する URL ルートを作成するために使用されます。
3、wsgi.py: このファイルは、デプロイメント設定でウェブサーバーが使用するデフォルトの設定を定義します。
4、manage.py: Django プロジェクトとそのアプリケーションを管理するためのメインスクリプトです (データベースの移行、テストの実行、開発サーバーの実行)。
5、db.sqlite3: これは Django であらかじめ設定されているデフォルトのデータベースです。開発のためだけに使用しますが、デプロイの際には、Django アプリケーションと組み合わせて使用される PostgreSQL データベースに変更します。
6、admin.py: 管理者インターフェースアプリケーションの生成に使用します。
7、tests.py: アプリをテストする際に実行するテストを定義します。
8、app.py: このファイルには、アプリのデフォルト設定が含まれています。

###初期移行を実行してデータベースを初期化
プロジェクトを作成した後、Djangoのデフォルトの動作を提供するために、User、Sessionなどの基本的なテーブルを作成しなければなりません。

(venv)$ cd buyandsell
(venv)$ python manage.py migrate

###スーパーユーザーの作成
Django スーパーユーザーは Linux のルートユーザーに相当し、このユーザは Django データベースに保存されているデータのすべての権利を持ちます。このユーザーは管理者インターフェースへのすべてのアクセス権を持っています。

(venv)$ cd buyandsell
(venv)$ python manage.py createsuperuser admin

注：大文字と小文字に数字と特殊文字を混ぜた8文字のパスワードを入力してください。

###アプリケーションが正しく動作しているかどうかをテスト
'buyandsell'ルートフォルダ内のコマンドを発行することによって動作していることをテストすることができます。

(venv)$ python manage.py runserver SERVER_IP:SERVER_PORT

SERVER_IP は仮想マシンインスタンスのパブリック IP アドレス、SERVER_PORT はサーバーに設定された外部ポートです。

#コアアプリケーションの開発
このチュートリアルで開発するすべてのアプリケーションは、以下のプロセスに従います。

1、models.pyファイル内でデータベースモデルを定義します。
2、views.pyファイル内でリクエストを処理するビューを定義し、最終的なユーザーが閲覧するためのファイルをレンダリングするために使用されるテンプレートHTMLファイルを作成します。
3、urls.pyファイルを使って、ユーザーがアプリケーションをナビゲートするためのルートを定義します。
4、admin.pyファイルを使用して、アプリケーション管理者がデータベースに保存されているエンティティを楽に管理するのに役立つ管理者インターフェースの設定を定義します。
5、その後、テンプレートをカスタマイズして、より可愛く見えるようにします。

###コアアプリの初期化

(venv)$ cd buyandsell
(venv)$ django-admin startapp core

コアアプリを初期化した後、プロジェクトフォルダには以下の構造の新しいフォルダがあるはずです。

core/
        __init__.py
        admin.py
        apps.py
        migrations/
            __init__.py
        models.py
        tests.py
        views.py

###コアアプリをbuyandsellプロジェクトにリンクする
Django がコアアプリを buyandsell プロジェクトの一部として考慮できるようにするためには、settings.py ファイルに以下の設定を追加する必要があります。

….
INSTALLED_APPS = [
   'core',
    …
]
….

###データモデル
上記の通り、このアプリでは以下の機種を扱います。

1、ユーザープロファイル
2、製品
3、製品カテゴリ
そして、対応するソースコードがこちら。

from django.db import models
from django.urls import reverse
from django.contrib.auth.models import User
from django.conf import settings
from datetime import datetime

class UserProfile(models.Model):
user = models.OneToOneField(User, on_delete=models.CASCADE)
photo = models.ImageField(upload_to='profile_images', blank=True)
phone = models.CharField(max_length=20)

def __str__(self):
return self.user + "profile"

def get_absolute_url(self):
return reverse("profile_detail", kwargs={"pk": self.pk})

class Product(models.Model):
""" This the default Product class """
name = models.CharField(max_length=50)
description = models.TextField(max_length=100)
photo = models.ImageField(upload_to='product_images', blank=True)
price_ht = models.FloatField()
category = models.ForeignKey("core.Category", on_delete=models.CASCADE)
created_at = models.DateTimeField(default=datetime.now)
created_by = models.ForeignKey(User, on_delete=models.CASCADE)
TVA_AMOUNT = 19.25

def price_ttc(self):
return self.price_ht + self.TVA_AMOUNT

def __str__(self):
return self.name        

def get_absolute_url(self):
return reverse("product_detail", kwargs={"pk": self.pk})

class Category(models.Model):
name = models.CharField(max_length=50)
description = models.TextField(max_length=100)
photo = models.ImageField(upload_to='category_images', blank=True)

def __str__(self):
return self.name

def get_absolute_url(self):
return reverse("category_detail", kwargs={"pk": self.pk})

モデルを定義した後、以下のコマンドを使用して、これらの構造体をデータベースに保存する必要があります。

(venv)$ python manage.py makemigrations
(venv)$ python manage.py migrate

###ビューとテンプレートファイル
エンドユーザーがブラウザからアプリケーションにアクセスできるようにするために、ビューとテンプレートファイルを定義する必要があります。

モデルの作成、更新、削除、一覧、詳細を管理するためのビューとテンプレートファイルを作成します。

views.pyファイルの内容を以下に示します。

from django.shortcuts import render
from django.views.generic import DetailView, ListView, CreateView, UpdateView, DeleteView

from .models import Product, Category, UserProfile

# Product views
class ProductDetailView(DetailView):
model = Product
template_name = "core/product_detail.html"

class ProductListView(ListView):
model = Product
template_name = "core/product_list.html"

class ProductCreateView(CreateView):
model = Product
template_name = "core/product_create.html"

def form_valid(self, form):
form.instance.created_by = self.request.user
return super().form_valid(form)

class ProductUpdateView(UpdateView):
model = Product
template_name = "core/product_update.html"

class ProductDeleteView(DeleteView):
model = Product
template_name = "core/product_delete.html"

ここでは、商品の作成フォームを表示するために使用するHtmlテンプレートをご紹介します。

{% extends 'base.html' %}

{% block title %} Creation of a product {% endblock %}

{% block menu_bar %}
{{ block.super }}
<li class="active" ><a href="{% url 'product-list' %}">products</a></li>
{% endblock menu_bar %}

{% block content %}
<h3>Creation of a product</h3>
<form action="" method="post" enctype="multipart/form-data" >
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Create">
<button class="button"><a href="{% url 'product-list' %}">Cancel</a></button>
</form>
{% endblock %}

Html テンプレートファイルは、コアアプリケーションのルートフォルダ内の templates/core ディレクトリ内に置かれます。

Django テンプレートファイルの使用方法の詳細については、以下を参照してください: django-website/templates

###URLConfによるルーティング
UrlConfは、アプリケーション上でどのようにナビゲーションが行われるかを定義する構造体です。ファイル views.py で設定されています。

以下はそのファイルの内容です。

# Product Urls
urlpatterns = [
path('products/', views.ProductListView.as_view(), name='product-list'),
path('product/<int:pk>/', views.ProductDetailView.as_view(), name='product-detail'),
path('product/create/', views.ProductCreateView.as_view(), name='product-create'),
path('product/<int:pk>/update/', views.ProductUpdateView.as_view(), name='product-update'),
path('product/<int:pk>/delete/', views.ProductDeleteView.as_view(), name='product-delete'),
]

ここまでに定義されたルートは、ビューセクションで定義されたテンプレートファイルにアクセスするためのエントリーポイントとして機能します。このファイルは、URLパスとそのURLに関連付けられたビューの間のバインディングを作成します。

###管理者インターフェース
一般的に、クライアントのビジネス上のニーズを解決するためにウェブアプリケーションを構築する場合、データベースに保存されているデータやアクセス権、権限、ロールを管理する管理者アプリケーションも構築することになります。このような作業はデフォルトで既に行われているため、Django はウェブ開発者の生活をシンプルにしてくれます。

管理者インターフェースを設定するためには、admin.py を修正し、モデルを使用するように設定しなければなりません。

設定はこのようにして行われます。

1、admin.pyファイルの中にadminアプリケーションに追加したいモデルをインポートします。

from core.models import Product

2、自分のモデルを管理するModelAdminクラスを作成します。

class ProductAdmin(admin.ModelAdmin):
pass

3、以下の2つのメソッドのいずれかを使用して、adminインターフェースのModelAdminクラスを登録します：
admin.site の register メソッドを使用

admin.site.register(Product, ProductAdmin)

または、class ProductAdminにアノテーションを付けます。

@admin.register(Product)
class ProductAdmin(admin.ModelAdmin):
pass

すべてのモデルに対してこれらのステップを繰り返した後、admin.pyファイルの次のコードを使用します。

from django.contrib import admin
from core.models import Product, Category, UserProfile

@admin.register(Product)
class ProductAdmin(admin.ModelAdmin):
pass

@admin.register(Category)
class CategoryAdmin(admin.ModelAdmin):
pass

@admin.register(UserProfile)
class UserProfileAdmin(admin.ModelAdmin):
pass

これが完了したら、以下のアドレスでブラウザを開いて管理画面を見ることができます。

127.0.0.1:8000/admin/

このチュートリアルで作成したスーパーユーザーアカウントでログインしました。

###静的ファイルを使ったアプリのスタイリング
今、我々は作業アプリケーションを持っているので、それをより見やすくするためにいくつかのスタイルを追加しようとしています。そこで、Bootstrap 3とJqueryライブラリを使用して、アプリケーションにスタイルを追加します。

これを行うには、プロセスがあります。

対応するソースファイルをダウンロードします。

1、bootstrap.css
2、bootstrap.js
3、jquery.js

core フォルダ内に static というサブフォルダを作成し、その中に core という名前の別のフォルダを作成します。このようにして、コアアプリの静的ファイルをこれらのフォルダに配置します。

1、css ファイルを格納する css フォルダを作成
2、javascriptファイルを保存するjsフォルダを作成
3、画像を保存するための画像フォルダを作成

ブラウザからこれらのファイルにアクセスするための STATIC_ROOT および STATIC_URL 設定を設定

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

静的ファイルをbase.htmlファイル内に統合し、継承するテンプレートがこれらのライブラリを使用できるようにします。

まず、全ての静的ライブラリをロードします。

{% load static %}

これで、以下のように、このタグを使用して静的フォルダ内の静的リソースを使用することができるようになりました。

{% static 'core/css/bootstrap.css' %}

以下は、すべての静的リソースが正しくインポートされた結果のbase.htmlファイルです。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>{% block title %} Welcome to the core app !! {% endblock %}</title>

<link rel="stylesheet" type="text/css" href="{% static 'core/css/bootstrap.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'core/css/main.css' %}">

</head>

<body>
<script src="{% static 'core/js/jquery.js' %}"></script>
<script src="{% static 'core/js/bootstrap.js' %}"></script>
</body>
</html>

#結論
このチュートリアルが終わる頃には、Django ウェブフレームワークを使ってアプリケーションを構築する方法を見たことになるでしょう。より正確には、Django のモデル、ビュー、テンプレートとは何かを学びました。

このチュートリアルで使用したアプリケーションのソースコードは、GitHub にあります。

https://github.com/binel01/buyandsell/tree/master/core

アリババクラウドは日本に２つのデータセンターを有し、世界で60を超えるアベラビリティーゾーンを有するアジア太平洋地域No.1(2019ガートナー)のクラウドインフラ事業者です。
アリババクラウドの詳細は、こちらからご覧ください。
アリババクラウドジャパン公式ページ