システム管理者向けのサービス。 パート1

1.はじめに

システム管理者のタスクはさまざまです。 コンソールでの作業-ユーザーの作成、サーバーでのパッケージのテスト、インストール、構成、ログとトラフィックの表示、ネットワークとトンネルのセットアップ。 鉄の使用-機器とドキュメントのインストール、作業計画の作成、サービスの説明。



システム管理者には、自動化のための多数のスクリプトがあります。 通常、ホームフォルダーに保存され（そこだけでなく、CVSにも良い）、定期的に新しい機能で更新されます。 原則として、それらを書いた同じ人だけがそのようなスクリプトを使用できます（そうでなければ、結果は最も壊滅的です）。



したがって、自動化タスクには、管理、簡素化を容易にするために単純なGUIが必要になることがよくあります。 たとえば、トラフィック収集。 または、ボタンでバックアップ/リリースをロールバックする機能（誰かがSCMシステムを介してパッケージをロールバックする場合でも）。 または、コンソールをスパイせずにMysqlマスターを変更します（間違ったサーバー上のコマンドに誤って詰まったために、一定数のエラーが発生します）。









最新のテクノロジーは、適切なGUIでサービスをすばやく作成するための多数のオプションを提供します。 クライアントとサーバーの相互作用の例を分析し、Jquery、Bootstrap、Pythonプログラミング言語、python-flaskライブラリのテクノロジーを使用して独自のREST APIサービスを作成します。 データをテキストファイルに保存します。



REST APIのクライアントは、javascriptコードを含む通常のhtmlページになります。



この記事は、ときどき小さな決定を下さなければならないシステム管理者を対象としています。 Linux Ubuntu 12.04オペレーティングシステムで作業します。 同じテクノロジーセットを他のOS（Windows、Mac、Freebsd）で使用できます。

2.技術について

RESTは一般に受け入れられている推奨事項のセットであり、サードパーティの開発者がクライアントアプリケーションやフロントエンドを作成するのに便利なバックエンドを構築できます。 将来を見据えて、これらの推奨事項から少し逸脱し、最初はべき等のGETメソッドを使用して新しい情報をサーバーに追加します。







ブートストラップは、ページのデザインを考えずに既製の要素を使用できるようにするHTMLスタイルとテンプレートのセットです。



Jqueryは、言語を拡張し、たとえばGETリクエストを生成するための既製の便利な関数を使用できるようにするjavascriptライブラリです。



Python-flask-数行のコードでWebサーバーを作成できるPython言語のライブラリ。

3.バックエンドを作成する

フラスコを入れます：

root@golem:/var/www# apt-get install python-flask
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

3.1作業するディレクトリとserver.pyを作成します

Server.pyは、ミニWebサーバーを起動するファイルです。

 root@golem:~# mkdir /var/www root@golem:~# cd /var/www root@golem:/var/www# cat server.py
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ファイル/var/www/server.pyの内容：

 #!/usr/bin/env python # -*- coding: utf-8 -*- import flask app_test = flask.Flask(__name__) @app_test.route("/ping") def ping(): return "pong" if __name__ == "__main__": app_test.run(host='0.0.0.0')
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

3.2打ち上げ

サーバーを起動するには、コンソールで呼び出すだけです。

バックグラウンドでプロセスを開始したい場合は、サインカエル-＆も使用できます。 nohupで起動することもできます-コンソールを終了してもプロセスは停止しません。



ファイルを実行して実行する権限を変更します。

 root@golem:/var/www# chmod +x /var/www/server.py root@golem:/var/www# ./server.py * Running on http://0.0.0.0:5000/
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

3.3チェック

Webサーバーがポート5000で起動したことがわかります。これで、ブラウザーでアクセスできます。







コンソールには以下が表示されます。

 root@golem:/var/www# ./server.py * Running on http://0.0.0.0:5000/ 192.168.1.2 - - [16/Apr/2015 22:43:46] "GET /ping HTTP/1.1" 200 -
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

タスクを少し簡略化し、コマンドラインからサーバーを直接起動します。

とりわけ-これにより、デバッグ出力を確認し、誰がサービスをノックしたかを理解できます-テストそのものです。

起動を並列化する場合は、uwsgiなどを使用できます。 さらに、ubuntuのupstartは、それ自体からプロセスをフォークすることでプロセスを開始できます。

3.4 server.pyバックエンドに、以前に記述されたbashスクリプトを実行するように教えます

3つのハンドル/ install_mc、/ uninstall_mc、および/

最初の2つ-Bashの実行-それぞれ、Midnight Commanderを配置および削除するスクリプト。 後者はサーバーへの本格的なバックドアであり、get-requestのcmdパラメーターに送信されたコマンドを実行できます（実稼働環境で使用する必要はありません。例として示しています）。



