Frozen-Flask(python) + GAE +microCMS でJamstackブログをつくってみた
はじめに
なぜつくったのか
日々のことや、家事育児に疲れ果てた愚痴、せっかく勉強したのに仕事に役に立たなかったこと、家庭と仕事の合間を縫って工夫する趣味、のブログをなんとなく国産のヘッドレスCMSである、microCMSをつかってつらつら書いてみようと思ったのがきっかけです。
なぜ、わざわざヘッドレスCMSを使ったか、というのは、なぜと言われても、という感じ。
microCMSブログを参考に、CSR（クライアントサイドレンダリング）でなら非エンジニアでもやれるかな〜、と思いはじめました。
やってるうちに、やっぱりJamstack構成にしたくなり、がんばって構築してみました。
私は（何度も言うけど）非エンジニアなので正しいコード、正しいアーキテクチャーなのかは知りません。
このブログの構成まんまだけど、とりあえず見えているから、まぁいっか。
大体の構成
GoocleCloudPlatformのGoogleAppEngineで、flaskを使って、ちょっとした社内ツール用のWebアプリを作ったことがあった。（非エンジニアでも簡単なのならちょっと調べてできるからすごい時代だ。）
そのため、flask + GAEで静的サイトできないの？ということで、ちょっと調べてできそうだったので、その構成に。
flaskで作って、Frozen-flaskで静的ファイルにして、GAEでホスティング？
CloudBuildを、microCMSからの新記事公開時のWebhookをトリガーに走らせ、最新に。
ざっくりとした詳細は以下。
flask
とりあえず、flaskで動くように作る。
非エンジニアなので（何度も、、）pythonでmicroCMSのAPIを叩く方法にすら苦戦する。
ごちゃごちゃやってる途中で、X-MICROCMS-API-KEYかなんかに変わりますよ、ということになったが、めんどくさいのでそのままにしている。
import requests
API = "https://API.microcms.io/api/v1/"
endPoint="endPoint"
headers = {'X-API-KEY':"YOUR-X-API-KEY"}
res = requests.request('GET', url=API+endPoint, headers=headers)
data = res.json()
取得できたデータは、適当にがんばってhtml側に渡したり、サーバー側？でなんとかしたりして、いい感じにする。
クエリとか使うときは、endPointに、公式ドキュメント通りにパラメータ付与していけばOKっぽい。
必要なだけがんばってルーティングする。
ルーティングのとき、URLの最後に ” / ” をつけておかないと、Frozen-Flaskで静的ファイルにしたときのGAEでのルーティングがうまくいかなかった。
@app.route('/lang/<lang>/tag/<tag>/article/<id>/', methods=['GET'])
def article(lang,tag,id):Frozen-Flask
ここに書いてあるとおりにしておけば静的ファイルにすること自体は問題ない。
Frozen-Flaskによる静的サイト生成
上述の通り、ルーティングするURLの最後に” / ” をつけると、すべてのファイルが " index.html " になった。
よくわからない。いろいろ試してみたけど、結局 " .html "じゃないとだめだったので、まぁなんでもいっか、ということにした。非エンジニアなので、よいのだ。
Google App Engine
いろいろ調べたのでよく覚えていないが、だいたいここに書いてあるとおりにすればよいが
GAE で独自ドメインのSSL静的ウェブサイトを無料でホストする
リクエストURLが " / " で終わっている際にhtmlを返せない件は、ここに書いてあった。
静的サイトホスティングの為のGCS/GAE/Firebase Hosting比較
Cloud Source Repositories
静的サイトを構築するには、新記事公開時に、ＣＩを回さないといけないが
非エンジニアなので、githubのアカウントを持っていないので以下の記事を参考にGCP内にリポジトリを作った。
GCP Cloud Source Repositoriesを利用する手順のメモ
ちなみに、ローカルでの開発は、すべてGCP内のCloud Shellで行っている。
Cloud Build
Cloud Buildの使い方は、以下の記事を参考にした。
GCP Cloud Build の基礎からの説明 & CI/CD 実践
いくつか手間取ったが、最終的に以下のようなcloudbuild.yamlになった。
steps:
- name: python
entrypoint: pip3
args: ["install", "frozen-flask", "requests", "--user"]
- name: python
entrypoint: python3
args: ["freeze.py"]
- name: gcr.io/cloud-builders/gcloud
entrypoint: gcloud
args: ["app", "deploy", "app.yaml", "--project=YOUT-PROJECT", "--quiet"]
pipでinstallするときに、" --user " でしないといけないのに手間取った。
CloudShellでやるときは、" sudo " でやらないといけなかったので。よくわからん。
app deploy の時は、" --quiet " にしないと、y/n?で聞かれてだめっぽい。上記サイトに書いてある通り。
ちなみに、アカウント権限周りで、はまってしまったが以下の記事で解決した。
Cloud BuildでApp EngineにデプロイしようとしたらPERMISSION_DENIED
まとめ
以上、こんな感じだが、誰かの参考になったりするのかしら。
何のためにこんなことしたか、というとあまり意味はないだろうな。
おかしなところ、やばいところ、あるのならだれかに教えてもらいたい。
