snovaのブログ

主にプログラミングやデジタルコンテンツについて書きます。最近はPython, Flutter, VRに興味があります。

Next.js + Cloudflare Pages でポートフォリオを作成

はじめに

これまで、アプリ情報サイトやポートフォリオGithub pagesで公開していましたが、よりカスタマイズされたサイトを製作したいと思い、静的サイトジェネレータ(SSG)とホスティングサービスを使ってwebサイトを作りました。

まだ完成していませんが、デプロイまでできたので、一旦ブログでまとめます。

目次

技術選定

今回は静的なサイトを構築できるSSGを選択していますが、そもそも、CMSではなくSSGを選択した理由について、

  • コスト削減
  • 管理工数やセキュリティリスクの低減
  • 高速な表示

これを踏まえて、SSGとホスティングサービスを選定しました。

SSGの選定

SSG自体は基本的な機能が揃っていて、無料(できればライセンスのゆるいOSS)であれば、特にこだわりがなかったので、Githubで人気だったNext.jsを選択しました。

ホスティングサービスの選定

前提として、信頼性が比較的高く、まずは無料で使えるサービスを検討しました。 最終的には、Netlify, Vercel, Cloudflare Pages, Firebase Hostingの中から選ぶことになりましたが、以下の理由からCloudflare Pagesを選定しました。

  • Netlify : 通常プランは初回読み込みが遅い
  • Firebase Hosting : 単にホスティングするには機能が多すぎる&無料枠の制限が厳しい
  • Vercel : 無料プランはNon-commercial専用(今のところ、広告の貼付やオンラインビジネスを行う予定はありませんが、今後のことも考えて)
  • Cloudflare Pages : 転送量が無制限で、初回読み込みも高速、商用利用可能

はじめはNetlifyを使用していましたが、テストで作った簡単なページの表示が数秒以上かかったので、やめました。 調べてみると、どうやら通常プランでは日本リージョンが無いため、遅くなっているようです。

answers.netlify.com

開発環境

Node.js環境はすでに構築済です。

Next.jsの導入とチュートリアル

導入は以下のコマンドを入力するだけです。

npx create-next-app@latest

まずは、Next.jsに慣れるため、公式チュートリアルをしました。

nextjs.org

すべて一通り実施できたら、markdownでブログを作ることができるレベルまで上達します。 わからないことは公式ドキュメントで調べます。

nextjs.org

vscodeの設定

vscodeで開発を進める場合、ESlintの設定を行います。

eslint.org

プロジェクトのルートで

./node_modules/.bin/eslint --init

.eslintrc.jsonの中に"extends": "next/core-web-vitals"を追記します。 以下は一例です。

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "next/core-web-vitals"],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {}
}

Next.jsでサイト構築

公式チュートリアルを実施していれば、ある程度できるようになっています。 作成する上で悩んだ点をまとめます。

Vercelを使わない場合、画像の最適化は別のloaderを使うかimgタグを使う

デフォルトのloaderではVercel以外では使えないみたいなので、imgix等のloaderを使用しなければいけません。

nextjs.org

もしくは、最適化はできないけど、imgタグを使って画像を表示することもできます。

<img src="/images/profile.jpg" height={108} />

markdownのパース

markdownのパースにはremarkを採用し、プラグインとしてremark-html, remark-image, remark-gfmを使いました。

github.com

以下は使用例。

import { remark } from "remark";
import html from "remark-html";
import remarkImages from "remark-images";
import remarkGfm from "remark-gfm";

const processedContent = await remark()
  .use(html, { sanitize: false })
  .use(remarkGfm)
  .use(remarkImages)
  .process(data);
const contentHtml = processedContent.toString();

デプロイ準備

npx next buildnpx next exportを実施し、問題が発生しないか確認します。 静的HTMLのexportは画像最適化等がexportに対応していないので、注意が必要です。

nextjs.org

Cloudflare Pagesの始め方

サインアップ

公式サイトからサインアップします。

www.cloudflare.com

Githubアカウントと連携しデプロイ

ダッシュボードからPagesへ飛び、プロジェクトを作成します。

Githubアカウントと連携し、リポジトリを選択します。

ビルドの設定ではフレームワークにNext.jsを選択します。 必要に応じて、環境変数を設定できます。

保存するとデプロイが開始され、完了したら、公開アドレスが表示されます。

また、以後はリポジトリに変更がpublishされる度に、ビルドを行います。

カスタムドメイン

Google Domainsを使ったカスタムドメインの設定です。

Cloudflare Pagesのプロジェクトの中からカスタムドメインを設定します。

Cloudflare Pagesに記載された名前とターゲットをGoogle DomainsのDNS > カスタムレコード(CNAME)のホスト名とデータに書きます。