ここではすべてがシンプルに見えます。 バッシュ：

 root@golem:/var/www# more scripts/* | cat :::::::::::::: scripts/install_mc.sh :::::::::::::: #!/bin/bash apt-get update && apt-get -y install mc :::::::::::::: scripts/uninstall_mc.sh :::::::::::::: #!/bin/bash apt-get -y remove mc
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

server.pyを起動し、ハンドルをノックします。 バックドア：







ミッドナイトコマンダーを削除：







今置く：









この例では、ポート80にサービスをリロードし、app.testのパラメーターとしてポート= 80を追加しました。 このポートはブラウザでデフォルトで使用されるため、URLに80を追加する必要はありません。

3.5回答で受け取った引数を出力する

最初の空白に戻りましょう。

バックドアハンドルでは、特定の引数をサーバーに渡します-cmdはサーバーで実行する必要があります。



サーバーに送信する引数を印刷してみましょう-このサーバー自体の答え（ところで、print関数を使用すると、コンソールに直接出力するのが便利です）。 server.pyを次のフォームに移動しましょう（コードを変更した後、忘れずに再起動してください）。





引数をノックし、add関数に戻ると、送信したものが返されます。







コンソールで：

 root@golem:/var/www# ./server.py * Running on http://0.0.0.0:5000/ {'traffic': u'548', 'surname': u'Pupkin', 'user_id': u'1', 'name': u'Vasily'} 192.168.1.2 - - [16/Apr/2015 23:24:46] "GET /add?id=1&name=Vasily&surname=Pupkin&traffic=548 HTTP/1.1" 200 -
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ブラウザのImmutableMultiDictとは異なり、コンソールには通常の辞書があります。 これは、.to_dict（）がprint関数に起因するためです。

ただし、returnは元の形式でデータを返します。

3.6テキストファイルにデータを保存するためにserver.pyバックエンドを教えます

これで、送信されたものを送り返すことができるpythonフラスコベースのサービスフレームワークがいくつかできました。 しかし、フロントエンドのハンドルで美しいボタンを使用したいのです。 そして、データを返すだけでなく、どこかに保存する必要があります。



テキストファイルを使用してデータベースの小さな類似物を作成します。このファイルへのアクセスは、一定数のhttp-ペンによって提供されます。



そして、何かを書きましょう！



コードを少し改善します。



ここで、/ getメソッドを追加し、/ removeおよび/ addメソッドにコードを追加しました。



データを提供するには、データをどこかに保存する必要があります。 この場合、通常のtxtファイル-data.txtを保存場所として選択しました（これは問題です。後で理由を説明します）。



さらに、追加のパラメーターを指定してapp_testオブジェクトを実行します。

debug = True。 そして今、テキストエディタでコードを変更すると、サーバーが自動的に再起動し、エラーが発生した場合、エラーが発生した場所に印刷されます。



引数の情報がクエリ文字列で取得されると、json.dumpsを作成し（文字列からjsonを作成）、この形式でファイルに書き込みます。



前と同じ方法でハンドルを追加/追加しましょう：







コンソールに表示されるもの（print関数を使用して印刷する追加情報に注意してください）：

 root@golem:/var/www# ./server.py * Running on http://0.0.0.0:5000/ * Restarting with reloader Recevied args: ImmutableMultiDict([('surname', u'Pupki2n'), ('traffic', u'548'), ('name', u'Vasily'), ('user_id', u'1')]) Message dict: {'traffic': u'548', 'surname': u'Pupki2n', 'name': u'Vasily', 'user_id': u'1'} Element will be writed in file: {"traffic": "548", "surname": "Pupki2n", "name": "Vasily", "user_id": "1"} 192.168.1.2 - - [17/Apr/2015 16:54:46] "GET /add?user_id=1&name=Vasily&surname=Pupki2n&traffic=548 HTTP/1.1" 200 -
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

data.txtファイルに書き込まれる内容：

 root@golem:/var/www# cat data.txt {"traffic": "548", "surname": "Pupki2n", "name": "Vasily", "user_id": "1"}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すでに他のデータを使用して、ファイルを見て、もう一度ハンドルを引きましょう。

 root@golem:/var/www# cat data.txt {"traffic": "548", "surname": "Pupki2n", "name": "Vasily", "user_id": "1"} {"traffic": "12248", "surname": "Batareikin", "name": "Dmitry", "user_id": "2"}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

/ハンドルを取得すると、user_idの情報が返されることがわかります。







data.txtファイルにあるすべてのものを提供する/リストハンドルもあります。







