基於Flask-Angular的項目組網架構與部署

基於Raindrop網，分享項目的組網架構和部署。

項目組網架構

架構說明

1.流

項目訪問分爲兩個流，經過nginx分兩個端口暴露給外部使用：
數據流:用戶訪問Raindrop網站。
控制流:管理人員經過supervisor監控、管理服務器進程。

圖中除了將程序部署在ECS上外，還使用了OSS（對象存儲服務，能夠理解成一個nosql數據庫），主要是爲了存放一些靜態文件，提升訪問速度。阿里的OSS還能夠與CDN一塊兒使用，一樣能夠提升訪問速度。

2.nginx

經過nginx對外暴露兩個端口，如上所述，80端口供用戶訪問網站，另外一個端口供管理人員使用。
80端口:根據請求的url配置了方向代理，分別導向client(angular)和server(flask).
其中server經過gunicorn部署在[socket]localhost:10000上
配置以下：

server {
    listen 80 default_server;

    # set client body size to 4M (add by dh) #
    client_max_body_size 4M;

    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    # product
    root /home/raindrop/www/client/dist;

    # Add index.php to the list if you are using PHP
    index index.html index.htm index.nginx-debian.html;

    server_name _;

    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        try_files $uri $uri/ =404;
    }
    
    # access flask static folder
    location /static/ {
        # product
        root /home/raindrop/www/server/app;
    }

    location /api/ {
        proxy_pass http://localhost:10000/api/;
        proxy_redirect off;

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;    
    }

    # Error pages
    error_page 413 @413_json;

    location @413_json {
        default_type application/json;      
        return 200 '{"msg": "Request Entity Too Large(max=4M)"}';
    }
}

3.gunicorn

gunicorn做爲wsgi容器，用來執行flask server。
gunicorn可使用異步socket:gevent，其本質是基於greenlet實現協程的第三方庫，改善io阻塞問題，經過簡單的配置就能使程序得到極高的併發處理能力。

注意：使用gunicorn != 使用gevent，如要開啓gevent socket，啓動gunicorn時須要增長--work-class參數，以下：

gunicorn --workers=4 --worker-class socketio.sgunicorn.GeventSocketIOWorker -b localhost:10000 wsgi:app

除了gunicorn，也能夠選用uwsgi，可是有兩點限制須要注意：
1.若是使用了Flask-socketio，請不要使用uwsgi，緣由

Note regarding uWSGI: While this server has support for gevent and WebSocket, 
there is no way to use the custom event loop needed by gevent-socketio, 
so there is no directly available method for hosting Flask-SocketIO applications on it.
If you figure out how to do this please let me know!

2.若是使用異步WSGI Server，請勿使用uwsgi，緣由：慎用異步 WSGI Server 運行 Flask 應用

Flask（Werkzeug）的Local Thread沒法與uwsgi基於uGreen的微線程兼容，引發Local Thread工做混亂。

4.celery

在程序運行過程當中會有一些比較耗時但並不是緊急的工做，這些任務可使用異步任務來處理，提升server的響應速度。
celery - Distributed Task Queue是一個第三方庫，提供異步隊列和任務處理功能。
Raindrop使用celery配合實現feed功能。經過flask進行配置，使用redis做爲異步隊列來存儲任務，並將處理結果(feed activity)存儲在redis中。

5.supervisor

如上所述，咱們須要在服務器上運行gunicorn和celery兩個進程。
顯然，咱們須要一個monitor來幫咱們管理這兩個進程，避免進程崩潰不能及時拉起，阻塞業務。
supervisor：Supervisor process control system for UNIX是一個開源monitor程序，而且內置了web管理功能，能夠遠程監控、重啓進程。配置以下：

[inet_http_server]
# web 管理端口，經過nginx暴露給遠端用戶
port=127.0.0.1:51000

[program:raindrop]
# 程序啓動命令
command = gunicorn --workers=4 --worker-class socketio.sgunicorn.GeventSocketIOWorker -b localhost:10000 wsgi:app
directory = /home/raindrop/www/server
user = dh                                     
stopwaitsecs=60
stdout_logfile = /var/log/raindrop/supervisor-raindrop.log
redirect_stderr = true

