【全6回】知識ゼロからVPSでWebアプリを公開する講座 #1 Dockerをはじめよう

はじめに

この連載は、「黒い画面（コマンド）が怖い」「サーバーとかよく分からない」 という超初心者の方を対象に、最終的に「自作のWebアプリをインターネット上のサーバー(VPS)で公開する」ところまでをステップバイステップで解説する講義資料です。

私自身は、クラウド開発だし、学生にAZ-900ぐらい取らせたいなぁ（就活の資格にも書けるし）と思って前半は講義してたんですが、資格対策の講義ってあんまり面白くないよね。

でも、後半はハンズオンです！方向性は、インフラ系にいくか、WEB系に行くか、アプリ開発か・・・？と悩み、まあうちの学生優秀やから、全６回でひと通り開発しようぜ！という方向で設計しました。一応、内容的には大丈夫。

全6回のカリキュラム

今回は第1回です。まずは手元のパソコンで「Docker」に触れてみましょう。

第1回：Dockerってなに？＆ Webサーバーを起動せよ（今回）
第2回：人気No.1 CMS「WordPress」を構築せよ
第3回：オリジナルアプリ開発① 〜コードを書く〜
第4回：オリジナルアプリ開発② 〜コンテナ化〜
第5回：【実演】VPSへのデプロイ（世界へ公開）
第6回：守りの技術：バックアップとセキュリティ

全6回を終えるとレベル感としてはこんなもんかな。

①インフラ・サーバー分野：【初級〜中級の入り口】
一般的な学生レベル: 「HerokuやVercelなどの無料サービスにアップしたことはあるが、裏側がどうなっているかは知らない」

この講義の修了生: 「VPS（生サーバー）にSSHで入り、Dockerを使って環境を構築し、アプリを稼働させることができる」

評価: 「モダンな開発フローの基礎ができている」と見なされます。企業の実務（AWSやGCPでの開発）もDockerが標準なので、即戦力候補として見られます。

②アプリ開発分野：【初級】
コード（Python）自体は数行しか書いていないため、プログラミング能力自体はまだ初級です。

ただし、「DBとアプリを連携させる（WordPressの回）」というシステム構成の勘所は掴めているため、独学の吸収スピードが格段に上がります。

③総合力：【「0から1を作れる」レベル】
これが最大の違いです。多くの初心者は「自分のPCの中で動いて満足」で終わります。

この講義の修了生は、「URLをLINEで送って、友人に使ってもらう」 ところまで完結できます。

評価: 「デプロイ（公開）の壁」を越えているため、エンジニアとしての 「自走力（自分でなんとかする力）」 が高いと評価されます。

余裕があれば、

・セキュリティ: HTTPS化（鍵マークをつける）、ファイアウォールの詳細設定。
・ドメイン: IPアドレス（123.45.xx.xx）ではなく、example.com のようなドメイン設定。
・Git/GitHub: 今回は手動コピーなどを想定していますが、実務ではチーム開発のためのバージョン管理（Git）が必須。

までいければ

エンジニアレベル： Junior Infrastructure Engineer / Junior Backend Developer

って言える気がします。（実際、ここまで自走できる学生・新卒って意外と少ないからね）
一応、おまけで第6回で、この3領域の講義設計載せる予定です。

1. そもそも「サーバー」と「Docker」ってなに？

サーバー = 「24時間働いてくれる執事（PC）」

普段みんなが使っているPCは、夜寝るときに電源を切りますよね？
でも、InstagramやLINEは夜中でも使えます。これは世界のどこかで 「24時間ずっと電源が入りっぱなしで、みんなからのアクセスを待ち受けているPC」 がいるからです。これを「サーバー」と呼びます。

Docker = 「アプリの引越しカプセル」

昔は、サーバーを用意するのは大変でした。Webサーバーソフトを入れて、設定ファイルを書き換えて…と、家具を一つひとつ手作業で組み立てる必要があったからです。

Docker（ドッカー） は、家具や壁紙があらかじめセットされた 「プレハブ小屋（コンテナ）」 のようなものです。

コンテナ: アプリが動くのに必要なものが全部入った箱。
イメージ: コンテナを作るための「金型」や「設計図」。
Docker: コンテナを動かすための土台。

最大のメリット：
「私のPCでは動いたのに、先生のPC（サーバー）では動かない！」というトラブルがなくなります。

2. 準備：道具の点検

まず、自分のPCでDockerが動いているか確認しましょう。
※まだインストールしていない人は、Docker Desktop をインストールしてください。

