PES
JA English 한국어 日本語 中文 हिन्दी বাংলা اردو Español Português Français Deutsch Русский العربية Bahasa Indonesia Tiếng Việt ไทย Türkçe

通知を有効にする方法

このブラウザーまたはアドレスでは通知を利用できません。対応ブラウザーで安全な接続のPESサイトを開いてください。

通知がブロックされている場合は、ブラウザーの設定で許可してください。

  1. アドレスバー横のサイト設定、またはブラウザーのサイト設定を開き、このサイトの通知を許可に変更してください。
  2. 端末の設定でブラウザーの通知を許可し、おやすみモードや集中モードを確認してください。
  3. PESに戻ってページを再読み込みし、ベルから通知を有効にしてください。

iPhoneやiPadではPESをホーム画面に追加し、そこから開いて通知を許可してください。
わたしの学習進度
  1. 人工知能の使い方
  2. ターミナル命令
  3. 人工知能の応用
  4. バイブコーディング
  5. 人工知能資格 準備中
  6. キーボード
バイブコーディングの一覧へ
バイブコーディング

Webサーバー

ブラウザーが話しかけてくれるシェルスクリプト20行。

Webサーバーはリクエストを待ってレスポンスを送るだけのプログラムです。それを証明するために、bashとnetcatと名前付きパイプだけでサーバーを作ります — 一行残らず読めます。そのあと、実際のサイトをHTTPS込みで動かすCaddyへ進みます。

Docker — 箱に入れたCaddyで、本物のサイトをインターネットへ

は、プログラムと、それが動くのに必要なものすべて — ライブラリ、設定、小さなオペレーティングシステムまで — を一つのに詰め込み、そのイメージをとして動かします。コンテナは自分のノートパソコンでも借りたサーバーでも同じように動くので、「自分のパソコンでは動くのに」という昔ながらの言い訳がなくなります。

Caddyはもともとファイル一つなのに、なぜわざわざDockerを使うのでしょう。本物のでは、すぐに複数のものが一緒に動くようになるからです — サイト、アプリ、。Dockerはその一つひとつに専用の箱を与え、同じ数個のコマンドで起動・停止・更新・削除できるようにします。サーバーにほかのものを入れる必要はなく、隣の箱を邪魔することもありません。

最初に知っておきたい四つの言葉

  1. イメージプログラムと、それに必要なものすべてを凍らせた包みです。ダウンロードする(caddy:2)か、Dockerfileというレシピのファイルから自分で作ります。動いている間に変わることはありません。
  2. コンテナ動いているイメージです。一つのイメージから多くのコンテナを起動でき、コンテナを消してもイメージには手が触れません — 次に起動すると新品の状態から始まります。
  3. ポートマッピングコンテナには、外からは見えない自分だけのポートがあります。-p 8080:80は自分のパソコンの8080番ポートをコンテナの中の80番ポートにつなぎ、ブラウザーが届くようにします。
  4. ボリュームコンテナが自分の中に書いたファイルは、コンテナを消すと一緒に消えます。ボリューム、またはコンテナにつないだ自分のフォルダーは、残り続ける保存場所です — ページ、設定、そしてCaddyの証明書がそこに住みます。

Dockerのインストール

MacやWindowsのパソコンでは、docker.comからDocker Desktopをインストールして一度起動しておきます。するとターミナルでdockerコマンドが使えるようになります。Linuxサーバーでは、Docker公式のスクリプトが一行ですべてを入れてくれます。先へ進む前に、確認用のコマンドが二つとも答えを返すことを確かめてください。

install
# macOS · Windows: install Docker Desktop from docker.com and start it once

# Ubuntu / Debian server: Docker's official install script
curl -fsSL https://get.docker.com | sh

# check that both commands answer
docker --version
docker compose version

コマンド一つでCaddy

index.htmlのあるフォルダーへ行き、下の一行を実行します。初回はDockerがCaddyのイメージをダウンロードし、二回目からは一秒ほどで起動します。http://localhost:8080を開けば、自分のページがそこにあります。