次に、/ removeノブを引いて、data.txtでこの行が消えていることを確認します。

 root@golem:/var/www# cat data.txt {"surname": "Batareikin", "traffic": "12248", "name": "Dmitry", "user_id": "2"}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実際、user_id = 1のユーザー情報を要求すると、falseになります。







さらに悪いことに、データをファイルに保存することは、/ removeメソッドから始まり、最初にすべてをdict_listに読み取り、次にファイル内のすべてを削除し、書き込まれる必要のない情報（要素['user_id']！ user_id）。



実際、ファイル全体を削除して再保存するたびに、ファイルのサイズが小さいときにこれを行うことができます。 ただし、ファイル内のレコードの数は増加し、レコードの削除操作にはさらに長い時間がかかります。



したがって、実稼働環境では、同様の問題が解決された本格的なデータベースを使用することをお勧めします。 単純なファイルベースについて話す場合、たとえば、sqlite（pythonのsqlite3モジュール）を使用できます。 サービスの負荷が比較的低い場合に使用できます。



より深刻なプロジェクトの場合は、mysqlまたは私が気に入っているmongodbを使用できます（どのデータベースを使用する方がよいか、いつ使用するか-記事の次の部分で説明します）。

4.フロントエンドを行います

そこで、彼に送ったものをファイルに書き込むバックエンドを作成しました。 そして、記録したものを返す方法を知っており、user_idによって要素を削除できます。



ここで、このページ自体を更新せずにエントリを追加および削除できるように、ページにこれを美しく表示したいと思います。 ajaxを使用します。

4.1 htmlおよびstatics returnの構成

バックエンドでPythonコードが機能する場合、ブラウザではページをレンダリングするために別の言語（html）が使用されます。 そして、それが機能し始める前に、どういうわけかそれは与えられなければなりません。 したがって、server.pyに次の行を追加（変更）します。



ここにあります：

• 変数ROOTでサーバーのルートディレクトリを定義しました
• 彼らは、このディレクトリをルートとして使用するようにFlaskに指示しました。
• send_static関数への2つのルートをハングさせました。urlで指定されていない場合、index.htmlを返すか、url（パス変数）で指定されたパスにあるファイルを返します。
• サービスをポート80に移動しました（以前と同様に、bashスクリプトを実行するserver.pyを作成したとき）

/var/www/traffic.htmlファイルの内容であるページを作成しましょう：

 <html> <head> </head> <body> Our test traffic page </body> </html>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、ブラウザでどのように表示されるか見てみましょう。







そしてコンソールでは、誰かが本当に来て私たちのページを尋ねたことがわかります：

 root@golem:/var/www# ./server.py * Running on http://0.0.0.0:80/ * Restarting with reloader Requested file path: traffic.html 192.168.1.106 - - [27/Jul/2015 00:59:04] "GET /traffic.html HTTP/1.1" 304 -
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実際、そのようなことのために、もちろん、専用のソリューション-Webサーバーを使用する方が良いです。 たとえば、nginx-静的の戻り値に完全に対応します。



ただし、Webサーバーのセットアップは、この記事の範囲外です:)。

4.2。 ブートストラップとjqueryを接続する

ブートストラップとJqueryをダウンロードして解凍します（ブートストラップを機能させるには後者が必要です）

4.3ブートストラップのスタイルを使用して簡単な表を描いてみましょう。

新しいファイル-index.htmlを作成します。



jquery接続文字列は、ブートストラップ行に厳密に従う必要があることに注意してください。 そして、後でjsで記述するすべてのコードの前-jqueryを使用する予定がある場合。

また、テーブルに接続されているCSSスタイル（class =“ table table-hover”）にも注意してください。bootstrap.cssから取得しました 。具体的には、テーブルはここから取得されました： getbootstrap.com/css/#tables-hover-rows





合計で、ブラウザに次の表が表示されます。

4.4。 APIから情報をダウンロードし、コンソールに表示します

はじめに-APIで取得した情報をコンソールに表示します。 ここでは、firebugについて初めてお話しします。



より便利にするために、データを処理するハンドルをurl / server /に移動しました。 そして、URL 192.168.1.1/server/listを介してリストハンドルにアクセスします。



したがって、@ app_test.routeデコレーターのパラメーターを変更する必要があります-それにword / serverを追加します。 たとえば、/ listメソッドの場合、コードは次のようになります。



そして、/ listハンドルからデータをアンロードし、それをfirebugコンソールに出力するJsを作成します。





ブラウザで：







firebug拡張機能（Firefoxのアドオンとしてインストール可能）を使用すると、jsコンソールで情報を確認できます（標準のブラウザーツールも使用できます）。