[program:celery]
command = celery -P gevent -A wsgi.celery worker
directory = /home/raindrop/www/server
user = dh                                             
stopwaitsecs=60
stdout_logfile = /var/log/raindrop/supervisor-celery.log
redirect_stderr = true

6.數據庫

mysql:網站主要數據存儲在關係型數據庫中
redis:緩存mysql數據 + celery異步隊列

服務器

使用阿里雲的服務器
ECS:部署服務端程序
OSS:存儲前端靜態文件（速度很快，對前端體驗改善很大，採用angular框架強烈推薦使用）

組件

nginx: HTTP Server
angularjs: client框架
flask：server框架
gunicorn: web 容器
celery: 異步任務處理
supervisor: monitor
redis: 數據緩存 + 任務隊列
mysql: 數據庫

本地開發環境與工具

ubuntu12.04 64: 操做系統
virtualenv: python虛擬環境（隔離項目開發環境，不用擔憂包衝突了）
vagrant: 基於virtualbox的本地虛擬環境（環境能夠導入導出，團隊開發必備）
gulp: angular工程打包工具
pip: python包管理工具
fabric: 基於python的遠程腳本（自動化部署神器）

打包部署

基於Ubuntu 12.0.4，其它系統安裝命令(apt-get 等)請自行修改。

繁瑣VS自動化

1. 若是是第一次部署，須要初始化ECS服務器，安裝基本工具：
   nginx, supervisor, redis, mysql, pip, virtualenv

2. 打包項目代碼

3. 發佈靜態文件到OSS服務器

4. 發佈項目代碼到ECS服務器，安裝server依賴的包

5. 修改mysql, nginx, supervisor配置文件

6. 拉起所需進程

而後各類apt-get install, scp, tar, cp, mv，不得不說，這是一個煩人且毫無技術含量的工做，幹過幾回後基本就能夠摔鍵盤了。
不過，有繁瑣的地方，必定有自動化。其實完成上面這些工做，三條命令足以:

fab init_env
fab build
fab deploy

這要感謝Fabric：Simple, Pythonic remote execution and deployment項目，封裝了很是簡潔的遠程操做命令。

Fabric

使用Fabric，只須要編寫一個fabile.py腳本，在啓動定義init_env, build, deploy三個任務：

# -*- coding: utf-8 -*-

import os, re, hashlib
from termcolor import colored
from datetime import datetime
from fabric.api import *
from fabric.contrib.files import exists

class FabricException(Exception):
    pass

env.abort_exception = FabricException

# 服務器地址，能夠有多個，依次部署:
env.hosts = [
    'user@120.1.1.1'
]

env.passwords = {
    'user@120.1.1.1:22':'123456'
}

# sudo用戶爲root:
env.sudo_user = 'root'

# mysql
db_user = 'root'
db_password = '123456'

_TAR_FILE = 'raindrop.tar.gz'
_REMOTE_TMP_DIR = '/tmp'
_REMOTE_BASE_DIR = '/home/raindrop'
_ALIYUN_OSS = {
    'endpoint'       : 'oss-cn-qingdao.aliyuncs.com',
    'bucket'         : 'yourbucketname',
    'accessKeyId'    : 'youraccessKeyId' ,
    'accessKeySecret': 'youraccessKeySecret'
}