terminal
# serve this folder at http://localhost:8080 (Control-C stops it)
docker run --rm -p 8080:80 -v "$PWD":/usr/share/caddy caddy:2
  1. docker runイメージからコンテナを作り、起動します。
  2. --rm止まったらすぐにコンテナを消します。止まったコンテナが溜まっていかないようにするためです。イメージは残るので、次の実行も同じく速く始まります。
  3. -p 8080:80自分のパソコンの8080番ポートを、Caddyが耳を澄ませているコンテナの中の80番ポートにつなぎます。左の数字は自由に選べ、右の数字はイメージが決めています。
  4. -v "$PWD":/usr/share/caddy今のフォルダー($PWD)を、コンテナの中では/usr/share/caddyとして見せます — 公式イメージが標準で差し出すフォルダーです。ここでファイルを直せば、次の再読み込みで変化が見えます。
  5. caddy:2実行するイメージ — 公式のCaddyイメージで、2.xのどれかの版です。:2のタグを付けないとDockerはlatestを取ってくるため、ある日突然、足元で大きな版に切り替わるかもしれません。

Control-Cで止めます。ちょっと見るには最高ですが、コマンドが長く、ターミナルを閉じた瞬間に忘れられてしまいます。長く置くものはファイルに書き残します — それが次のプロジェクトです。

プロジェクト1 — HTMLのホームページを、フォルダーからインターネットへ

プロジェクト全体は小さなファイル三つです。index.htmlはページ、CaddyfileはCaddyが何を差し出すか、compose.yamlはDockerがCaddyをどう動かすかを書きます。Docker Composeがそのファイルを読むので、長いdocker runコマンドを打ち直す必要はありません。

my-site
my-site/
├── compose.yaml
├── conf/
│   └── Caddyfile
└── site/
    └── index.html
compose.yaml
services:
  caddy:
    image: caddy:2
    restart: unless-stopped
    ports:
      - "80:80"
      - "443:443"
      - "443:443/udp"
    volumes:
      - ./conf:/etc/caddy
      - ./site:/srv
      - caddy_data:/data
      - caddy_config:/config

volumes:
  caddy_data:
  caddy_config:

compose.yamlを一行ずつ

  1. image: caddy:2実行するイメージ — 先ほどと同じ公式のCaddyイメージです。
  2. restart: unless-stoppedコンテナが落ちたりサーバーが再起動したりしても、わざと止めるまではDockerが自動でもう一度起動します。
  3. "80:80" · "443:443"機械の80番(http)と443番(https)のポートをCaddyに開きます。Caddyが証明書を受け取り、httpの訪問者をhttpsへ回すには、両方が必要です。
  4. "443:443/udp"もう一度443番ポートですが、今度はUDPです。ブラウザーがHTTPの最新版であるHTTP/3を使えるようになります。書かなくても害はなく、その場合サイトはHTTP/2で動きます。
  5. ./conf:/etc/caddy自分のconfフォルダーが、CaddyがCaddyfileを探す/etc/caddyになります。Caddyの公式文書がファイル一つではなくフォルダーごとつなぐのは、多くのエディターが保存のときにファイルを新しいものと差し替えるため、ファイル一つだけをつなぐと古い中身が見え続けてしまうからです。
  6. ./site:/srv自分のsiteフォルダーが、Caddyfileが差し出す/srvになります。ディスク上のページを直せば、再起動しなくてもCaddyがすぐ新しい版を差し出します。
  7. caddy_data:/dataDockerが預かってくれる、名前付きのボリュームです。CaddyはHTTPS証明書と鍵をここに置くので、コンテナを消して作り直しても生き残ります。隣のcaddy_configも、Caddyの自動設定を同じように守ります。

まず自分のパソコンで試す

Caddyfileの住所の欄に:80と書きます。「どんな名前で尋ねられても80番ポートで答えよ」という意味で、証明書のない素のhttpです。ドメイン名を持たないパソコンには、これがちょうど合います。そのあと起動して、http://localhostを開きます。

conf/Caddyfile
:80 {
	root * /srv
	file_server
}
terminal
cd my-site
docker compose up -d      # start Caddy in the background
open http://localhost     # or type the address into a browser
docker compose logs -f    # watch requests arrive (Control-C stops watching)