この場合、2つのオブジェクトをコンソールに持ち込みました。現在のドキュメントと、id = userIdの.findメソッドで見つかったオブジェクトです。 さらに、$ .get jqueryメソッドを使用して、/リストハンドルから受け取ったテキストをコンソールに出力しました。

コンソールからこれらの各オブジェクトとやり取りできます（td＃userIdの隣にあるObjectを右クリックして、コマンドラインでselect-useを使用します）。たとえば、.empty（）メソッドを呼び出すと、DOMから要素のコンテンツが消えることがわかります-ツリー：







この場合、UserIdフィールドの下の「1」を削除します。







オブジェクトのメソッドにより、オートコンプリートも機能します-それぞれの機能を確認できます。 さらに、Objectとtd＃userId（これらは異なるオブジェクトです）で使用できるメソッドは異なります。 たとえば、前者には.innerHTMLメソッドがありません。

4.5ロードされた情報を表に表示する

これで、オブジェクトと対話する方法がわかったので、/リストハンドルで受け取ったすべてをテーブルに表示します。 ここでは、とりわけ、生成されたhtmlコードを要素の直後に挿入できるjqueryメソッド.afterを使用します。これは、id = "head_tr"を入れたテーブルのヘッダーです。





/ listペンからデータを取得し、コンソールに出力する以外に、このデータを渡すhandle_answer関数を呼び出しました。 この関数はデータを受信し、ファイルから1行の各要素にそれらのリストを作成しました-そして、改行文字\ nは私たちにとってセパレータになりました。



次に、リストのすべての行を調べました。 JSON.parseを使用してJsonオブジェクトに変換しました（技術的には、受け取った行はJson形式で記述されているため、これを行うことができます）。 次に、このjsonオブジェクトから、フィールドの名前に一致するメソッドにより、このフィールドに格納されているデータ（たとえば、entry_jsoned.user_id-ファイルの最初の行は「2」）を取得し、フォームの設計に基づいてhtmlを生成しました：

 element_html = '<tr id="data'+entry_jsoned.user_id+'"><td id="userId">'+entry_jsoned.user_id+'</td><td id="name">'+entry_jsoned.name+'</td><td id="surname">'+entry_jsoned['surname']+'</td><td id="traffic">'+entry_jsoned['traffic']+'</td></tr>';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合、これは、Jsonオブジェクトから取得した変数を適切な場所に挿入した単なる行です。



ブラウザで何が起こったのか：







javascriptを使用して、/ server / listハンドルから取得した情報を使用してさらに2つのtr要素を挿入することにより、テーブルを「完成」したことがわかります。 素晴らしい。

4.6ページをオーバーロードせずにサーバーにデータを送信する

次に、たとえば、ミニデータベースにユーザーを追加するボタンを追加しましょう。これを行うには、同じブートストラップの水平フォーム要素（getbootstrap.com/css/#forms-horizo​​ntal）を使用し、少し修正するだけです（たとえば、別のボタンを使用して要素間をインデントします）。

ユーザーを追加するには、/ addハンドルを使用します。





Htmlとjsはすでに次のようになっています。



私たちは何をしましたか：

• テーブルの前に、4つのフィールドとボタンbutton_submitを持つフォームを追加しました。
• 持っている各フィールドには独自のIDがあり、コード全体でアクセスできるように各セレクターに書き込みました。 例：
  
  

   var traffic_info_surname = traffic_info.find("#surname")
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  – traffic_info_surname c id surname - traffic_info. traffic_info .
• . , , – . : , .
• traffic_info_button – , , url jquery $.get .
• さらに、多くの有用な情報をコンソールに表示しました。このデバッグから、コードの動作を大まかに理解できます。

ブラウザでは、これはすべて次のようになり







ます。ボタンを押すだけで、ユーザーとデータを追加できます。

5.結論

フロントエンドとバックエンドを作成しました。スキームの一般原則について話し、jsコードをデバッグする方法を学び、サービス実装で最新のツール（フラスコ、ブートストラップ、jquery）を使用する問題に触れました。バックエンドは、任意のソースからデータを取得し、ハンドルの形でフロントエンドに提供し、多くの例があるサイトのブートストラップからスタイルをロードするのに役立ちます。



次のパートでは、トラフィックを収集して表示するために、netflowからこのサービスへのデータのアップロードを構成します。次に、サービスをmongoデータベースに固定し、フォールトトレランスを提供します。



Nginxを設定し、これを行う必要がある理由を正当化してみましょう。また、モーダルウィンドウについても説明し、CSSブートストラップをカスタマイズしてテンプレートエンジンを使用します。