制作物について

ReactとDjango REST Frameworkの勉強のアウトプットとして非常に簡単なSPAを作成しました。

ソースコード
バックエンド　
https://github.com/s-amano/wishlist2
フロントエンド
https://github.com/s-amano/wishlist-frontend

アプリのURL
http://dbs94qexekbu1.cloudfront.net/
サンプルユーザーとして

アドレス：[email protected]
パスワード:sample

でログインできます。

現在無料枠を超えてしまったためインスタンスを止めております。

制作物の構成とその構成にした理由

実際に作ったアプリの全体的な構成となぜそのような構成にしたのかを述べていきたいと思います。

構成

バックエンドとフロントエンドは開発環境は独立させています。Route53での名前解決は行っておりません。

• バックエンドはDjango REST FrameworkでAPIを作成
  • こちらでCORSの設定
  • ログインなどの認証はトークン認証を使用

• フロントはcreate-react-appコマンドで開発

  • axiosでAPIを叩く

• バックエンドとフロントエンドで別々にデプロイ

  • バックエンドはAWS EC2にnginx環境を構築
  • フロントはS3をCloudFront経由でインターネット上へ公開
  • フロントはさらに、Githubのmasterブランチにプッシュすると自動でソースコードがデプロイ

構成の理由

インターンの業務でAWS lambdaでAPIを作成することがあり、その時に使用していた言語がpythonだったので、pythonで何か作るということにしました。さらに上記のAPI作成の業務によりAPIの知識もほんの少しだけあったのでこちらのアウトプットとして、Django REST Frameworkを使おうということになりました。

最初はバックエンドのみでAPIを作ってローカルで試していただけでしたが、フロントも実装してwebアプリケーションにしようと思い、ネットで調べるとreact+DjangoRestFrameworkの構成を見つけたのでその記事を参考にreact側も実装してみました。その際にUdemyの「[基礎編]React Hooks + Django REST Framework API でフルスタックWeb開発」という動画も参考にさせていただきました。

インフラについては、スタックオーバーフローなどで別々にデプロイするのがよいみたいなことが書いてあったので、別々にググりました。Reactのデプロイに参考にした記事はこちらになります。ほとんどこの通りにやりました。Djangoのデプロイはこちらの記事を参考にしました。

一通り作ってみての感想

今回作成したアプリは非常に簡単なアプリだとは思いますが、非常に時間がかかってしまいました。もちろん自分が初心者だということもあるのですが、自分が思っている以上にアプリの作成は大変なんだなと痛感しました。

ただ今回一通り作ってみて、なにか技術的な知識がついたというよりも、むしろエラーでつまづいた時にどのように解決したらいいか、どのように調べたらいいか、というようなことを多く学んだ気がします。
「エラーが起きて動かなかったときどうすればよいかの勉強」は自分で何かを作るのが一番いいんだなと思いました。

今回作ったアプリ自体にもまだまだ課題があります。例えばログインフォームのバリデーションだったり、セキュリティだったり欲しいものリストにおいて想定外の操作をされるとバグが起こったりということがあります。こちらは随時解消して行こうかと思っています。

次は、上記で述べたバグを解消したりさらに言えば、もう少し大きめの機能がたくさんあるWebアプリケーションを作ったり、チーム開発についても学んでいきたいです。