2016年2月14日日曜日

Django1.8 と Celery3.1.20 で、DBに非同期書き込み

やりたいことはタイトルの通りだけど、Webの情報に翻弄され、中々ゴールに辿りつけず。
忘れない内に、メモメモ。

環境
Ubuntu14
RabbitMQ
Django1.8
Celery3.1.20

1.RabbitMQ インストール

$ sudo apt-get install rabbitmq-server

2.Django インストール

$ cd
$ virtualenv env
$ source ~/env/bin/activate
$ pip install --upgrade pip
$ pip install Django==1.8 celery==3.1.20
$ pip freeze
$ cd env

3.アプリケーション

$ django-admin.py startproject proj
$ cd proj
$ python manage.py startapp app1

〜 中略 〜 ※本論では無いので、一旦省略(^^;

4.Django で Celery を使えるようにする。

マニュアルは、こちら
http://docs.celeryproject.org/en/latest/django/index.html

4-1.ファイル構成

proj/
├manage.py
├proj/
│├__init__.py  # 4.3参照
│├settings.py
│├celery.py    # 4.2参照
│└urls.py
└app1/
 ├admin.py
 ├models.py
 ├views.py     # 6参照
 └tasks.py     # 5参照

4-2.Celery インスタンスを定義

File: proj/proj/celery.py
--
from __future__ import absolute_import
import os
from celery import Celery
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'proj.settings')
from django.conf import settings
app = Celery('proj')
app.config_from_object('django.conf:settings')
app.autodiscover_tasks(lambda: settings.INSTALLED_APPS)
--

4-3.Django 起動時にインスタンスをロード

File: proj/proj/__init__.py
--
from __future__ import absolute_import
from .celery import app as celery_app
--

5.非同期にDBに書き込むタスクを定義

File: proj/app1/tasks.py
--
from __future__ import absolute_import
from celery import shared_task
from .models import Word

@shared_task
def put_word(word):
 w, c = Word.objects.get_or_create(word=word)
 return "ok"
--

# models.py の説明は省略してます。

6.Vewからタスクに渡す

File: proj/app1/views.py
--
from .tasks import put_word

def test(request):
 word = "xxxxxxxx"
 put_word(word)
 return HttpResponse("ok")
--

# urls.py の説明は省略しています。

7.開発サーバを起動して、動作確認

$ celery -A proj worker -l info
$ python manage.py runserver

8.まとめ

Google App Engine では標準で使える機能を、自前で実装できました。
データベースへの書き込みは、レスポンスへの影響が大きい為、できる限り非同期で実行させたいもの。
日本語の情報も少なく、少し苦労したので、どなたかの参考になれば、幸いです。

2016年1月21日木曜日

Ubuntu14.04で、NginxとuWSGI(emperor)を構築

ABLE.net の VPS で、WEBサーバを構築する手順です。

1. インストール

$ sudo apt-get install nginx uwsgi uwsgi-plugin-python python-pip

2. ポートを開く

$ sudo ufw allow 80

3. Nginx の設定

デフォルトのサイト設定を削除しておきます。

$ sudo rm /etc/nginx/sites-enabled/default

設定ファイルの例です。

FILE: /etc/nginx/conf.d/<サイト名>.conf
--
server {
 listen 80;
 server_name <サイトURL>;
 location / {
  uwsgi_pass unix:/tmp/<サイト名>.sock;
  include uwsgi_params;
 }
}
--
※ UNIXソケット(.sock)で、uWSGI に連結します。

再起動しておきます。
$ sudo service nginx restart

4. uWSGI (emperor) の設定

必要なディレクトリを作成します。

$ sudo mkdir -p /etc/uwsgi/vassals
$ sudo mkdir -p /var/log/uwsgi

設定ファイルです。

FILE: /etc/init/uwsgi.conf
--
description "uWSGI"
start on runlevel [2345]
stop on runlevel [06]
respawn
env UWSGI=/usr/local/bin/uwsgi
env LOGTO=/var/log/uwsgi/emperor.log
exec $UWSGI --master --emperor /etc/uwsgi/vassals --die-on-term --logto $LOGTO
--

