<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Webサーバー on AIによる技術記事 備忘録</title><link>https://ai.hack-le.com/tags/web%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC/</link><description>Recent content in Webサーバー on AIによる技術記事 備忘録</description><generator>Hugo -- gohugo.io</generator><language>ja</language><lastBuildDate>Fri, 04 Sep 2026 15:50:40 +0900</lastBuildDate><atom:link href="https://ai.hack-le.com/tags/web%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC/index.xml" rel="self" type="application/rss+xml"/><item><title>CaddyのファイルサーバーにBasic認証を設定する方法とドメイン追加時のreload挙動</title><link>https://ai.hack-le.com/caddy%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%ABbasic%E8%AA%8D%E8%A8%BC%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%81%A8%E3%83%89/</link><pubDate>Fri, 04 Sep 2026 15:49:56 +0900</pubDate><guid>https://ai.hack-le.com/caddy%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%ABbasic%E8%AA%8D%E8%A8%BC%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%81%A8%E3%83%89/</guid><description>&lt;p&gt;軽量でHTTPSの自動設定が強力なWebサーバー「Caddy」において、ファイルサーバー機能にBasic認証を付加する手順と、ドメイン追加時にサービス再起動が必要かどうかについてのまとめです。&lt;/p&gt;&#10;&lt;h2 id="basic認証の設定手順"&gt;Basic認証の設定手順&#10;&lt;/h2&gt;&lt;p&gt;Caddyで静的ファイルを配信する &lt;code&gt;file_server&lt;/code&gt; ディレクティブに対してBasic認証を設定する場合、平文のパスワードをそのままCaddyfileに記述することはできません。事前にパスワードのハッシュ値を生成し、それを設定ファイルに組み込む必要があります。&lt;/p&gt;&#10;&lt;p&gt;まず、サーバーのターミナル上で &lt;code&gt;caddy hash-password&lt;/code&gt; コマンドを実行します。対話形式でパスワードの入力を求められるため、使用したいパスワードを入力すると、bcryptアルゴリズムによって暗号化されたハッシュ文字列が出力されます。&lt;/p&gt;&#10;&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-bash" data-lang="bash"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;caddy hash-password&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="c1"&gt;# 入力プロンプトにパスワードを入力すると、ハッシュ値が出力されます&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="c1"&gt;# 出力例: $2a$14$Zkx19XLiW6VYouLHR5NmfOFU0z2GTNmpkT/5qqR78lmQ827KnFsEK&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;ハッシュ文字列が得られたら、Caddyfileのサイト定義内に &lt;code&gt;basicauth&lt;/code&gt; ディレクティブを追記します。サイト全体を保護する場合は以下のようにルートに配置します。&lt;/p&gt;&#10;&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-bash" data-lang="bash"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;example.com &lt;span class="o"&gt;{&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; root * /var/www/html&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="c1"&gt;# Basic認証の設定&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; basicauth &lt;span class="o"&gt;{&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="c1"&gt;# ユーザー名 ハッシュ化されたパスワード&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; alice &lt;span class="nv"&gt;$2&lt;/span&gt;a&lt;span class="nv"&gt;$14$Zkx19XLiW6VYouLHR5NmfOFU0z2GTNmpkT&lt;/span&gt;/5qqR78lmQ827KnFsEK&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="o"&gt;}&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; file_server&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="o"&gt;}&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;特定のディレクトリ（例: &lt;code&gt;/admin/&lt;/code&gt; 以下）のみを認証の対象としたい場合は、ディレクティブの直後にパスの指定をマッチャーとして付与することで適用範囲を限定できます。&lt;/p&gt;&#10;&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-bash" data-lang="bash"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;example.com &lt;span class="o"&gt;{&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; root * /var/www/html&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="c1"&gt;# /admin 以下のパスのみ認証を要求&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; basicauth /admin/* &lt;span class="o"&gt;{&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; bob &lt;span class="nv"&gt;$2&lt;/span&gt;a&lt;span class="nv"&gt;$14$Zkx19XLiW6VYouLHR5NmfOFU0z2GTNmpkT&lt;/span&gt;/5qqR78lmQ827KnFsEK&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="o"&gt;}&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; file_server&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="o"&gt;}&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="ドメイン追加時の証明書発行とreloadの挙動"&gt;ドメイン追加時の証明書発行とreloadの挙動&#10;&lt;/h2&gt;&lt;p&gt;Caddyfileに新しいドメインを追加した際、Webサーバーのプロセスを &lt;code&gt;restart&lt;/code&gt; させる必要はありません。Caddyは &lt;strong&gt;reloadコマンドのみで証明書の発行まで完結&lt;/strong&gt; します。サービスを停止して再起動をかける必要はありません。&lt;/p&gt;&#10;&lt;p&gt;設定変更後は、サーバー上で &lt;code&gt;caddy reload&lt;/code&gt; または &lt;code&gt;systemctl reload caddy&lt;/code&gt; を実行します。Caddyはゼロダウンタイムで新しい設定を読み込み、構成に追加された新しいドメインを検知すると、即座にバックグラウンドでACME（Let&amp;rsquo;s EncryptやZeroSSLなど）を通じたSSL/TLS証明書の自動取得と適用を開始します。&lt;/p&gt;&#10;&lt;p&gt;ただし、正常に証明書が発行されるためには、前提条件として以下の2点が整っている必要があります。&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;追加したドメインのDNSレコード（A/AAAA）が正しくサーバーのIPアドレスを向いていること&lt;/li&gt;&#10;&lt;li&gt;HTTP-01チャレンジなどの検証を通すため、外部から80番および443番ポートへの通信が疎通可能な状態であること&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;p&gt;これらが満たされていれば、リロードを実行するだけで数秒から十数秒のうちにHTTPS通信が確立されます。&lt;/p&gt;&#10;</description></item><item><title>「サーバ」という言葉には3つの顔がある――初心者が最初につまずく理由と整理法</title><link>https://ai.hack-le.com/%E3%80%8C%E3%82%B5%E3%83%BC%E3%83%90%E3%80%8D%E3%81%A8%E3%81%84%E3%81%86%E8%A8%80%E8%91%89%E3%81%AB%E3%81%AF3%E3%81%A4%E3%81%AE%E9%A1%94%E3%81%8C%E3%81%82%E3%82%8B%E2%80%95%E2%80%95%E5%88%9D%E5%BF%83/</link><pubDate>Thu, 27 Aug 2026 10:52:47 +0900</pubDate><guid>https://ai.hack-le.com/%E3%80%8C%E3%82%B5%E3%83%BC%E3%83%90%E3%80%8D%E3%81%A8%E3%81%84%E3%81%86%E8%A8%80%E8%91%89%E3%81%AB%E3%81%AF3%E3%81%A4%E3%81%AE%E9%A1%94%E3%81%8C%E3%81%82%E3%82%8B%E2%80%95%E2%80%95%E5%88%9D%E5%BF%83/</guid><description>&lt;p&gt;ITの学習や業務の中で、私たちはごく自然に「サーバ」という言葉を使っています。しかし、一口にサーバと言っても、話す人や文脈によって指している対象がまったく異なることがあります。その違いを大別すると、&lt;strong&gt;物理的なハードウェア&lt;/strong&gt;、&lt;strong&gt;ソフトウェア&lt;/strong&gt;、そして&lt;strong&gt;役割を表す概念&lt;/strong&gt;の3つに分けられます。&lt;/p&gt;&#10;&lt;p&gt;このレイヤーのズレを意識しないまま会話を進めてしまうと、特に初学者の学習において大きな混乱の原因となります。本記事では、この3つの違いを論理的に整理し、なぜ初心者がつまずきやすいのかを備忘録としてまとめます。&lt;/p&gt;&#10;&lt;h2 id="3つのレイヤーで理解するサーバの正体"&gt;3つのレイヤーで理解する「サーバ」の正体&#10;&lt;/h2&gt;&lt;p&gt;サーバ（Server）という英単語の語源は、提供する・給仕するという意味を持つ &lt;code&gt;serve&lt;/code&gt; に由来します。レストランにおける「給仕係（店員）」と「客（クライアント）」の関係をイメージすると、3つの違いが明確になります。&lt;/p&gt;&#10;&lt;p&gt;1つ目は、&lt;strong&gt;概念・役割としてのサーバ&lt;/strong&gt;です。これはクライアント・サーバモデルと呼ばれるアーキテクチャや関係性そのものを指します。要求（リクエスト）を出す側をクライアント、その要求を受け取ってサービスやデータを返す（レスポンス）側をサーバと呼びます。ここには物理的な機械や特定のプログラムという実体の制約はなく、あくまで「要求に応じる役割」という抽象的な関係性を意味しています。&lt;/p&gt;&#10;&lt;p&gt;2つ目は、&lt;strong&gt;ソフトウェアとしてのサーバ&lt;/strong&gt;です。これはクライアントからの要求を処理して応答を返す具体的な&lt;strong&gt;プログラム&lt;/strong&gt;を指します。たとえば、Webページを配信する &lt;code&gt;Apache&lt;/code&gt; や &lt;code&gt;Nginx&lt;/code&gt;、データベースを管理する &lt;code&gt;MySQL&lt;/code&gt; や &lt;code&gt;PostgreSQL&lt;/code&gt; などがこれに該当します。手元のノートパソコンであっても、これらのソフトウェアをインストールして起動すれば、そのプログラムは立派なWebサーバやデータベースサーバとして機能します。&lt;/p&gt;&#10;&lt;p&gt;3つ目は、&lt;strong&gt;ハードウェアとしてのサーバ&lt;/strong&gt;です。これはサーバソフトウェアを安定して24時間365日動かし続けるために設計された&lt;strong&gt;物理的なコンピュータ機械&lt;/strong&gt;を指します。データセンターのラックに収められているような、高い耐障害性や連続稼働用の冷却性能を備えた専用マシンです。&lt;/p&gt;&#10;&lt;p&gt;これらを整理すると、「1台の物理コンピュータ（ハードウェア）の中で、複数のサーバプログラム（ソフトウェア）が稼働し、それぞれが利用者の要求に応えてデータを提供する（概念・役割）」という多重構造になっていることがわかります。&lt;/p&gt;&#10;&lt;h2 id="なぜ初心者はサーバという言葉でつまずくのか"&gt;なぜ初心者は「サーバ」という言葉でつまずくのか&#10;&lt;/h2&gt;&lt;p&gt;この3つの意味が日常会話で無意識に使い分けられていることこそが、初心者が学習初期に感じる混乱の根本的な原因です。具体的には、次のような場面で思考のフリーズが発生します。&lt;/p&gt;&#10;&lt;p&gt;まず、 &lt;strong&gt;「自分のパソコンがサーバになる」という感覚が掴めない&lt;/strong&gt;という問題があります。「サーバ＝データセンターにある巨大で特別な黒い箱」という先入観を持っていると、Web開発の入門時に「ローカル環境にWebサーバを立ち上げる」と指示された際、なぜ普通のノートPCが突然サーバになるのか理解できなくなります。自分のPC上で &lt;code&gt;localhost&lt;/code&gt; や &lt;code&gt;127.0.0.1&lt;/code&gt; に対してリクエストを送る行為は、同じマシン内でクライアント（ブラウザ）とサーバ（Webサーバソフト）が同時に動いている状態ですが、ハードウェアとソフトウェアを混同しているとこの構造が見えてきません。&lt;/p&gt;&#10;&lt;p&gt;次に、 &lt;strong&gt;「サーバが落ちた」というトラブルの解像度が低くなる&lt;/strong&gt;点です。障害が発生した際、物理マシンの電源やネットワークが切断されたのか、&lt;code&gt;Nginx&lt;/code&gt; などのプロセスが停止したのか、それともプログラム内部のバグで例外が発生したのかによって対処法は全く異なります。しかし、すべてを一括りに「サーバの問題」と捉えてしまうと、何が壊れているのかを正しく切り分けられなくなります。&lt;/p&gt;&#10;&lt;p&gt;さらに現代では、クラウドサービスや仮想化技術の普及により、物理と論理の境界がより曖昧になっています。AWSなどのクラウド上で仮想マシンを作成することを日常的に「サーバを立てる」と呼びますが、これはソフトウェアによって仮想的に作られたコンピュータであり、物理的な実体と1対1で結びついているわけではありません。&lt;/p&gt;&#10;&lt;h2 id="文脈のズレを意識して解像度を上げる"&gt;文脈のズレを意識して解像度を上げる&#10;&lt;/h2&gt;&lt;p&gt;私たちが普段何気なく交わしている会話を振り返ると、主語のレイヤーが頻繁に入れ替わっていることに気づきます。&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;&lt;strong&gt;サーバを契約する・購入する&lt;/strong&gt;（ハードウェアやインフラ設備の文脈）&lt;/li&gt;&#10;&lt;li&gt;&lt;strong&gt;サーバをインストールする・起動する&lt;/strong&gt;（ソフトウェアやプロセスの文脈）&lt;/li&gt;&#10;&lt;li&gt;&lt;strong&gt;サーバにリクエストを送信する&lt;/strong&gt;（概念やアーキテクチャの文脈）&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;p&gt;相手にサーバの仕組みを説明するときや、自身が技術的なトラブルシューティングを行うときは、いまどのレイヤーの話をしているのかを意識することが大切です。ハードウェア、ソフトウェア、そして概念という3つの視点を持つだけで、ITシステム全体の構造を格段にクリアに見通せるようになります。&lt;/p&gt;&#10;</description></item></channel></rss>