インターネットに載せる

  1. サーバーを借りる公開IPアドレスのあるVPSなら何でもかまいません — 小さく安いもので十分です。上のスクリプトでDockerを入れ、ファイアウォールが80番と443番のポートを通すことを確かめます。
  2. ドメインをサーバーに向ける名を買ったところで、にAレコードを追加します — 名前はexample.com、値はサーバーのIPアドレスです。変更がインターネット全体に行き渡るまで、数分から数時間かかることがあります。
  3. 本物の住所を書くCaddyfileの:80を自分のドメイン名に置き換えます。この一か所の変更が自動HTTPSのスイッチを入れます — Caddyが証明書を求め、入れ、更新し、httpの訪問者をhttpsへ回します。
  4. コピーして起動するrsyncでフォルダーをサーバーにコピーし、sshでログインして、docker compose up -dで起動します。記録を見守り、証明書を取得したという行が出れば、サイトは公開されています。
conf/Caddyfile
example.com {
	root * /srv
	file_server
	encode gzip zstd
}

下の203.0.113.10は例のために取っておかれた住所なので、自分のサーバーのIPに置き換えてください。あとでページを変えたいときは、index.htmlを直して同じrsyncをもう一度実行します。siteフォルダーはコンテナにつながっているので、何も再起動しなくても次の再読み込みで新しいページが出ます。

terminal
# on your computer: copy the project folder to the server
rsync -av my-site/ root@203.0.113.10:~/my-site/

# on the server: start it — Caddy fetches the HTTPS certificate by itself
ssh root@203.0.113.10
cd ~/my-site
docker compose up -d
docker compose logs -f caddy

プロジェクト2 — Reactのホームページ

は、小さく分けて使い回せる部品(コンポーネント)でページを組み立てるです。公開するうえで大事なのは一つだけ — Reactのプロジェクトはそのままでは差し出しません。ビルドの段階でdistフォルダーの中のふつうのHTML・CSS・JavaScriptファイルに変わり、そこから先はプロジェクト1と同じ仕事です。

下のコマンドには、自分のパソコンにNode.jsが入っている必要があります。Viteがすぐに動くReactプロジェクトを作り、npm run devが作業中の画面を見せ、npm run buildが完成したサイトを書き出します。

terminal
# needs Node.js (nodejs.org) — create a React project with Vite
npm create vite@latest my-react -- --template react
cd my-react
npm install
npm run dev      # development server at http://localhost:5173

npm run build    # the finished site is written to dist/

方法A — 自分のパソコンでビルドし、結果だけをコピーする

いちばん簡単な道は、プロジェクト1をそのまま使い回すことです。ビルドしたら、distフォルダーだけをサーバーのsiteフォルダーにコピーします。--deleteは、今回のビルドにない前回のビルドのファイルを消すので、古い残りかすが溜まりません。

terminal
# way A: build here, copy only the result into Project 1's site folder
npm run build
rsync -av --delete dist/ root@203.0.113.10:~/my-site/site/
ReactがCaddyfileに必要とする一行

Reactのアプリは、一つのindex.htmlからすべてのページを自分で描きます。/aboutのような住所はディスク上のファイルではないので、助けがないと、誰かがそのページを再読み込みしたり共有されたリンクから開いたりした瞬間に、Caddyは404と答えます。try_filesはCaddyにこう伝えます。「ファイルがあればそれを、なければindex.htmlを渡して、Reactに正しいページを描かせよ」。

Caddyfile
example.com {
	root * /srv
	encode gzip zstd
	try_files {path} /index.html
	file_server
}

方法B — 二段階のDockerfileで、Dockerにビルドさせる

より頑丈な道は、Dockerの中でビルドすることです。そうすればサーバーでも同僚のパソコンでもいつも同じようにビルドされ、サーバーにNodeを入れる必要もありません。Dockerfileは二段階です — 一段目はNodeでビルドし、二段目は結果だけを残します。

Dockerfile
# stage 1: build the React app with Node
FROM node:24-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# stage 2: only the finished files go into the Caddy image
FROM caddy:2
COPY Caddyfile /etc/caddy/Caddyfile
COPY --from=build /app/dist /srv

