【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作成にかかっている時間の短縮には最適と思います。
バックエンド構築関連
Next.jsでバックエンド回りを構築した実践記録です
APIを安全にする鍵は「ロールベースの認可」。JWTのpayloadに含めたロール情報を活用し、Admin専用APIの実装を通じてRBACの基本を実践
2025/8/5公開
スキーマ設計とDB連携の基礎構築を通じて、認可の土台となるユーザー・ロール情報の管理を実践
2025/8/3公開
ログイン済みのadminユーザーだけにユーザー一覧を表示します。JWT認証の保護ルートとRBAC導入の第一歩となる実装
2025/7/30公開
Shadcn/uiとつなぐ認証基盤の第一歩
2025/7/29公開
JWTについて、Next.jsでのログイン認証に使えるトークンの仕組みと活用方法を初心者向けに丁寧に解説
2025/7/23公開
補足情報
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公開
