マイページ(プライベートサイト)の第三版を作ろうとしている

投稿日:

はじめに

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は仕事(社内システム)で使っている技術ですが、 最初の方に開発環境を整備してから開発しているので、かなり気持ちよく開発できています。 この方向性をもっと突き詰めたいなと。

次の記事:
←SolidJS + GraphQLのサンプルコードを作成した
前の記事:
改めて「ちょうぜつソフトウェア設計入門」を読み直してみた→