Dockerfileを一行ずつ

  1. FROM node:24-alpine AS build一段目はNode.jsの入ったイメージから始まり、次の段がここからファイルを持っていけるように、この段にbuildという名前を付けます。
  2. COPY package*.json ./ · RUN npm ciまずパッケージの一覧だけをコピーし、ロックファイルに書かれたとおりの版を入れます。一覧が変わらない間はDockerがこの段階を使い回すので、次からのビルドは遅いインストールを飛ばせます。
  3. COPY . . · RUN npm run build残りのソースをコピーしてビルドします。完成したサイトは、build段階の中の/app/distにできます。
  4. FROM caddy:2二段目は、まっさらなCaddyイメージからもう一度始まります。コピーしない限り、一段目のものは何もついてきません。
  5. COPY --from=build /app/dist /srvbuild段階からビルドされたファイルだけを受け取り、Caddyfileが差し出す場所に置きます。Nodeとnode_modulesは置いていくので、最終的なイメージは小さいままです。

try_filesを入れたCaddyfileをDockerfileの隣に置き、下のcompose.yamlを使います。build: .は、イメージをダウンロードする代わりに「このフォルダーのDockerfileから作れ」という意味です。サーバーではコードをcloneすればコマンド一つでビルドと起動ができ、変更のたびにpullして同じコマンドをもう一度実行します。

compose.yaml
services:
  web:
    build: .
    restart: unless-stopped
    ports:
      - "80:80"
      - "443:443"
      - "443:443/udp"
    volumes:
      - caddy_data:/data
      - caddy_config:/config

volumes:
  caddy_data:
  caddy_config:
terminal
# keep node_modules and old builds out of the image
printf 'node_modules\ndist\n' > .dockerignore

# on the server: get the code, then build and start in one step
git clone https://github.com/you/my-react.git
cd my-react
docker compose up -d --build

# after you push a change: pull it and rebuild
git pull && docker compose up -d --build

よく使うコマンド

コマンド働き
docker compose up -dcompose.yamlにあるものをすべて背後で起動します。compose.yamlを変えたあとにもう一度実行すると、変わったものだけが作り直されます。
docker compose psこのプロジェクトのコンテナと、それぞれが動いているかどうかを一覧にします。サイトが答えないとき、最初に確かめるものです。
docker compose logs -f記録をリアルタイムで追いかけます。証明書の問題、間違ったパス、クラッシュは、どれもまずここに現れます。Control-Cで止まるのは見守りだけで、サーバーは止まりません。
docker compose exec -w /etc/caddy caddy caddy reload動いているコンテナの中で、接続を一つも切らずにCaddyにCaddyfileを読み直させます。Caddyfileを直したあとに使います。
docker compose downコンテナを止めて消します。名前付きのボリュームは残るので、証明書も生き残ります。-vを付けるとそれまで消えてしまうので、付けないでください。
docker compose pull新しいCaddyイメージをダウンロードします。続けてdocker compose up -dを実行すると、新しいほうに切り替わります。
caddy_dataは決して捨てない

証明書はcaddy_dataボリュームに住んでいます。docker compose down -vで、あるいはcompose.yamlにボリュームを書き忘れてこれが消えると、Caddyは起動するたびに証明書を新しく求めなければなりません。認証局は一つのドメインが一週間に受け取れる証明書の数を制限しているので、うかつな再起動を数回するだけで、サイトが何日もHTTPSなしで過ごすことになりかねません。

Webクライアント

自分で記録する欄です。ここで採点はしません。

この段階を理解したものとして記録しますか？

まだ取り消せないので、本当に理解できたときだけ記録してください。

理解したものとして記録しました

自分で記録する欄です。ここで採点はしません。

ガイドライン

人工知能

人工知能資格

勉強

バイブコーディング

ゲーム開発

練習

チューター

チャット

掲示板

制作

コミュニティ

その他

用語辞典

知らない言葉を選んでみましょう。やさしい説明と関連用語が見られます。

その用語はまだありません。

用語を選ぶと説明が表示されます。