emperorモードで起動し、/etc/uwsgi/vassals の iniファイルを監視します。

$ sudo service uwsgi restart

5. Django の動作確認

virtualenv 環境に、Django を入れます。

$ cd
$ virtualenv venv
$ cd venv
$ source bin/activate
$ pip install Django
$ django-admin.py startproject mysite
$ cd mysite

$ deactivate

6. uWSGI 設定ファイル

Nginx から uWSGI に連結する為に、iniファイルを作成します。

設定ファイルの例です。

FILE: /etc/uwsgi/vassals/<サイト名>.ini
--
[uwsgi]
# Variables
base = /home/<ユーザ名>/venv
app  = <サイト名> # Djangoのデフォルトは、mysite
# Generic Config
home   = %(base)
chdir  = %(base)/%(app)
module = mysite.wsgi
socket = /tmp/%n.sock
chmod-socket = 666
py-autoreload = 1 #reload on change python file
plugins = python
--

7.まとめ

全体の繋がりは、以下の通り。

 WEBアクセス -> Nginx -> uWSGI -> Django

複数のサイトを動かす場合は、
・Nginx の <サイト名>.conf
・uWSGI の <サイト名>.ini
・アプリケーション(Django等)
を準備します。

Ubuntu14.04 + Nginx で、画像のリサイズを行う。

こちらの続きです。
http://yamayoshi.blogspot.jp/2013/05/ubuntu1204-nginx.html

やりたいこと。
・任意のサイズを指定
・任意のアドレスを指定

元の画像: http://<アドレス>/<パス>/<ファイル>
 ↓
リサイズ: http://<変換サーバのアドレス>/g<サイズ>/<アドレス>/<パス>/<ファイル>

1.インストール

$ sudo apt-get install nginx

2.設定

FILE: /etc/nginx/conf.d/<app>.conf
--
server {
 listen 80;
 server_name www.example.com;
 resolver localhost;

 location / {
  uwsgi_pass unix:/tmp/<app>.sock;
  include uwsgi_params;
 }

 location ~ ^/g(?P<size>[^/]+)/(?P<url>[^/]+)/(?P<file>.*)$ {
  rewrite ^ /crop last;
 }

 location /crop {
  image_filter crop $size $size;
  proxy_pass http://$url/$file;
  add_header Nginx "$size $url $file";
 }
}
--

ちょこっと説明

> location ~ ^/g(?P<size>[^/]+)/(?P<url>[^/]+)/(?P<file>.*)$
 → サイズ、アドレス、ファイル(パスを含む) の情報を取り出して、変数に格納します。

> image_filter crop $size $size;
 → 変換サイズを指定

> proxy_pass http://$url/$file;
 → 元の画像ファイルを指定

> add_header Nginx "$size $url $file";
 → おまけ(HTTP_HEADERに変数を出力し、Chrome開発ツールで確認。)

3.起動/停止

$ sudo service nginx stop … 停止
$ sudo service nginx start … 起動

4.動作確認

ブラウザから、

http://www.example.com/g160/3.bp.blogspot.com/-qn0m7KScp4A/TsTyX4cO5FI/AAAAAAAAANA/ooqc_7cGnis/s1600/NEC_0025.JPG

にアクセスすると、

http://3.bp.blogspot.com/-qn0m7KScp4A/TsTyX4cO5FI/AAAAAAAAANA/ooqc_7cGnis/s1600/NEC_0025.JPG

のサムネイル画像を表示します。

キャッシュを使う場合は、前回の記事を参考に。

2015年7月17日金曜日

GAE/P NDB のクエリで、2つの不等式を使う。

Google App Engine は、クエリの中で複数のプロパティに対して不等式を使うことが出来ません。
これ、結構不便です..

