【DELOGs】は、自らの可能性を信じ最高のデジタル体験を生み出すことを目指します。
当サイトで紹介する主要な技術スタック
さくらのクラウド | Ubuntu | Nginx | Next.js | shadcn/ui | TailwindCSS
実践！
初心者プログラマーの記録
サーバ構築からWebプログラミングまで、試行錯誤しながら進めた内容を共有
We believe in our potential and aim to create exceptional digital experiences.
【DELOGs】は、自らの可能性を信じ最高のデジタル体験を生み出すことを目指します。
当サイトで紹介する主要な技術スタック
さくらのクラウド | Ubuntu | Nginx | Next.js | shadcn/ui | TailwindCSS
サーバ構築・運用
カテゴリ記事一覧「さくらのクラウド」でUbuntuサーバの構築・運用中です。これについての記録です。
新規構築
「さくらのクラウド」でUbuntuサーバの新規構築についての記録です。
Ubuntuでデフォルトで動くファイヤーウォールツールfail2banの設定をしながら、ジャーナルログについても学習
2025/6/20公開
![[サーバ構築編#12] Ubuntuでfail2banの設定](/_next/image?url=%2Farticles%2Fserver%2Ffail2ban%2Fhero-thumbnail.jpg&w=1200&q=75)
SPF・DKIM・DMARCの設定を行って外部ドメインへメール送信を可能に
2025/6/20公開
![[サーバ構築編#11] Ubuntuでメールサーバ構築-SPF・DKIM・DMARCの設定](/_next/image?url=%2Farticles%2Fserver%2Fdkim%2Fhero-thumbnail.jpg&w=1200&q=75)
PostfixとDovecotの組み合わせでメールサーバ構築。DovecotのLMTPを利用してDBでメールユーザ管理を実現
2025/6/20公開
![[サーバ構築編#10] UbuntuでPostfixとDovecotを利用してメールサーバ構築](/_next/image?url=%2Farticles%2Fserver%2Fpostfix%2Fhero-thumbnail.jpg&w=1200&q=75)
Nginxでhttp/3通信できるように設定。合わせてconfファイルのgzip 圧縮最適化も。
2025/6/20公開
![[サーバ構築編#9] Nginxでhttp/3を設定しつつ、gzip 圧縮の最適化にも対応](/_next/image?url=%2Farticles%2Fserver%2Fnginx-http3%2Fhero-thumbnail.jpg&w=1200&q=75)
NginxでBasic認証を設定できるように、apache2-utilsをインストールしてhtpasswdコマンドを利用可能に
2025/6/20公開
![[サーバ構築編#8] NginxでBasic認証を設定](/_next/image?url=%2Farticles%2Fserver%2Fhtpasswd%2Fhero-thumbnail.jpg&w=1200&q=75)
Nginx1.28.0の設定の続きです。Let's Encryptの証明書の取得とHTTPSの設定を実施
2025/6/20公開
![[サーバ構築編#7] Let's Encrypt の証明書を取得して、NginxでHTTPS を設定](/_next/image?url=%2Farticles%2Fserver%2Fcertbot%2Fhero-thumbnail.jpg&w=1200&q=75)
補足情報
サーバ構築関連の補足情報です。各ミドルウェアの選択などの参考になればと思います。
初めてUbuntuを触って、あれ？ rootは？ となったのでその辺を整理
2025/6/20公開
リポジトリやパッケージについてしっかり把握して、aptコマンドについて整理
2025/6/20公開
サーバ設定していると、sudoのパスワードを何度も入力させられるので、再入力までのリキャスト時間を延長
2025/6/20公開
![[小技]sudoのパスワード、何回入力させるのよ？！](/_next/image?url=%2Farticles%2Fserver%2Flittle-trick%2Fhero-thumbnail.jpg&w=1200&q=75)
SSH接続する際に、秘密鍵のパスフレーズを毎回入力するのは面倒という方へ、その手間を省略する方法を紹介
2025/6/20公開
Next.js関連
カテゴリ記事一覧Next.js15でshadcn/uiを用いて色々作っています。それについての記録です。
自サーバで運用するための設定
Vercelサーバではなく、自前のWebサーバで運用ためのNginxやNode、PM2の設定についての実践記録です。
SELECT系専用のリードレプリカ(スレーブ)DBとマスタDBへの接続を同居させる方法
2025/6/20公開
![[自サーバでNext.jsアプリを動かす#5]リードレプリカ(スレーブ)DBの利用](/_next/image?url=%2Farticles%2Fserver%2Fdb-replica%2Fhero-thumbnail.jpg&w=1200&q=75)
Next.jsで作成したWebサイト・アプリケーションを自サーバで運用するためのNginxのセキュリティヘッダと静的アセットのキャッシュ期間設定を実施
2025/6/20公開
![[自サーバでNext.jsアプリを動かす#4]セキュリティヘッダと静的アセットのキャッシュ期間の設定](/_next/image?url=%2Farticles%2Fnext-js%2Fnginx-header%2Fhero-thumbnail.jpg&w=1200&q=75)
キャッシュゾーンを利用してサーバ負荷を軽減しながらNext.jsで構築したWebアプリケーションを運用
2025/6/20公開
![[自サーバでNext.jsアプリを動かす#3]Nginxのキャッシュゾーン設定](/_next/image?url=%2Farticles%2Fnext-js%2Fnginx-cache%2Fhero-thumbnail.jpg&w=1200&q=75)
Next.jsで作成したWebサイト・アプリを自サーバで運用するために「PM2」というミドルウェアを利用して、快適に運用して方法のまとめ
2025/6/20公開
![[自サーバでNext.jsアプリを動かす#2]PM2を利用して、快適にNext.jsアプリを動かす](/_next/image?url=%2Farticles%2Fnext-js%2Fpm2%2Fhero-thumbnail.jpg&w=1200&q=75)
Next.jsで作成したWebサイト・アプリを自サーバのNginxで動かすための設定とデプロイ作業の整理
2025/6/20公開
![[自サーバでNext.jsアプリを動かす#1]Node.jsインストール＋Nginx設定＋デプロイ](/_next/image?url=%2Farticles%2Fnext-js%2Fnginx-setting%2Fhero-thumbnail.jpg&w=1200&q=75)
shadcn/ui関連
shadcn/ui関連の情報をまとめています。shadcn/uiはUI作成にかかっている時間の短縮には最適と思います。
これまで進めてきたログイン画面、ユーザー管理、ロール管理、サイドバー管理などをまとめ、「UIのみ版」デモを公開
2025/9/4公開
![[管理画面フォーマット制作編 #9] Shadcn/ui で作る管理画面フォーマット ─ デモ公開とカスタマイズ方法](/_next/image?url=%2Farticles%2Fnext-js%2Fdashboard-format-ui-demo%2Fhero-thumbnail.jpg&w=1200&q=75)
管理画面に「ログイン後の404ページ」と、ログイン前にユーザが管理者へ依頼できる「パスワード忘れ導線UI」を追加
2025/9/2公開
![[管理画面フォーマット制作編 #8] ログイン後404ページ + ログイン前のパスワード忘れ導線UI](/_next/image?url=%2Farticles%2Fnext-js%2Fformat-404-password-forgot%2Fhero-thumbnail.jpg&w=1200&q=75)
サイドバーに表示するメニューをUIから登録・編集・削除できる管理画面を作成
2025/8/29公開
![[管理画面フォーマット制作編 #7] サイドバーメニュー管理UI ─ 3層・並び順・priority可視制御まで](/_next/image?url=%2Farticles%2Fnext-js%2Fformat-menu-ui%2Fhero-thumbnail.jpg&w=1200&q=75)
ロールテーブルを管理画面から操作するためのUIを、Next.js 15 + shadcn/ui + React Hook Form + Zodで実装
2025/8/26公開
![[管理画面フォーマット制作編 #6] マスタ管理-ロール管理（UIのみ）](/_next/image?url=%2Farticles%2Fnext-js%2Fformat-role-ui%2Fhero-thumbnail.jpg&w=1200&q=75)
管理画面に「プロフィール」ページを追加し、ユーザ自身が情報やパスワードを更新できるUIを作成
2025/8/22公開
![[管理画面フォーマット制作編 #5] ユーザープロフィールUI ─ 情報確認・編集・パスワード変更](/_next/image?url=%2Farticles%2Fnext-js%2Fuser-profile-ui%2Fhero-thumbnail.jpg&w=1200&q=75)
Next.js App Router + shadcn/ui のサイドバーで「いま見ているページ」を正しくハイライト
2025/8/19公開
![[管理画面フォーマット制作編 #4] サイドバーのメニューと参照中ページの同期](/_next/image?url=%2Farticles%2Fnext-js%2Fsidebar-active-sync%2Fhero-thumbnail.jpg&w=1200&q=75)
バックエンド構築関連
Next.jsでバックエンド回りを構築した実践記録です
管理画面で受け付けたパスワード再発行依頼を、Server Action・Shadcn/uiのデータテーブル・メール送信を組み合わせて運用可能なワークフローに統合
2025/10/15公開
![[管理画面フォーマット開発編 #11] パスワード再発行依頼とメールテンプレート統合](/_next/image?url=%2Farticles%2Fnext-js%2Fformat-password-request%2Fhero-thumbnail.jpg&w=1200&q=75)
グローバルで一貫したMenuテーブルを保ちながら、部署ごとにメニュー表示をカスタマイズ
2025/10/12公開
![[管理画面フォーマット開発編 #10] メニュー管理UIをDB連携する](/_next/image?url=%2Farticles%2Fnext-js%2Fformat-department-menu%2Fhero-thumbnail.jpg&w=1200&q=75)
DepartmentRole導入に伴い、プロフィール管理で「実効ロール」を参照するように修正と一部ついでの変更
2025/10/8公開
![[管理画面フォーマット開発編 #9 後編] 部署別ロール対応 ─ プロフィール管理の改修](/_next/image?url=%2Farticles%2Fnext-js%2Fformat-department-role-profile%2Fhero-thumbnail.jpg&w=1200&q=75)
DepartmentRole導入に伴い、ユーザ管理で「実効ロール」を参照するように修正
2025/10/5公開
![[管理画面フォーマット開発編 #9 前編] 部署別ロール対応 ─ ユーザ管理の改修](/_next/image?url=%2Farticles%2Fnext-js%2Fformat-department-role-users%2Fhero-thumbnail.jpg&w=1200&q=75)
部署ごとのロールを実際に操作できるように、Server Actionと管理画面UIを構築
2025/10/2公開
![[管理画面フォーマット開発編 #8 後編] 部署別ロール ─ 管理UIとServer Action実装](/_next/image?url=%2Farticles%2Fnext-js%2Fformat-department-role-ui%2Fhero-thumbnail.jpg&w=1200&q=75)
グローバルで一貫したRoleテーブルを保ちながら、部署ごとにロールをカスタマイズするために「DepartmentRole」テーブルを新設
2025/9/29公開
![[管理画面フォーマット開発編 #8 前編] 部署別ロール ─ DepartmentRoleテーブル導入とDB設計](/_next/image?url=%2Farticles%2Fnext-js%2Fformat-department-role-db%2Fhero-thumbnail.jpg&w=1200&q=75)
補足情報
Next.js関連の補足情報です。ツール作成のフレームワーク選びの参考にさればと思います。
GitHub Actions で Playwright を動かし、結果をレポート & ブランチ保護まで設定
2025/7/17公開
ボタンをクリックしているだけで、テストが自動生成。『壊れてないか？』を毎回手動で確かめる作業とおさらば
2025/7/15公開
GitHub Actions を使った CI（継続的インテグレーション）の最小構成 を体験
2025/7/10公開
これからGitを使い始めるフロントエンド/バックエンド開発者向けに少しだけGitコマンドをDeep Dive
2025/7/9公開
GitHubは「見るだけ。DLするだけ」からの卒業を目指して、利用しながら理解する第一歩の記録
2025/7/7公開
Tailwind CSSを快適に利用するための公式プラグインの導入についてのまとめ
2025/7/4公開
