0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@kobe_ai_lab(大学教員 Yasukawa)

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

Last updated at Posted at 2025-12-08

【全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 をインストールしてください。

  1. Docker Desktop を起動してください（クジラのアイコン）。
  2. 左下のステータスが、緑色で "Engine Running" になっていればOKです。
  3. 「ターミナル（Mac）」または「PowerShell（Windows）」を開いてください。
  4. 以下のコマンドを入力して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ファイルを作る

  1. デスクトップに新しいフォルダ docker-test を作成してください。
  2. その中に 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が重くなるので、最後にコンテナを停止・削除しておきましょう。

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

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

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

  • エラー：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」 環境を一瞬で構築します。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?