【全6回】知識ゼロからVPSでWebアプリ公開 #5 ついに世界へ！VPSデプロイ実演

はじめに

本連載は、超初心者が 「Dockerを使って自作Webアプリをサーバー公開する」 までのステップバイステップ講座です。

• 第1回：Dockerってなに？ ＆ Webサーバーを起動せよ
• 第2回：人気No.1 CMS「WordPress」を構築せよ
• 第3回：オリジナルアプリ開発① 〜コードを書く〜
• 第4回：オリジナルアプリ開発② 〜コンテナ化〜
• 第5回：【実演】VPSへのデプロイ（今回）
• 第6回：総まとめと今後のロードマップ

前回、自作アプリを「コンテナ」という箱に詰め込みました。
今回は、その箱を **「VPS（バーチャル・プライベート・サーバー）」**というインターネット上の土地に運び、実際に公開します。

「自分のスマホから、自分が作ったアプリを見られる」 感動の瞬間まであと少しです！

---

1. そもそも「デプロイ」ってなに？

開発したアプリを本番環境（サーバー）に配置して、利用できる状態にすることを 「デプロイ（Deploy / 展開）」 と呼びます。

• Localhost (自分のPC): 家の中。家族（同じWi-Fiの人）しか見れない。
• VPS (サーバー): 渋谷のスクランブル交差点。住所（IPアドレス）さえ知っていれば、世界中の誰もが見れる。

今回は、第4回で作った my-app フォルダ一式を、VPSへお引越しさせます。

---

2. 登場人物（サーバー）の紹介

今回は先生が契約したVPS（例：ConoHa, DigitalOcean, Linode, AWS Lightsailなど）を使います。
OSは Ubuntu (Linux) が一般的です。

VPSは、皆さんのWindowsやMacと違って 「画面（GUI）」がありません。
すべて 「黒い画面（コマンド）」 で操作します。これを **「SSH接続」**と呼びます。

実際に先生がつないでみます

ssh root@123.45.67.89
# パスワードを入力...

解説：
これで、手元のターミナルが「遠隔地のPC」につながりました。
ここで打つコマンドは、全てそのサーバー上で実行されます。

---

3. 手順①：Docker環境の準備

買ったばかりのVPSは「空っぽ」です。
まずは、第1回で皆さんのPCに入れたのと同じ 「Docker」 と 「Docker Compose」 をインストールします。

Linuxでのインストールは少し長い呪文が必要ですが、やることは「Docker Desktop」を入れるのと同じです。

# （先生向け参考）UbuntuへのDockerインストール例
curl -fsSL https://get.docker.com -o get-docker.sh
sh get-docker.sh

これで、サーバー側でも「コンテナ」を受け入れる準備が整いました。

---

4. 手順②：ファイルの転送（お引越し）

皆さんのPCにある my-app フォルダ（ソースコードとDocker設定ファイル）を、VPSへ送ります。

方法はいくつかありますが、エンジニアっぽくSCPコマンド（Secure Copy）を使ってみましょう。

# ローカルPCから実行するコマンド
scp -r ~/Desktop/my-app root@123.45.67.89:/root/

• scp: ファイルを転送せよ。
• -r: フォルダの中身ごと全部。
• ~/Desktop/my-app: 送る荷物はこれ。
• root@123.45...:/root/: 送り先はこのサーバーのホームディレクトリ。

解説：
これで、VPSの中に my-app フォルダがコピーされました。
もちろん、FileZillaなどのソフトを使ってドラッグ＆ドロップしてもOKです。

---

5. 手順③：起動（スイッチオン！）

ここがDockerの最大のメリットです。
VPSの中で、送られたフォルダに入り、第4回で皆さんが自分のPCで打ったのと全く同じコマンドを実行します。

# サーバーの中での操作
cd my-app
docker-compose up -d --build

「えっ、これだけ？」 と思いませんか？
はい、これだけです。

もしDockerを使っていなかったら、サーバー上で「Pythonのインストール」「ライブラリのバージョン合わせ」「パスの設定」……と、エラーとの戦いが1時間以上続きます。

しかし、私たちは 「Dockerfile（設計図）」 を持っています。
「設計図さえあれば、どこでも同じ環境が一瞬で再現できる」
これがDockerを使う最大の理由なのです。

---

6. 世界からアクセスしてみよう

サーバー上でアプリが立ち上がりました。
では、皆さんのスマートフォンを取り出してください。

⚠️重要：Wi-Fiを切って、4G/5G回線にしてください。
（本当に外からつながるか確認するためです）
※うちの大学のWiFiってほとんどのポート閉じてるし

ブラウザに、先生が指定するURL（IPアドレス）を入力します。

👉 http://[サーバーのIPアドレス]:8501

成功しましたか？

スマホの画面に、あの「おみくじアプリ」が表示されれば大成功です！
今、あなたが作ったプログラムは、遠く離れたデータセンターの中で動き、世界中からのアクセスを待っています。

---

7. 実は大事な「セキュリティ」の話

「あれ？つながらないぞ？」という場合、大抵は 「ファイアウォール」 が原因です。

サーバーはセキュリティのため、基本的に 「全てのドア（ポート）」が閉まっています。
Webサイトを見せるには、特定のドアを開ける許可を出す必要があります。

# （先生向け参考）ポート8501を開ける呪文（Ubuntu ufwの場合）
ufw allow 8501

これを忘れると、「サーバーの中でアプリは動いているのに、外からは見えない」状態になります。
家の鍵を開けないとお客さんが入れないのと同じですね。

---

次回予告

ついにアプリが公開されました！
しかし、まだURLが http://123.45.67.89:8501 のような数字の羅列で、ちょっと怪しいですよね。鍵マーク（HTTPS）もついていません。

最終回は、これまでの総復習と、これからエンジニアとしてさらにレベルアップするための「第6回：守りの技術：バックアップとセキュリティ」をお話しします。

• 第6回：守りの技術：バックアップとセキュリティ

ここまで来れば、あなたはもう「超初心者」ではありません。自信を持ってください！

---

講師向け補足（デモをスムーズに行うために）

1. 事前準備:
   • 授業時間内に apt-get install などを走らせると時間がかかるため、Dockerのインストールまでは済ませた状態のVPSを用意しておくのが無難です。
2. IPアドレスの共有:
   • QRコード作成サイトなどで http://IP:8501 のQRコードを作っておき、スクリーンに投影すると、学生がスマホでスムーズにアクセスできます。
3. トラブルシュート:
   • AWSやGCPを使う場合、OS内部のファイアウォールだけでなく、クラウド管理画面側（セキュリティグループ）でのポート開放も必要になるので注意してください。