def build():
    '''
    必須先打包編譯client，再打包整個項目
    '''
    with lcd(os.path.join(os.path.abspath('.'), 'client')):
        local('gulp build')
    
    # 上傳靜態文件到oss服務器，並修改index.html中對靜態文件的引用
    with lcd(os.path.join(os.path.abspath('.'), 'client/dist')):
        with lcd('scripts'):
            for file in _list_dir('./'):
                if oss_put_object_from_file(file, local('pwd', capture=True) + '/' + file):
                    _cdnify('../index.html', file)

        with lcd('styles'):
            for file in _list_dir('./'):
                if oss_put_object_from_file(file, local('pwd', capture=True) + '/' + file):
                    _cdnify('../index.html', file)
        
        # 注意在oss上配置跨域規則，不然fonts文件沒法加載
        # ！！修改fonts文件夾請放開此段程序！！
        # with lcd('fonts'):
        #     for file in _list_dir('./'):
        #         oss_put_object_from_file('fonts/%s' % file, local('pwd', capture=True) + '/' + file)                

    with lcd(os.path.join(os.path.abspath('.'), 'server')):
        local('pip freeze > requirements/common.txt')
        excludes = ['oss', 'distribute']
        [local('sed -i -r -e \'/^.*' + exclude + '.*$/d\' "requirements/common.txt"') for exclude in excludes]

    local('python setup.py sdist')

# e.g command: fab deploy:'',Fasle
# 注意命令兩個參數間不要加空格
def deploy(archive='', needPut='True'):
    if archive is '':
        filename = '%s.tar.gz' % local('python setup.py --fullname', capture=True).strip()
        archive = 'dist/%s' % filename
    else:
        filename = archive.split('/')[-1]
    
    tmp_tar = '%s/%s' % (_REMOTE_TMP_DIR, filename)

    if eval(needPut):
        # 刪除已有的tar文件:
        run('rm -f %s' % tmp_tar)

        # 上傳新的tar文件:
        put(archive, _REMOTE_TMP_DIR)

    # 建立新目錄:
    newdir = 'raindrop-%s' % datetime.now().strftime('%y-%m-%d_%H.%M.%S')
    with cd(_REMOTE_BASE_DIR):
        sudo('mkdir %s' % newdir)
        
    # 重置項目軟連接:
    with cd(_REMOTE_BASE_DIR):
        # 解壓到新目錄:
        with cd(newdir):
            sudo('tar -xzvf %s --strip-components=1' % tmp_tar)    

        # 保存上傳文件
        if exists('www/server/app/static/upload/images/', use_sudo=True):
            sudo('cp www/server/app/static/upload/images/ %s/server/app/static/upload/ -r' % newdir)

        sudo('rm -f www')
        sudo('ln -s %s www' % newdir)

    with cd(_REMOTE_BASE_DIR):
        with prefix('source %s/env/local/bin/activate' % _REMOTE_BASE_DIR):
            sudo('pip install -r www/server/requirements/common.txt')

            # 啓動服務
            with cd('www'):
                # mysql
                sudo('cp etc/my.cnf /etc/mysql/')
                sudo('restart mysql')

                # monitor
                sudo('cp etc/rd_super.conf /etc/supervisor/conf.d/')
                sudo('supervisorctl stop celery')
                sudo('supervisorctl stop raindrop')
                sudo('supervisorctl reload')
                sudo('supervisorctl start celery')
                sudo('supervisorctl start raindrop')
                
                # nginx
                sudo('cp etc/rd_nginx.conf /etc/nginx/sites-available/')
                # ln -f —-若是要創建的連接名已經存在,則刪除之
                sudo('ln -sf /etc/nginx/sites-available/rd_nginx.conf /etc/nginx/sites-enabled/default')
                sudo('nginx -s reload')

def init_env():
    sudo('aptitude update')
    sudo('aptitude safe-upgrade')

    # sudo('apt-get install nginx')
    sudo('aptitude install python-software-properties')
    sudo('add-apt-repository ppa:nginx/stable')
    sudo('aptitude update')
    sudo('apt-get install nginx')

    sudo('apt-get install supervisor')
    sudo('apt-get install redis-server')
    sudo('apt-get install mysql-server')

    sudo('apt-get install python-pip python-dev build-essential')

    sudo('pip install virtualenv')

    run('mkdir /var/log/raindrop -p')

    with cd ('/home/raindrop'):
        sudo('virtualenv env')

def oss_put_object_from_file(key, file_path):
    from oss.oss_api import *
    oss = OssAPI(_ALIYUN_OSS['endpoint'], _ALIYUN_OSS['accessKeyId'], _ALIYUN_OSS['accessKeySecret'])
    res = oss.put_object_from_file(_ALIYUN_OSS['bucket'], key, file_path)
    return res.status == 200 and True or False