Docker Desktop を起動してください（クジラのアイコン）。
左下のステータスが、緑色で "Engine Running" になっていればOKです。
「ターミナル（Mac）」または「PowerShell（Windows）」を開いてください。
以下のコマンドを入力してEnterキーを押してください。

docker --version

バージョン番号（例：Docker version 24.x.x...）が表示されれば準備完了です！

3. 【演習1】魔法のコマンドでWebサーバー起動

世界で一番使われているWebサーバーソフト 「Nginx（エンジンエックス）」 を起動してみましょう。
本来はインストールや設定に時間がかかりますが、Dockerならコマンド1行です。

ステップ1：コマンド入力

以下のコマンドをコピーして、ターミナル（またはPowerShell）に貼り付けて実行してください。

docker run -d -p 8080:80 --name my-web-server nginx

コマンドの解説（呪文の意味）

docker run: 「コンテナを作って起動せよ」
-d: 「バックグラウンドで動いて（Detachedモード）」
-p 8080:80: 「PCの8080番ポートへのアクセスを、コンテナの80番につなげ」
--name my-web-server: 「このコンテナに名前をつける」
nginx: 「使うイメージ（金型）はNginx」

ステップ2：ブラウザで確認

Chromeなどのブラウザを開いて、以下のアドレスにアクセスしてください。

👉 http://localhost:8080

"Welcome to nginx!" という白い画面が表示されましたか？
おめでとうございます！今、あなたのPCの中で小さなWebサーバーが動いています。

※文字化けした時はhtmlファイルを　UTF-8 BOMつきで保存すると文字化け回避できます。

4. 【演習2】オリジナルページに書き換えよう

"Welcome to nginx!" だけでは面白くないので、自分で書いたHTMLファイルを表示させてみましょう。
Dockerの「マウント（Mount）」という機能を使います。PCにあるファイルを、コンテナの中に「のぞき窓」を通して見せる技術です。

ステップ1：HTMLファイルを作る

デスクトップに新しいフォルダ docker-test を作成してください。
その中に index.html というファイルを作り、以下のコードを保存してください。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My First Server</title>
</head>
<body style="background-color: skyblue;">
    <h1>こんにちは！Docker！</h1>
    <p>これは私の初めてのコンテナです。</p>
</body>
</html>

ステップ2：一度コンテナを止める

さっき動かしたコンテナがあると邪魔になる（ポート番号がぶつかる）ので、一度削除します。

docker rm -f my-web-server

ステップ3：自分のファイルを読み込んで起動（最重要！）

ここがDockerの最初の難関です。OSによってコマンドが少し違います。
ターミナルで、先ほど作った docker-test フォルダに移動してから実行してください。

Mac / Linux の方

# デスクトップのdocker-testフォルダへ移動
cd ~/Desktop/docker-test

# マウントして起動
docker run -d -p 8080:80 -v $(pwd):/usr/share/nginx/html --name my-custom-server nginx

Windows (PowerShell) の方

# デスクトップのdocker-testフォルダへ移動
cd ~\Desktop\docker-test

# マウントして起動
docker run -d -p 8080:80 -v ${PWD}:/usr/share/nginx/html --name my-custom-server nginx

解説： -v オプションの意味
-v $(pwd):/usr/share/nginx/html は、「今のフォルダ($(pwd)) を、コンテナの中の Webページ置き場(/usr/share/nginx/html) に上書きして！」という命令です。

ステップ4：結果確認

もう一度ブラウザでアクセスしてみましょう。

👉 http://localhost:8080

背景が水色で 「こんにちは！Docker！」 と表示されましたか？
これであなたは、Webサーバーを自在に操れるようになりました！

5. 後片付け（重要）

起動しっぱなしだとPCが重くなるので、最後にコンテナを停止・削除しておきましょう。

Docker Desktop を開く。
"Containers" の画面を見る。
動いているコンテナの「停止ボタン（■）」を押し、「ゴミ箱アイコン」を押して削除する。

よくあるトラブルと対処法

もしうまくいかない場合は、以下をチェックしてみてください。

エラー：Bind for 0.0.0.0:8080 failed
- 原因: 前の演習のコンテナを消さずに、2回目の run を実行してしまった可能性があります。
- 対処: docker ps で確認し、不要なコンテナを削除するか、PCを再起動してみてください。
HTMLを書き換えたのに反映されない
- 原因: ブラウザが古い情報を覚えている（キャッシュ）可能性があります。
- 対処: Shift + F5 (Windows) または Cmd + Shift + R (Mac) でスーパーリロード（強制再読み込み）をしてください。

次回予告

今回は「Nginx」という既存のWebサーバーを使いました。
次回は、Docker Composeという機能を使って 「WordPress」 環境を一瞬で構築します。