【第1回】Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみた【初期セットアップ編】
2021.12.20
モダンなフレームワークの使い方を学びながらブログシステムを構築
今回より、また新たに Python WebAPI 関連の連載を始めます!
その名も「Python Responder + Firestore で、モダンかつサーバーレスなブログシステムを作ってみる」です。
ポイント
このテーマのポイントは、以下の2つです。
- Responder = モダンな Python WebAPI
- Firebase (Firestore) = モダンな Web アプリ向けプラットフォーム
ブログシステムなので、もちろん、SEO もしっかり考慮していきます!
「モダンなフレームワークの使い方を学びながらブログシステムを構築していく」というのが、この連載の大きな主軸となってきます。
この連載で学べる知識
本連載では、以下の知識が学べます。
- Python WebAPI (Responder) の使い方
- Cloud Firestore
- Firebase Auth RestAPI
- ブログシステム構築
- 簡単なブログデザイン
今回のテーマは?
第1回目の本記事では、「各ツールの簡単な概要」と「セットアップの解説」を行います。
長い連載になるかと思いますが、ぜひ皆さんも一緒に作りながら学んでいきましょう!
Responder とは?
「Responder」は、Python で Web アプリケーションを簡単に構築できるフレームワークです。
仕様は、「Django」よりも、「Flask」に近いです。
Responder の特徴
Responder には、以下のような特徴があります。
- 単一のインポートで導入可能
- 非同期処理が簡単に書ける
- GraphQL API が簡単に書ける
- 書いていて楽しい (筆者の感想)
このように、Responder は、モダンな機能がたくさん詰まっているフレームワークです。
Responder についてもっと知りたいなら
Responder の詳細は、公式ドキュメントを読んでみてください。
【Responder】
https://github.com/taoufik07/responder
Firestore とは?
「Firestore」は、Google 製のドキュメントデータベースです。
Firestore の特徴
Firestore には、以下のような特徴があります。
- サーバやスケーリング管理がいらない
- フロントエンド開発に集中できる
- フロントエンドから直接データを取得・更新できる
Firestore についてもっと知りたいなら
Firestore の詳細は、以下を参照してください。
【Cloud Firestore】
https://firebase.google.com/docs/firestore?hl=ja
セットアップ
それでは、さっそく作っていきましょう。
まずはセットアップです。
注意
全て Pip での管理を想定していますが、環境に合わせて適宜読み替えてください。
また、Responder は、Python3.6以上 であることが前提です。
各種インストール
Responder をインストール
まずは、Responder をインストールします。
1 | $ pip install responder |
執筆現在 (2020.06.02) は、バージョン2.0.5でした。
Firestore モジュールをインストール
次に、Firestore 関連のモジュールをインストールします。
1 | $ pip install --upgrade firebase-admin |
【Cloud Firestore を使ってみる】
https://firebase.google.com/docs/firestore/quickstart?hl=ja#python
しばらく Firebase の出番はありませんが、ここでインストールしておいてください。
セットアップ完了!
これで、最初のセットアップは完了です。
プロジェクトを作る
そうしたら、プロジェクトを作りましょう。
今回は、「resp_firestore_blog」というプロジェクト名 (ディレクトリ名) にしました。
そうしたら、必要なファイルやディレクトリを作成しましょう。
各ファイルの構成
まずは、以下の様な構成で、各ファイルを作成しました。
1 2 3 4 5 6 7 8 | . ├── controllers.py # Responder処理部 ├── run.py # サーバ立ち上げ ├── static │ └── style.css # Webページのデザイン └── templates ├── index.html # トップページ └── layout.html # レイアウト |
それでは、各ファイルの中身を解説していきます。
controllers.py
このファイルは、「Responder のインポートとルーティング」、「処理をしてビューに投げる」役割を担います。
中身は、以下の様な形にします。
1 2 3 4 5 6 7 8 9 10 11 | # controllers.py # ルーティングと処理を記述 import responder api = responder.API() @api.route('/') # ルートは index() に投げる def index(req, resp): resp.html = api.template('index.html', title='') |
Responder の書き方は、コードをみるととてもわかりやすいと思います。
run.py
このファイルは、「サーバ立ち上げ」を担います。
中身はこれだけです。
1 2 3 4 5 6 7 8 | # run.py # サーバ立ち上げ用 # Copyright (c) RightCode Inc. All rights reserved. from controllers import api if __name__ == '__main__': api.run() |
Responder のサーバ立ち上げは、裏で「Uvivcorn」が動いています。
static/style.css
Responder の static ディレクトリは、「静的ファイルを扱うディレクトリ」です。
「スタイルシート」や「スクリプトファイル」、「画像」などを保管します。
今はとりあえず、CSS ファイルを作成します。
今回のデザインはシンプルなものにしますが、お好きなデザインで作ってみてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | @charset "utf-8"; /* static/style.css スタイルシート */ body{ font: 14px/1.6 "Hiragino Kaku Gothic Pro",Osaka,"メイリオ","MS Pゴシック","MS PGothic",Verdana,Arial,sans-serif; margin:0; color:#313131; background-color: #eeeeee; } hr{ border-top: 3px double #bbb; } h1{ padding: 5px 0; color: #6594e0; border-bottom: dashed 2px #6594e0; } .container{ max-width: 1200px; margin: 0 auto; } .article h2{ padding: 0.5em; color: #494949; background: #c8d6ee; border-left: solid 5px #2b52cd; } |
これも、随時更新していきます。
templates/layout.html
このファイルは、「全てのWebページの共通部分」を担います。
他の HTML ファイルは、このレイアウトを引き継いで構築していきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!-- templates/layout.html テンプレートファイル:これが全てのWebページの雛形となる. --> <!DOCTYPE html> <html lang="ja"> <head> <title>My Blog Name {{ title }}</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="/static/style.css"> </head> <body> <div class="container"> {% block content %} <!-- メインコンテンツ --> {% endblock %} </div> </body> </html> |
<!-- メインコンテンツ --> の部分が、可変なところになります。
{{ }} で、変数を展開できます。
controllers.pyで resp.html = api.template('index.html', title='') としたので、今回は {{ title }}となっています。
ゆくゆくは、そのページのタイトルを動的に生成できる仕様にしておきます。
templates/index.html
仮のトップページを作ります。
先ほど controllers.py にて、「ルートはindex.htmlに投げる」という処理を書いたので、記述していきましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!-- templates/index.html トップページ --> {% extends "layout.html" %} {% block content %} <br> <h1>My Blog Name</h1> <p>Responder+Firestoreで作る,SEOを考慮したモダンでハイパフォーマンスなブログシステム</p> {% endblock %} |
大したことはまだ記述していませんが、 {% extends "layout.html" %} で「引き継ぎ」、 {% block content %} 内に「中身を記述する」、ということだけ頭に入れておきましょう。
動作確認
さっそく、動作確認してみましょう!
1 2 3 4 5 | $ python run.py INFO: Started server process [19028] INFO: Uvicorn running on http://127.0.0.1:5042 (Press CTRL+C to quit) INFO: Waiting for application startup. INFO: Application startup complete. |
表示画面
実際に、http://127.0.0.1:5042 にアクセスしてみると、
しっかり動作しています!
今後は、ここに記事一覧などを表示できれば良さそうですね。
第2回へつづく!
今回は、連載「Python Responder + Firestore で、モダンかつサーバーレスなブログシステムを作ってみる」第1回としてセットアップを中心に行いました。
次回は、「Firebase周りのセットアップと動作確認」を解説していきます。
お楽しみに!
次回の記事はこちら
こちらの記事もオススメ!
書いた人はこんな人
- 「好きを仕事にするエンジニア集団」の(株)ライトコードです!
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もり大歓迎!
また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。
以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit
- ライトコードの日常2月 29, 2024座談会はじめました!ライトコードの話ちょっと聞いてみませんか?
- ライトコードの日常12月 27, 2023年忘れ!ライトコード大忘年会2023
- ライトコードの日常12月 1, 2023ライトコードクエスト〜東京オフィス歴史編〜
- ITエンタメ10月 13, 2023Netflixの成功はレコメンドエンジン?