【Newt / Vercel / nuxt.js】個人開発サービスのupdateページを弱々エンジニアでも15分以内に公開する
初めまして。Kigiと申します。
個人開発者が自分のサービスを使いあってレビューを送り合うwebサービス【sougo-review】を公開しました。
サービスを作っていると、サービスの更新情報やお知らせなどの(ブログのような？)updateページが欲しくなります。
しかし、個人開発者としてはサービスに対する新機能の実装やバグの修正にリソースを割きたいのです。
まとめると、サービスのupdateページに求めるのはこんな感じです。
- 公開・管理が非常に楽(新規の記事を投稿したら自動で反映される)
- 料金はできる限りかけない。というか無料がNice to have.
- でもダサいサイトはヤダ
これらの条件を[Newt][Vercel]で実現可能でした。
作成したupdateページ
Newtとは
最近1億円の資金調達を完了させたスタートアップ企業が運営する、ヘッドレスCMSサービスです。
Newtの魅力的なポイントとして
- ドキュメント・テンプレートが豊富
- UIが洗練されており直感的な操作が可能
- 無料プランでも十分に運用可能
な点が挙げられます。
ドキュメント・テンプレートが豊富
Newtはドキュメントが非常に豊富かつ丁寧なため、ヘッドレスCSM？というような筆者でも導入が簡単にできます。
ヘッドレスCMSの解説も詳細な図もあり、非常にわかりやすいです。
UIが洗練されており直感的な操作が可能
Newtは日本製であることことや画面デザインが非常にシンプルであることから、操作に迷わずコンテンツの管理が可能です。
無料プランでも十分に運用可能
Newtには現在(2022/08)、2つのプランがあり、無料プランもあります。
結論、個人で利用する分には無料プランで十分です。
コンテンツ(記事)数は無制限、モデル数(記事のジャンル(新機能・バグ対応など)のようなもの)も無制限です。データの転送料も月100GBまで無料であり、今回の用途のようにサービスの公開を通知することや、ブログ運営・ポートフォリオに使用する場合には十分すぎると思います。
Vercelとは
Vercelとは静的サイトを公開するプラットフォームサービスです。githubと連携することで、githubの指定ブランチにプッシュ・マージがあったときに自動ビルド・デプロイするCI/CDが可能です。また無料で利用することが可能な点も採用ポイントが非常に高いです。
なぜ今回Vercelを採用したか、についてはNewtがvercelと連携することが可能なためです。例えばNewtで記事を作成して公開します。するとvercel側に通知してvercel側で再ビルド・デプロイされます。そのため一度仕組みさえ作ってしまえばサイトの管理者はコンテンツの管理のみ集中することができます。また、記事を非公開・非表示にする、記事の内容を編集した際にも自動デプロイされます。
Newtのテンプレートを使って、サービスupdateページを公開する
本題です。
まずNewtにサインアップして、スペースを作成します。スペースとは、コンテンツを管理するプロジェクトのようなものです。
作成が完了すると、スペースのダッシュボード画面に遷移するので、[Appを作成ボタン]を選択します。今回はテンプレートを使用したいので[Appテンプレート]を選択します。
選択するとテンプレート選択モーダルが表示されるので、自分の用途に最もあったテンプレートを選択します。今回はサービスのupdateページを作成したいので、Updatesを選択して、[このテンプレートを追加]を選択します。
これでNewtのAppテンプレートを追加することができました。
次にNewtが用意しているテンプレートを自分のgithubのリポジトリに用意します。
以下のページからNewtのAppで追加したテンプレートに対応するテンプレートを選択します。フレームワークとして[nuxt.js][next.js]から選択可能なので、好きな方を選択しましょう。
使用したいテンプレートのGithubボタンを選択します。するとリポジトリページに遷移します。対象のページで[Fork]を選択します。リポジトリ名などを調整して作成すると自分のリポジトリとしてコピーを作成することが可能になります。
あとはForkしたリポジトリのREADMEに記載の内容に沿ってコードを修正します。READMEも非常に丁寧に記載されていますので、この通り実施するだけで接続が確認できると思います。
次にVercelと接続します。こちらについても公式のドキュメントで丁寧に解説されていますので、手順通り実施します。
最後にNewtで記事の更新があったときに自動ビルド・デプロイが走るように設定を行います。こちらも公式のドキュメントに沿って実施するだけです。
ここまで進んだら記事を作成してみましょう。Vercel側で自動デプロイされ記事が公開されていることを確認することができると思います。ページの確認はvercelの画面のDomain項目を選択することで確認可能です。
再ビルドには少し時間がかかるので、Newtで記事を編集してから少し時間を空けてから確認しましょう。VercelのプランがFreeでも5分以内には完了していると思います。Vercel側のステータスでもビルドを確認できます。
最後に
ヘッドレスCMSは初めて利用しましたが、15分以内にサービスページを公開することができました。前述した通り直感的な操作で簡単に記事を管理できるのは強みだと思います。今回は全てテンプレートを利用しましたが、Appやwebページをカスタマイズすることで様々な面で活用が可能かと思います。
本当に簡単に自分のページを作成できますので、興味を持たれた方がいらっしゃれば利用してみてはいかがでしょうか。
Discussion