本日は学校の授業"WEBプログラミング"で作成したSNSについて紹介ついでにアウトプットしようと思います！(いろいろあって1日(10時間くらい)徹夜で完成させたものなのであまり機能はないですが...)
他の人が作成していたものが、CUIでのオセロやゲームのキャラクターのDPS計算であったり、GUIでのBMI計算・グラフ表示、自動トレーニングメニュー作成などをでしたので、Web通信系は誰もやっていなさそうだったのでWebAPIの学習やフロントエンドの学習もできると思い、SNSを作成しようと思いました。
今回作成したもののシステム構成図は上記の図のようになっています。
内容を投稿した際のシーケンス図は以下のようになっています。
A.HttpSecurity#addFilterBeforeに自作クラスを追加すればよかった
今回はFirebaseAuhenticationFilterクラスを実装してfilterに追加して解決した。
今回書いた実装は以下のGithubGistに投稿してるので詳しくはそれを見てください↓
FirebaseのJWTを用いたAPI認証
前にNuxt.jsでVue.jsは触ったことがあったので、後は配置を思い浮かべながらコンポーネントを追加していくだけだったので案外いけた。
というか、適当に置いただけでもいい感じなUIになるのめちゃくちゃよかった
今後も使っていくと思う。
A. proxy_pass http://hoge:8080/; と設定すると/apiが消される
解決方法は proxy_pass http://hoge:8080;と設定する。
そうすると/api/hogeでアクセスした際にバックエンド側にも/api/hogeと送られる。一夜漬けで完成させた割にはかなりいい出来になったと自負してます
次回からは期限には余裕をもって完成させます.......
でもかなり形にはなって実際にdokcer-compose upするだけですべてのサービスが起動するのでサーバーを移行するのも容易そうでいい感じにできました。
後はかなり急いで作ったのでセキュリティ面も強化したいなと思いました。
今回使った技術が「SpringBoot,Vuetify, Docker, Firebase, Nginx....」など様々なものを組み合わせてSNSを作れたのでいい経験になりました。
今回は単独での作成となったので次回は友人などにも教えながらチーム開発ができるといいなぁ、、、とも思いながらこれからも頑張ってプログラミングなどを学んでいきたいと思います！！！記事を見てくださってありがとうございました。
今回作成したものはGithubに上げているので興味がある方はそちらも見てみてください。
https://github.com/naoido/echoe-sns
なぜSNSを作ったかの背景
今回の授業の課題は自分でJavaを使って作るものを決め、それを提出するというものでした。他の人が作成していたものが、CUIでのオセロやゲームのキャラクターのDPS計算であったり、GUIでのBMI計算・グラフ表示、自動トレーニングメニュー作成などをでしたので、Web通信系は誰もやっていなさそうだったのでWebAPIの学習やフロントエンドの学習もできると思い、SNSを作成しようと思いました。
Echoeの名前の由来
当初は音声メインのsnsを作成しようと思っていました。なので、こだまを意味するEcho(エコー)と音声SNSということでの声、それらを合わせてエコエ(Echoe)になりました。システム構成
今回作成したもののシステム構成図は上記の図のようになっています。
| カテゴリ | 名前 | なぜ採用したのか |
| WEBサーバー | Nginx | 静的コンテンツの処理速度が速いため。 |
| バックエンド | SpringBoot | 授業で使っている言語がJavaだったため併せて採用。 |
| フロントエンド | Vuetify | CSSを書かなくてもめちゃくちゃいい感じの デザインのサイトが作成できるため。 |
| データベース | MySQL | シンプルなユースケースでのスピードが高速なため。 |
| 仮想化 | Docker | 開発をWindowsでし、のちにLinuxなどの サーバーへの移行が容易なため。 |
| 外部サービス | Firebase | 様々な認証方法などを想定していたためかつ、 ログイン機能の実装の工数を減らすため。 |
| Cloudflare | お手軽Ddos対策や、SSL通信を簡潔に行うため。 |
実際の動き
内容を投稿した際のシーケンス図は以下のようになっています。
制作で難しかった点
1. SpringBootでRestAPIの認証でFirebaseAuthenticationを使う方法があまり見つからなかった
Q. どうやって解決したかA.HttpSecurity#addFilterBeforeに自作クラスを追加すればよかった
今回はFirebaseAuhenticationFilterクラスを実装してfilterに追加して解決した。
今回書いた実装は以下のGithubGistに投稿してるので詳しくはそれを見てください↓
FirebaseのJWTを用いたAPI認証
2. 初めてのVuetifyだった
今回初めてVuetifyを触りました。前にNuxt.jsでVue.jsは触ったことがあったので、後は配置を思い浮かべながらコンポーネントを追加していくだけだったので案外いけた。
というか、適当に置いただけでもいい感じなUIになるのめちゃくちゃよかった
今後も使っていくと思う。
3. Nginxでリバースプロキシを設定して/api/hogeでアクセスしたら/hogeになる
Q. なぜそうなるのかA. proxy_pass http://hoge:8080/; と設定すると/apiが消される
解決方法は proxy_pass http://hoge:8080;と設定する。
そうすると/api/hogeでアクセスした際にバックエンド側にも/api/hogeと送られる。
まとめ
次回からは期限には余裕をもって完成させます.......
でもかなり形にはなって実際にdokcer-compose upするだけですべてのサービスが起動するのでサーバーを移行するのも容易そうでいい感じにできました。
後はかなり急いで作ったのでセキュリティ面も強化したいなと思いました。
今回使った技術が「SpringBoot,Vuetify, Docker, Firebase, Nginx....」など様々なものを組み合わせてSNSを作れたのでいい経験になりました。
今回は単独での作成となったので次回は友人などにも教えながらチーム開発ができるといいなぁ、、、とも思いながらこれからも頑張ってプログラミングなどを学んでいきたいと思います！！！記事を見てくださってありがとうございました。
今回作成したものはGithubに上げているので興味がある方はそちらも見てみてください。
https://github.com/naoido/echoe-sns
