ブログのデザインを更新しました!

Created 2020年7月5日16:27
Updated 2020年10月3日1:19
Categories Django 自宅サーバー vue

このたび、ブログのデザインを大幅に更新しました!

今まで使っていたDjangoのテンプレートエンジン + Bootstrapから脱却し、Vue + VuetifyのSPA構築に変更しています。

旧ページから見ていただいている方は、是非上部に出ている黄色のアラート(新UIの方では見えていません)からアクセスしてみてください!

刷新した経緯

個人的には旧UIも結構気に入っていたのですが、以下の理由から移行を決めました。

  • Vuetifyかっこよすぎる
  • UIとAPIを分けたかった(保守・更新がめっちゃ楽になる)
  • 動的なサイトはテンプレートエンジンだとちょっと難しい

というか根も葉もない話をしてしまうと、今どきのいけてる感じにUIを作り替えたかっただけです…

構成

当ブログは自宅サーバーのDocker Swarmクラスタ上で運用されており、これまでDjango単体でサービスを運用していました。

それが、↓こんな感じに変わった形になります。

バックエンドとフロントエンドが分かれたのが今回の大きな方針ですね。

Django Rest FrameworkでAPIを提供して、あとはVueの世界でUIを全て完結させています。

どの処理系も非常に強力で少ないコードで実装できるため、保守が楽なのが大変良さがあります。

この前Docker Swarmのローリングアップデートをちゃんと設定したので、サービスを落とさず更新できたのも個人的には嬉しいポイントでした。

移行時たいへんだったこと

フロントエンドはSPAなのですが、SEOや記事の共有時にリンクがないと困りますよね。

そこで、Vue Routerで疑似的なルーティングを行い、SPAながらもURLでアプリの状態管理を行うように設定を行っています。

例えば、https://blog.sakaki333.com/ui/post/detail/107のURLは本来は存在しませんが、Vue Routerが /ui/post/detail/107 のパスから情報をゲットして、表示すべき記事を取得することができます。

Vue Router何に使うのかいまいちピンと来てなかったのですが、こういった使い方は非常に便利ですね。

また、CORSやCORBの問題を防ぐため、同じドメインにデプロイするのも結構苦労しました…

当ドメインはルーティングやパスの問題をできるだけ避けるため、基本的にサービスごとにサブドメインを切る方針なのですが、ドメインが変わってしまうとAPIにアクセスできなくなるため頑張って設定を行いました。つらかった…

あとがき

当ブログの初期バージョンは2日ほどで作成しましたが、今回の新UIの更新はそれ以上に時間がかかってしまいました。

新UIにもまだまだ問題がたくさんありますので、今後もちょいちょい更新していこうと思っています。

コメントを投稿

コメント