個人開発として、Djangoを利用したwebアプリを作成したので、その技術的振り返りと、学んだ技術的ノウハウと今後の展望をまとめます。
✔︎本記事の目次
■1.はじめに
CRUD機能のついたWebサイトの個人での制作経験がなかったため、技術力の向上を目的に、ポートフォリオサイトの制作を行いました。そこで自分の体験をもとに、その悩みを解決するようなwebアプリを開発しようと考え、台湾留学を支援するwebアプリを開発するに至りました。
開発期間としては、2022/9~2022/12の約3ヶ月です。
■2.開発環境
開発環境は以下の通りです。
- MacBook Pro 16-inch, 2019
- Visual Studio Code 2
- Django 4.1
- psycopg2-binary
- python-dotenv
- AWS(EC2)
- nginx
- gunicorn
- postgreSQL
- djangorestframework 3.14.0
- bootstrap
■3.システムアーキテクチャ
システムアーキテクチャは下記の通りです。
□Django
今回はフレームワークとして、Djanoを使用しました。理由としては、①pythonを使って制作物を作りたかった②adminページがデフォルトでついている&ログイン機能の実装のし易さ③MVCモデルによる開発効率の高さなどがあります。
また、今回の制作物がdjangoを使っての初めての開発でしたが、フレームワークの便利さを改めて感じました。
□AWS(EC2)
①EC2では必要なリソースだけを利用し、コストを抑えることができることができる②高い可用性とセキュリティを提供することができるという利点があります。
ドメインの取得などもAWSを利用して、取得しました。
□Nginx(Web server)
Nginx(エンジンエックス)は、高パフォーマンスなWebサーバー・リバースプロキシサーバー・メールプロキシサーバーとして広く使われているオープンソースのソフトウェアです。
高速なリバースプロキシサーバーであり、静的ファイルの配信や負荷分散としての役割をになってくれるため採用しました。
□gunicorn(WSGI server)
web applicatoin serverとして、gunicornを使用しました。
理由としては、Djangoアプリケーションを実行するための高速なサーバーであり、高負荷下でも安定して動作することができるからです。
Gunicornは、Nginxなどのリバースプロキシサーバーと組み合わせることができ、リクエストを複数のワーカープロセスに分散することができる。これにより、高い負荷下でも高速で安定したWebサービスを提供することができる。という特徴があります。
□PostgreSQL(DB server)
PostgreSQLを使用した理由としては、Djangoがデフォルトでサポートするデータベース管理システムであり、複数のテーブルを扱う場合や大量のデータを扱う場合でも高速かつ安定して動作することができるからです。
下記がER図になります。
※文字が小さくなっているため、拡大してご覧ください
■4.機能一覧
今回の開発で実装した機能をまとめます。
詳細に書くと長々となってしまうので、端的に書いていきます。
実装機能一覧
- ユーザー登録、ログイン,ログアウト機能
- 大学検索機能
- プロフィール編集機能
- 就活状況登録、削除、編集機能
- 留学情報登録、削除、編集機能
- 留学情報検索機能
- リアルタイムチャット機能
- フォロー機能
- 質問作成、回答、ベストアンサー機能
- 質問検索機能
- 大学の口コミ作成機能
■5.技術的課題
開発を進めていく中でいくつかの技術的課題に直面しました。
それは、非同期でのチャット機能の実装です。
非同期でのチャット機能は実装できたのですが、どのようにして同期されたチャット機能に実装するのか思いつきませんでした。
また、具体的な技術的課題は下記の通り。
- 1.リアルタイム性の確保
- 2.ユーザー認証とセキュリティ
□リアルタイム性の確保
同期チャットでは、送信したメッセージが瞬時に相手に届く必要があります。このため、リアルタイム性を確保することが必要。
□ユーザー認証とセキュリティ
同期チャットでは、個人情報や重要な情報を扱うため、ユーザー認証とセキュリティが重要です。サーバー側でのセッション管理やSSL/TLSなどの暗号化技術を使用して、安全性を確保することが必要。
■6.技術的解決策
技術的課題に対しては、それぞれ下記のように対応しました。
- 1.リアルタイム性の確保: Ajaxによる非同期通信
- 2.ユーザー認証とセキュリティ: SSL/TLSによる暗号化
□Ajaxによる非同期通信
メッセージ送信ボタンが押された際に下記の3ステップを実行することで非同期によるメッセージ送信を実現しました。
メッセージ送信
- 1.AjaxのPostメソッドでDjangoのURLパターン(/api/messages)を呼び出し
- 2.UpdateMessageクラスのpostメソッドが実行され、送信されたメッセージのデータをMessagesテーブルに登録
- 3.チャット画面で送信したメッセージを自分の画面上に非同期で追加
また、同じように下記のステップで非同期によるメッセージ受信を実現しました。
メッセージ受信
- 1.自分宛のメッセージを受信する処理(receive関数)を定期実行
- 2.receive関数内でajaxのgetメソッドを使いURLパターン(/api/messages/)をCALL
- 3.UpdateMessageクラスビューのgetメソッドを実行
- 4.自分宛の新規メッセージを取得してテンプレートにレンダリング(非同時処理)
□SSL/TLSによる暗号化
SSL/TLS(Secure Sockets Layer/Transport Layer Security)は、通信においてデータの暗号化と認証を行うためのプロトコルです。
AWS Certificate Managerを使用することで、SSL/TLS証明書を取得し実装しました。
と言いたいところでしたが、そこの設定で少々手こずっており、現在もSSL化に向けて取り組み中です。
■7.改善点
今回の開発を通して、いくつかの改善点がありました。
改善点
- 1.CI/CDを使用しなかったことによる効率の低下
- 2.計画的な開発フロー
□CI/CDを使用しなかったことによる効率の低下
今回の開発ではCI/CDのツールを使用しませんでした。それも、この開発を始めた時にCI/CDというもの自体知らなかったためです。
CI/CDツールを使えば、もっと楽にビルド・テスト・デプロイができ、開発効率を高めることができたのではないかと思います。現在、GitHubActionを導入すべく開発をしています。
□計画的な開発フロー
初めての個人開発ということもあり、開発の流れの実態がわからないまま、作りながら考えるというところが多々ありました。
やはり、設計→開発→テスト→デプロイというように、それぞれの段階を踏んでから次に進むようにしたほうが、効率もよく、またシステム設計の面においてもよかったなと感じています。
■8.今後の展望
今回の開発を通して、さまざなことを学ぶことができました。
自分の足りないところやできるようになったこと、いろいろありますが、デプロイまで1人でできたということは自分にとって自信になりました。
現在も長期インターンに参加していますが、そこで出会った新しい技術や手法を自分で復習し、自分のものにできるように努めていきます。
この記事を読んでくださりありがとうございました!