例えば、開始日と終了日の2つのプロパティに対して、
 開始日 < 7月10日 and 終了日 > 7月20日
と云うようなクエリは実行できないのです..

で、イロイロと調べて、こんな記事を見つけました。
http://stackoverflow.com/questions/22176586/optimizing-a-inequality-query-in-ndb-over-two-properties

クエリで1つ目の不等式を使い、iterで2つ目の不等式を使うのか。なるほど!!

続いて、こんな記事も見つけた。
http://ae-book.appspot.com/static/pgae-ndb-20121009.pdf

なるほど、iter で cursorも使えそうだな。

と、ここまでは良かったけど、どうも projection と cursor は一緒に使えないみたい..残念。

で、結論は、こんな感じに。

[モデル]
class Event(ndb.Expando):
 start_dt = ndb.DateProperty()  #開始日時
 end_dt = ndb.DateProperty()   #終了日時

[スクリプト]
next_curs = request.GET['curs']
cnt = 10
it = Event.query(Event.end_dt >= dt1).iter(projection=[Event.start_dt])
keys = []
if next_curs is not None:
 next_curs = int(next_curs)
 for e in it:
  if e.key.id() == next_curs:
   keys.append(e.key)
   break
next_curs = None
for e in it:
 if e.start_dt <= dt2:
  keys.append(e.key)
  if len(keys) >= cnt+1:
   next_curs = keys[cnt].id()
   keys.pop()
   break

主なポイントは、以下の通り。
 Event.query(Event.end_dt >= dt1) → 1つ目の不等式
 if e.key.id() == next_curs: → カーソル位置(キーID)まで早送り
 if e.start_dt <= dt2: → 2つ目の不等式
 if len(keys) >= cnt+1: → cnt件までループ

2015年5月4日月曜日

django.forms で、datetime-local を使う。

HTML5では、UTC(協定世界時)によらないローカル日時(datetime-local)の入力欄を作成することが出来ます。
これにより、カレンダー型式で入力を行えるようになるので、とても便利です。

でも、これを Django で使うまでが一苦労..

ポイントを纏めておきます。

#環境等
・GAE(Google App Engine)/Python
・Django 1.4
・jquery mobile 1.4

1.モデル

# こんな感じです。NDB使ってます。
class Event(ndb.Model):
 start_dt = ndb.DateTimeProperty() # イベントの開始日時の例です。
 ..

2.フォームオブジェクト

# インプットタイプを指定します。
forms.DateTimeInput.input_type="datetime-local"

# フォームの入力フィールドです。
class EventForm(forms.Form):
 start_dt = forms.DateTimeField(label='開始日時:', widget=forms.DateTimeInput, input_formats=['%Y-%m-%dT%H:%M'])
 ..

 # widget で、forms.DateTimeInput を指定することにより、ローカル日時(datetime-local)の入力欄を表示します。
 # input_formats で、バリデーションの型 '%Y-%m-%dT%H:%M' を定義します。ここ重要!!

3.テンプレート

<form method="POST" action="/post/">
<div class="ui-field-contain">{{ form.start_dt.label_tag }}{{ form.start_dt.errors }}{{ form.start_dt }}</div>
..

# jquery mobile では、ui-field-contain で括って、ラベルとかエラーとか表示させます。

4.データの書き込み

def post(request):
 if request.method == 'POST':
  form = EventForm(request.POST)
  if form.is_valid():
   e = Event()
   e.start_dt = form.cleaned_data['start_dt']
   e.put()

   # バリデーションチェック後、データを書き込みます。

5.データをフォームに渡す

# データを取り出し
e = Event.get_by_id(key)

# strftime で、日時フォーマットを変更
start_dt = e.start_dt.strftime("%Y-%m-%dT%H:%M")

# フォームオブジェクトを生成
data = {
  'start_dt' : start_dt,
  ..
}
form = EventForm(data)