def _expand_path(path):
    print path
    return '"$(echo %s)"' % path

def sed(filename, before, after, limit='', backup='.bak', flags=''):
    # Characters to be escaped in both
    for char in "/'":
        before = before.replace(char, r'\%s' % char)
        after = after.replace(char, r'\%s' % char)
    # Characters to be escaped in replacement only (they're useful in regexen
    # in the 'before' part)
    for char in "()":
        after = after.replace(char, r'\%s' % char)
    if limit:
        limit = r'/%s/ ' % limit
    context = {
        'script': r"'%ss/%s/%s/%sg'" % (limit, before, after, flags),
        'filename': _expand_path(filename),
        'backup': backup
    }

    # Test the OS because of differences between sed versions

    with hide('running', 'stdout'):
        platform = local("uname")
    if platform in ('NetBSD', 'OpenBSD', 'QNX'):
        # Attempt to protect against failures/collisions
        hasher = hashlib.sha1()
        hasher.update(env.host_string)
        hasher.update(filename)
        context['tmp'] = "/tmp/%s" % hasher.hexdigest()
        # Use temp file to work around lack of -i
        expr = r"""cp -p %(filename)s %(tmp)s \
&& sed -r -e %(script)s %(filename)s > %(tmp)s \
&& cp -p %(filename)s %(filename)s%(backup)s \
&& mv %(tmp)s %(filename)s"""
    else:
        context['extended_regex'] = '-E' if platform == 'Darwin' else '-r'
        expr = r"sed -i%(backup)s %(extended_regex)s -e %(script)s %(filename)s"
    command = expr % context
    return local(command)

def _cdnify(index_file, cdn_file):
    sed(index_file, '([^<]*(src|href)=")[^<]*' + cdn_file + '"', '\\1http://' + _ALIYUN_OSS['bucket'] + '.' + _ALIYUN_OSS['endpoint'] + '/' + cdn_file + '"')

def _list_dir(dir=None, access=lcd, excute=local):
    """docstring for list_dir"""
    if dir is None:
        return []

    with access(dir):
        string = excute("for i in *; do echo $i; done", capture=True)
        files = string.replace("\r","").split("\n")
        return files

經過fabric自動化部署有兩點須要注意：
1.安裝mysql時，設置的密碼不能生效，須要登到服務器上手動設置一下：

mysql -u root
use mysql;
update user set password=PASSWORD('123456') where User='root';
flush privileges;
quit;

2.服務器上的用戶須要本身手動建立。

gulp

在build任務中，使用gulp build打包client的angular代碼。
這裏先很少說，有須要請參考github項目generator-gulp-angular

setup

setup是python本身的打包工具。
build任務中，最後使用python setup.py sdist命令把整個工程打包成一個tar.gz文件，上傳到服務器。
使用這個工具須要編寫以下兩個文件：
setup.py:打包腳本

#!/usr/bin/env python

from setuptools import setup, find_packages
import server

try:
    long_description = open('README.md').read()
except:
    long_description = server.__description__

REQUIREMENTS = []
exclude_lib = ['oss', 'distribute']
for lib in open("server/requirements/common.txt").readlines():
    for exclude in exclude_lib:
        if lib.lower() not in exclude:
            REQUIREMENTS.append(lib)

setup(
    name='raindrop',
    url='https://www.yudianer.com',
    version=server.__version__,
    author=server.__author__,
    author_email=server.__email__,
    description=server.__description__,
    long_description=long_description,
    license=server.__license__,
    packages=find_packages(),
    zip_safe=False,
    platforms='any',    
    install_requires=REQUIREMENTS
)

MANIFEST.in:指定打包哪些文件夾

recursive-include etc *
recursive-include client/dist *
recursive-include server/app *
recursive-include server/requirements *
recursive-exclude server *.pyc
prune server/app/static/upload/images
prune server/env 
prune server/tests

本文由raindrop網碼農撰寫。歡迎轉載，但請註明出處。