マイページ(プライベートサイト)の第三版を作ろうとしている
はじめに
2020年からスキルアップのために、個人用サイトを作り続けています。 去年の年末からその第三版を作ろうと考えて動いています。
初版(Djangoマイページ)
このマイページの開発は2020年1月22日から始まりました。
自分はこのとき神戸にいたのですが、3日前にインフルエンザにかかって苦しんでました。 幸か不幸か、そのときの経験がCOVID19対策に役立ちましたが・・・
このマイページの開発を始めたのは、仕事でDjangoを使っているが、何となく使っているのが嫌になって、 ちゃんと学ぼうと思ったのがきっかけです。最初はHerokuにデプロイする普通のWebアプリでした。
プライベートサイトなので普段できないことをいろいろ試しました。例えばカバレッジを100%にしたり。 この記事がその成果です。
そのときの技術スタックはこんな感じです。古めのフルスタックフレームワークという感じです。
- データベース: PostgreSQL
- バックエンド
- 言語: Python
- パッケージマネージャ: pip
- フレームワーク: Django
- アプリケーションサーバ: gunicorn
- リンタ: flake8
- フォーマッタ: black, isort
- 単体テスト: pytest
- カバレッジ: coverage.py, Codecov
- フロントエンド
- Djangoテンプレート
- UIkit(+ jQuery)
- Select2
- Stimulus
- 認証: Auth0
- パッケージアップデート: dependabot
- エラートラッキング: Sentry
- 開発環境: PyCharm
- CI: CircleCI
- ホスティング: Heroku
第二版(Docker Composeマイページ)
2021年末にいろいろあってチームを抜け、2022年初頭に二週間休職しました。 (経緯は過去の記事にも書きました)
そのときに新しく取り入れたのがいくつかあります。
- 脱Herokuとマルチコンテナ化
- React、GraphQLの採用
- Terraformの採用
HerokuがPostgreSQLの料金までかかるようになったので、まずHerokuからAWS Lightsailに移行しました。 最終的にはConoHa VPSに移行しています。 それからDjangoのコンテナ化に取り組み、そのあとDocker Composeによるマルチコンテナ化に取り組みました。 非同期実行のためにタスクキューとしてRedis、ワーカプロセスを別に設けました(Celeryも考えたんですが)。
2つ目はReact、GraphQLの採用。Djangoテンプレートだけでやってて開発効率は良かったんですが、 やっぱりテンプレートだけだと使いにくい、そこでReactを導入しました。 テンプレートベースとはいえ、コードは整理していたので比較的スムーズに進みました。 といっても最初は <script type=“text/babel”> で書く感じですが・・・
APIはRESTで書くの正直面白いと思わなかったのと、 GitHubのGraphQL APIを触って使いやすかったので面白いと思って採用しました。 バックエンドはPythonのままで、最初はGrapheneを検討していたのですが、当時開発が停滞していたので、 最終的にStrawberryに落ち着きました。
3つ目はTerraformの採用。 AnsibleとDockerは使えたんですが、インフラ構築にTerraformを使う例が社内で多く、せっかくなのでと学んでみました。 VPSなのでインスタンスの設定には使いづらい(一応ConoHa VPSではOpenStackのAPIが使えるけど)んですが、 Google Cloud DNSの設定とか重宝しています。
そのときの技術スタックはこんな感じです。 以前はwebpackを使ってたんですが、設定が辛かったのでViteを採用したり、 yarnは2以降の迷走だったのでpnpmを採用したり、なるべく自分が使ってて気持ちがいい技術を選んでいます。
- データベース: PostgreSQL
- バックエンド(テンプレート)
- 言語: Python
- パッケージマネージャ: pip
- フレームワーク: Django
- アプリケーションサーバ: gunicorn
- リンタ: flake8
- フォーマッタ: black, isort
- 単体テスト: pytest
- カバレッジ: coverage.py, Codecov
- バックエンド(API)
- フレームワーク: Strawberry GraphQL
- フロントエンド(Djangoテンプレート)
- 言語: JavaScript
- UIライブラリ
- UIkit(+ jQuery)
- Select2
- Stimulus
- フロントエンド(SPA)
- 言語: TypeScript
- パッケージマネージャ: pnpm
- バンドラ: Vite
- リンタ: ESLint
- フォーマッタ: Prettier, sort-package-json
- 単体テスト: Vitest
- UIライブラリ
- React
- Tailwind CSS
- tom-select(Select2の代わり)
- 認証: Auth0
- リバースプロキシ: Nginx
- タスクキュー: Redis
- ワーカ: Python
- スケジューラ: cron → ofelia
- パッケージアップデート:
dependabot, Renovate - エラートラッキング: Sentry
- 開発環境: PyCharm, VS Code
- CI: CircleCI, GitHub Actions
- ホスティング:
Heroku→ Lightsail → ConoHa VPS
第三版(コードネーム: labo)
第二版で一応SPAらしき環境ができて、今でも運用しているのですが、 仕事で使っている技術が変わってきたので、だんだんメンテするのが辛くなってきました。 VercelとかFirebaseとかいろいろ試したんですが、一旦VPSで行こうということで、 別途ConoHa VPSを借りて作り始めています。
まだ構築中なのですが、技術スタックを大きく変えています。
- バックエンド: Pothos
- フロントエンド: Solid
- リバースプロキシ: Traefik
- 継続的デプロイの採用: GitHub Actions + Ansible
- Docker Compose V2の採用(Compose Watchなど)
このうちPothos, Solidは仕事(社内システム)で使っている技術ですが、 最初の方に開発環境を整備してから開発しているので、かなり気持ちよく開発できています。 この方向性をもっと突き詰めたいなと。
改めて「ちょうぜつソフトウェア設計入門」を読み直してみた→