Google Domains側で保存できたら、Cloudflare Pages側からDNSレコードを確認します。 完了後、新しいサブドメインを使うことができます。

おわりに

普段、JavascriptやReactを使わないので、やや難しく感じる部分がありましたが、少ないコードで静的サイトを構築することができました。

まだまだ甘い部分もあるので、これからきれいにしていきたいと思います。

自分のドメインを取得した話

きっかけ

数年前に自分のドメインを取得していましたが、特に使うことがなかったので、やめてしまいました。

しかし、最近になって以下の問題からドメインを取得することになりました。

  • アプリ用のサポートサイトをGithub Pages(username.github.ioドメイン)で公開していたが、他人のドメインなので信用がなく、決済プラットフォームの審査に落ちた
  • アプリ公開時のメールアドレスに自分のGmailが公開されるのは抵抗があった
  • いろんな人の記事を見ていて、自分のドメインが欲しくなった

そこで、今回はドメインの取得についてのメモをまとめました。

目次

ドメインの取得

まずはドメインを検索します。 いろいろなサービスがありますが、私は以下の理由からGoogle Domainsを選択しました。

  • オプションも含め更新時のトータル費用が安い(新規取得は他サービスのほうが安いが、長期的に使用することを考えたら...)
  • Google Cloud系のサービスを使っている
  • Googleなのでセキュリティ面は比較的信頼できる
  • 管理画面がシンプルで見やすい
  • 以前、とあるドメインサービスを使っていたが、スパム並みにメールが来ていたのが嫌だった

domains.google

お気に入りのドメインを検索して購入。 年間1400円なので、あまり気にしなくていい金額です。

必要項目を入力し問題なければ、登録完了メールが届きます。

メールの転送設定

カスタムドメインのメールを自分のGmailで受信

カスタムドメインのメールを自分のGmailで受信する場合の設定方法について。 Google Domains > メールアドレス > メール転送 > メールエイリアスの追加 で新しいカスタムドメインのメールアドレスと転送先のGmailアドレスを設定すれば完了。

カスタムドメインのメールを自分のGmailから送信

Gmailエイリアスを使ってカスタムドメインからメールを送信する場合の設定方法は公式サイトの通りに進めるとできます。

support.google.com

Googleアカウントの2段階設定を行い、アカウント > セキュリティからアプリパスワードの設定を開始します。

「アプリを選択」の項目はメール、「デバイスを選択」の項目はその他にして、「名前」はわかりやすい名前にします。

生成したら、パスワードを暗記します。

ここから、Gmailの設定。 設定 > アカウントとインポート > 名前にある他のメールアドレスを追加をクリックします。

カスタムドメインのメールアドレスと表示名を入力します。 「SMTPサーバー」はsmtp.gmail.com、「ポート」は587、「ユーザー名」はGoogleアカウントのログインユーザー名、「パスワード」はGoogleアカウントのアプリのパスワードで設定した16文字のパスワードを入力し、アカウントを追加します。

メールがカスタムドメインのアドレスに送られるので、リンクをクリックします。 テストのため、適当なメールを自分のGmail宛てに送信して、問題なければ完了です。

Firebase hostingのカスタムドメイン設定

実験としてFirebase hostingのカスタムドメイン設定をします。

Google Domainsからカスタムレコードへ移動し、「タイプ」にCNAME、「TTL」に3600、「データ」に現在のURLを入力します。

保存したら、Firebase hostingに移動し、カスタムドメインを追加します。

最大24時間待って、アクセスできたら完了です。

今後について

自分のドメインが獲得できたので、ホスティングサイトでカスタムドメインを設定しようと思います。 webアプリや新しくブログを公開するのもいいですね。

Zennで本を書いてみた

はじめに

以前、Flutter x Firebaseでカウンターアプリを作成する記事を公開しました。

snova301.hatenablog.com

内容は基本的なものばかりでしたが、それでもそこそこのボリュームになりました。

十数日間かけて書いたシリーズなので、記事をもう少し体系的にまとめてみようと思い、zennで本にして公開しました。 無料です。

zenn.dev

作成した感想

  • もともと作っていた記事があったので、執筆自体はそんなに大変ではなかった
  • はてなブログ独自の記法を使用している部分をzennの形式に変更するのが少し面倒だった
  • zennのエディタについては、ダークモードにしたり、エディタとプレビューを同時に表示してくれるなら、使いやすいと感じた
  • デザインは自動でいい感じにしてくれるので、気にしなくていい
  • 有料設定やバッジなどがあるので、励みになる
  • 表紙を作るのは意外と難しい。世の中の表紙絵を書く人はすごいなと思った

結論

今後もシリーズ物を書いたらzennの本にまとめようと思います。

Google Play and the Google Play logo are trademarks of Google LLC.