Ryo Blog
AdminPortal
← 記事一覧に戻る

開発日記 #1 - ポータル・ブログ・HTTPS化、全部やった日

はじめに

もともと美容室向けの帳票管理システムを作っていたんだけど、今日はそこから派生してサイト全体の整備に1日を費やした。

HTTPS化から始まって、最終的にはブログシステムまで作り上げるという、なかなか濃い1日だったので記録しておく。

やったこと

1. HTTPS化

chikashige-san.com にSSL証明書を導入。certbot（Let's Encrypt）で無料取得して、自動更新も設定済み。

これでようやく「安全ではないサイト」から卒業。

2. ドメインでのアクセスを修正

IPアドレス直打ちでしか表示されなかった問題を解消。原因はNginxのデフォルト設定が邪魔してただけだった。地味にハマった。

3. 日付バグの修正

請求書の開始日・終了日が1日ずれる問題。JavaScriptの toISOString() がUTC基準で日付を返すのが原因だった。ローカル日付でフォーマットするように修正。

こういう「なんか1日ズレてる」系のバグ、地味だけど信用に関わるので早めに潰せてよかった。

4. スマホ対応（レスポンシブ）

スマホで開くとサイドバーが画面全体を占拠して使い物にならなかったので、ハンバーガーメニューに変更。Tailwind CSSのレスポンシブ機能で対応。

5. サイト構成の大改造

chikashige-san.com 直下にいたのを移動。トップをポータルサイトにして、今後他のアプリも追加できる構成にした。

chikashige-san.com/ ├ / → ポータル ├ /blog → ブログ ├ /blog/admin → ブログ管理画面 └ /suzzy → Suzzy（帳票管理）

全部1つのドメイン、1つのサーバーで動いてる。

6. ポータルサイトを作成

ダークテーマでちょっとカッコいいポータルを作った。

  • 軌道を回るパーティクル
  • 光のスキャンライン
  • タイプライター風テキスト
  • セクションごとのフェードインアニメーション
  • ブログの最新記事を自動取得して表示

自己紹介、スキル、リンク、アプリ一覧を1ページにまとめた。

7. ブログシステムを構築

これがこの記事を書いている場所。Next.js + Prisma + PostgreSQL で一から作った。

閲覧側（誰でも見れる）

  • 記事一覧
  • 記事詳細（Markdownレンダリング）

管理画面（自分だけ）

  • GoogleアカウントでSSO
  • 記事の作成・編集・削除・公開/非公開切り替え

Google Cloud ConsoleでOAuth設定して、自分のGmailだけログインできるようにしてある。

8. 「危険なサイト」警告を解消

Google OAuthがテストモードのままだったせいで、Chromeに「危険なサイト」って表示されてた。本番モードに切り替えて解消。

今日使った技術

やったこと技術
HTTPS化certbot / Let's Encrypt / Nginx
スマホ対応Tailwind CSS
ポータルサイトHTML / CSS / JavaScript
ブログ構築Next.js / TypeScript / Prisma / PostgreSQL
認証NextAuth v4 / Google OAuth 2.0
インフラDocker / Nginx リバースプロキシ
バージョン管理Git / GitHub

感想

1日でHTTPS化からブログシステム構築まで完走した。AIを活用した開発のスピード感がすごい。

「とりあえず作ってみる」を地で行った1日だった。明日は機能追加に戻るかもしれないし、また別の何かを作り始めるかもしれない。