前編の記事では、リニューアル経緯や新機能の紹介を主にしました。後編ではSUMUMAで使われている技術の知識や、開発環境などについて紹介していきます。
技術知識や開発ノウハウのインプットとしてや、これから個人開発を考えている方など多くの方の役立てたらと思います。
前編をまだお読みになっていない方は、ぜひご覧ください！
(前編) 運営している家計簿サービスに新機能を搭載して大幅リニューアルしました
前編で既に紹介済みですが、もう一度SUMUMAのリンクを共有させていただきます。
SUMUMA開発の技術スタック
SUMUMA実行環境
SUMUMAは前身であったDAIFUKU時代からDjangoで開発されています。UIについては元々Semantic UIで実装していたのですが、途中からTailwind CSSへと移行しました。
サーバーはConoHa VPSを使用しており、Djangoの実行環境は自前で構築しています。以前noteにて手順を公開していたので、同じ通りに環境を立ち上げました。
ConoHaはVPSサーバーだけでなく、メールサーバー、DBサーバーなども揃っています。どれもコスパが良くレンタルしやすいので、非常におすすめなホスティングです。UIも優れていてスマホアプリもあるところが非常にいいです。
開発環境
エディタはJetBrainsのPyCharmを使っています。PyCharmは有料のProfessional版と無料のCommunity版があるのですが、ウェブ開発やPythonウェブフレームワークをサポートしているProfessional版を購入して使用しました。
PyCharmであれば、Djangoなどのウェブフレームワークを簡単に実行する環境やPython Console、Djangoの管理コマンド実行環境まで開発を快適に進めるための機能が多く揃っています。
CI/CDはGitHub Actionsを使用し、開発体験も向上させています。
これまでデプロイはファイル共有ソフトを使って作業をしていました。エンジニアたるものけしからんですが、自動化ができていませんでした。今回はリニューアルと同時に自動デプロイの仕組みを構築したので、わざわざサーバーにファイルをアップロードしなくてもmainブランチにマージを行えば自動でアップロードできます。デプロイにはGitHub Actionsを使っており、デプロイ後のmigrateやcollectstatic実行からミドルウェアの再起動までも自動で行うようにしています。
これにより、大きな修正も軽微な修正も比較的迅速に安全にデプロイすることができるようになりました。
開発Tips
今回のリニューアルでは、長期的な開発コストを下げることと、メンテナンス性の向上も焦点に開発をしました。これまでは、ソースコードのデプロイが自動化されていなかったことや、可読性の低いコードを書いてしまっていたことで開発体験を損なっていました。開発体験の低下は開発への意欲を下げ、コストの増加にもつながってしまいます。
SUMUMAになってから新しく導入したサードパーティや機能がいくつかあります。その他にも知っておくと便利なパッケージもあるので、SUMUMAで使われているものの一部をご紹介します。
Poetry
Pythonのパッケージ管理はpipが一般的だったのですが、最近はPoetryというパッケージ管理がよく使われるようになってきました。pipはパッケージの依存関係が維持できなくバージョン更新時にエラーが発生するということが起きやすかったのですが、Poetryは依存関係を考慮してくれるため、バージョンアップによるエラー発生を抑えることができます。
キャッシュ
Djangoは独自のキャッシュ機構を備えており、RedisやMemcachedと連携させることもできますが、データベースにページのキャッシュをすることもできます。
SUMUMAではサイトのトップページとLPでキャッシュを使用しており、データベースに保存しています。
設定方法
キャッシュをDjangoが使用するデータベースに保存する場合は、settings.pyにキャッシュの設定と、下に続くコマンドで作成が可能です。
CACHES = {
'default': {
'BACKEND': 'django.core.cache.backends.db.DatabaseCache',
'LOCATION': 'cache_table',
}
}
python manage.py createcachetable
実装の仕方
特定のページ
一部のページをキャッシュする場合は、urls.pyのパスにcache_page()を追加することで可能になります。
from django.views.decorators.cache import
urlpatterns = [
path('', cache_page(60 * 15)(views.Top.as_view()), name='top'),
]
Djangoプロジェクト全体やテンプレートの一部だけをキャッシュすることもできます。
詳細はDjangoの公式サイトをご覧ください。
DjangoでTailwind CSSを使う方法
DjangoプロジェクトでTailwind CSSを使用するのに、非常に利便性の高いパッケージがあります。
django-tailwindというもので、Tailwind CSSの環境を簡単に用意することができます。
インストール後の設定も簡単で扱いやすい印象でした。
デザイン実装
画面を実装していく際に、どういったデザインにするか悩ましい種でもあります。個人開発ではなおさらではないでしょうか。
SUMUMAでは何度かお伝えしている通り、Tailwind CSSを採用しています。Tailwind CSSは最近ホットなCSSフレームワークの一つでもあるので、調べると参考になりそうなサイトやテンプレートデザインが豊富に出てきます。
実際に参考にしていたサイトをご紹介します。
-
tailwindcss
- Tailwind CSSの書き方を調べることができます
-
Tailwind Toolbox
- テンプレートデザインやコンポーネント化されたデザインを参考にできます
環境変数
どのプロジェクトにもよくあることだと思いますが、git管理をしたくないようなシークレットな情報があります。そういった場合、Djangoにはdjango-environというシークレット情報を環境変数として管理できるパッケージがあります。
Notionの活用
お知らせページについては、Djangoプロジェクトに持たせずNotionで管理することにしました。
利用規約やプライバシーポリシーなどもNotionで管理することで、開発コストを極力抑えられるようになっています。
まとめ
以上で、前編と後編に分けてリニューアルしたSUMUMAをご紹介してきました。
ただの家計簿で終わらせない、家計簿をもっと賢く美しくというスローガンでまだまだ開発を続けていく所存ですので、どうぞよろしくお願いします。
Twitterにてお知らせを随時告知しているので、ぜひフォローをよろしくお願いします！
SUMUMA 公式Twitterアカウント
最後までご覧いただきありがとうございました