参考
http://www.htmq.com/html5/input.shtml
http://docs.djangoproject.jp/en/latest/topics/forms/index.html
http://stackoverflow.com/questions/16201343/input-formats-to-datetimefield

2015年3月15日日曜日

GAE/Python の Backend Instance を使う

GAE/Python は、9時間/日の Backend Instance 無料枠があります。

この無料枠を使う方法をメモっておきます。

[公式ドキュメント]
https://cloud.google.com/appengine/docs/python/modules/

【重要】
・Backends Python API は、2014/3/13 に停止されています。
・WEB上の古い記事に注意しましょう。

[利用ケース]
この Backend Instance は、Cron で起動して、バッチ処理に使うとよいでしょう。

[必要なファイル]
app.yaml
dispatch.yaml
backend.yaml
cron.yaml

[app.yaml]
デフォルト(Frontend Instance)の設定ファイルです。

例:自動スケーリング(F1)を使用します。
-- ここから --
application: <アプリケーション名>
module: default
version: 1
runtime: python27
api_version: 1
threadsafe: true

instance_class: F1
automatic_scaling:
 max_idle_instances: 1
 min_pending_latency: 15.0s

handlers:
- url: /.*
 script: <スクリプト>
-- ここまで --

[dispatch.yaml]
どの処理を Backend Instance に渡すかを記述します。

例: /backend にリクエストがあった場合、module:backend を利用します。
-- ここから --
application: <アプリケーション名>
dispatch:
- url: "*/backend/*"
 module: backend
-- ここまで --

[backend.yaml]
バックエンドの設定ファイルです。

例:基本スケーリング(B1)を使用します。
-- ここから --
application: <アプリケーション名>
module: backend
version: 1
runtime: python27
api_version: 1
threadsafe: true

instance_class: B1
basic_scaling:
 max_instances: 1
 idle_timeout: 10m

handlers:
- url: /.*
 script: <スクリプト>
-- ここまで --

[Cron.yaml]
Cron で処理を起動するには、cron.yaml を準備します。

例: 毎日 02:00 に、/backend/cron/day の処理を起動します。
-- ここから --
cron:
- description: Cron Day Job of Backend
 url: /backend/cron/day
 schedule: every day 02:00
 timezone: Asia/Tokyo
 target: backend
-- ここまで --

[開発用サーバの起動]
$ google_appengine/dev_appserver.py app.yaml dispatch.yaml backend.yaml

[デプロイ]
$ google_appengine/appcfg.py update app.yaml backend.yaml

[参考]
http://www.topgate.co.jp/blog/20140715

2015年3月7日土曜日

jQuery Mobile で WebStorage を使う方法

Formで送信したデータを横取りして、webstorageに入れてみました。

HTMLは、こんなカンジで。

<form id="form" method="get" action="/search/">
<input type="search" id="search" name="q" value="" />
</form>

Formのidは「form」。
送信したデータの名前は「q」。

続いて、スクリプトです。

$(document).on("submit", "#form", function(){
 if (window.localStorage) {
  var storage = sessionStorage;
  var key = jQuery.now();
  var val = $(this).serialize().split('=')[1];
  //alert(val);
  storage.setItem(key, val);
 }
});

簡単に説明
on("submit", "#form", … Formの送信を検知。
if (window.localStorage) … ブラウザで webstorageが使えるか、確認。
storage = sessionStorage … セッションストレージを使います。
key = jQuery.now() … キーとして、現在時刻をセット
val = $(this).serialize().split('=')[1] ‥ 送信データから値を取り出し
(例えば、「nec」と入力した場合、「q=nec」が送信されますよ。)
storage.setItem(key, val) … webstorage に格納

格納されたことを確認するには(Chromeの場合)
その他ツール → デベロッパーツール → Resources → Session Storage

取り出すには

var storage = sessionStorage;
for (var i=0; i < storage.length; i++) {
 var key = storage.key(i);
 var val = storage.getItem(key);

for で回して、keyとvalを得ます。

アイデア次第で、イロイロなことに使えそう。