あすたぴ.dev

【無料】Nuxt(SSR) + TypeScript + Firebase でブログを作った

プログラミング
Vue
Nuxt
2019/05/06 05:40:08

タイトルの通りこのブログを作成しました。

ざっくりの構成

  • Nuxt を TypeScript で記述し ユニバーサルモードでSSR

  • es-lint で TypeScript をチェック

  • tiptap というライブラリでエディタを作成し、記事を

  • 管理用のページはFirebase Authenticationで認証している

  • Herokuでホスティング

  • CDNにCloudFlare

  • SSRをしているので html 込みで CDNにキャッシュさせている

アーキテクチャ

CloudFlareを前段に置きバックエンドとしてHerokuを設定しています。

NuxtのホスティングはNetlify等の静的ホスティングサイトがメジャーかと思われますが、SSRをする為にはNodeを実行できるホスティングが必要です。
今回はSSRをできるホスティングとしてHerokuを選択しました。

Herokuは一定時間アクセスがないとインスタンスがスリープしてしまい、アクセスの際に起動するため非常に多くの時間がかかります。
今回はそれの解決の為、またSSRで生成したHTMLのレスポンスをキャッシュさせる為の選択肢としてCDNのCloudFlareを設定しています。
(現在キャッシュの有効時間は短くしているので、アクセスがなかったときの挙動は遅い状態ではあります。)
またHerokuは独自ドメインを利用しようとした場合にDNSのサービスを有料で利用する必要がありますが、CloudFlareは1サイトならば無料で利用でき、ドメイン設定、SSL設定もすることが出来ます。
キャッシュ時間を長くすればコスト面でも性能面でも非常にコスパのよい構成です。

管理画面

今回、ブログ記事を表示するフロントと記事を入稿する管理画面を1プロジェクトで作成しています。
/admin 配下が管理画面ですが、Firebase Authenticationで認証しています。
認証できるユーザー情報はFirebaseのコンソールから直に入力しておりユーザー作成等の機能は持たせていません。

デザイン

今回は機能面の作成を重視した為、テンプレートをコピペして調整した程度です。
今後、機能と記事の拡充と共にデザインも変えていこうと考えています。

Copyright © astapi