第7章 7-1 / 卒業制作 ― yumiを見送る

自分のページを公開する

このページで叩くコマンドと到達点

前提:6-5までが完了し、~/practice(空)・~/scripts(練習スクリプト数本)が存在する状態から始めます。ここからはいよいよ第7章、卒業制作です。1〜6章では「自分のサーバーの中」で完結する練習ばかりでしたが、このページで初めてインターネットの外側にいる誰かが、あなたのサーバーにアクセスできるようになります。nginxというWebサーバーソフトを入れて起動し、ファイアウォールを2段階(Lightsail側とufw)開け、最後は自分の書いたHTMLに差し替えて、自分のブラウザからhttp://自分のIPアドレスを開く、という体験をします。

このページの後半にはコマンドを打たずブラウザだけを操作するSTEPが1つ挟まります。それ以外はSET 1〜3、合計30行のコマンドを上から順に叩きます。手打ち推奨です。

SET 1 ― nginxを入れて起動する

ubuntu@lightsail: ~
  1. $sudo apt update
  2. $sudo apt install nginx -y
  3. $systemctl status nginx
  4. ● nginx.service - A high performance web server...
  5. Active: active (running) since ...
  6. $q
  7. $curl localhost
  8. <title>Welcome to nginx!</title>
  9. $curl -I localhost
  10. HTTP/1.1 200 OK
  11. $systemctl is-enabled nginx
  12. enabled
  13. $systemctl is-active nginx
  14. $ps aux | grep nginx
  15. $ss -tlnp | grep :80
解説 ― SET 1 で何をしたか

1行目のsudo apt updateは、5-1で学んだ「インストールできるパッケージの最新リストを取得する」おなじみの一言目です。2行目のsudo apt install nginx -yで、nginx※1(エンジンエックスと読みます)というWebサーバーソフト※2をインストールします。ここでシステム全体にソフトを追加するのでsudoが必要です。apt installは通常インストール可否の確認が入りますが、-yを付けているのですべて自動でyesと答えて進みます。

3行目のsystemctl status nginxは5-2で扱ったサービス管理コマンドです。出力例のようにActive: active (running)と表示されれば、nginxはインストール直後から自動的に起動していることがわかります。ページャーが開いた状態になるので、4行目のqで抜けます。

5行目のcurl localhostは5-5で使ったコマンドで、今回は自分自身(localhost、つまり自分のサーバーのこと)の80番ポートへHTTPリクエストを送っています。出力例にWelcome to nginx!という文字列が含まれていれば、サーバーの中では既にWebページが動いている証拠です。6行目のcurl -Iは本文を省略してヘッダーだけを見るオプションで、HTTP/1.1 200 OK(正常に応答した、という意味のステータスコード)が確認できます。7行目のsystemctl is-enabled nginxは、サーバー再起動時にも自動でnginxが立ち上がる設定(enabled)になっているかを確認するコマンドです。

8行目のsystemctl is-active nginxは現在動作中かどうかだけを一言で返すコマンドで、statusより手早く確認したいときに使います。9行目のps aux | grep nginxは4-1で学んだプロセス確認とパイプの組み合わせで、nginxのプロセスが実際に動いていることをプロセス一覧の側からも確かめます。10行目のss -tlnp | grep :80は5-5で扱ったコマンドで、80番ポートがLISTEN状態になっているか、ネットワークの側から見た最終確認です。これで「サービスとして起動している」「プロセスとして動いている」「ポートを開けて待っている」の3方向すべてからnginxの稼働を確認できました。

POINT

curl localhostが成功したのは、あくまで「サーバーの中から自分自身にアクセスできた」ことの確認です。まだこの時点では、あなたのスマホやパソコンのブラウザからhttp://自分のIPを開いても表示されません。理由はこのあとのSET 2・SET 3で扱うファイアウォールです。

ゆみちゃん
ゆみ

nginxが一発で起動してるの、地味にすごいことだよ! Webサーバーって聞くと難しそうだけど、Ubuntuの世界だとapt installで秒殺できちゃうんだよね。ここから先は「サーバーの中では動いてるのに外から見えない」あるあるを一個ずつ解決していくよ!

SET 2 ― ufwを開放する

ubuntu@lightsail: ~
  1. $sudo ufw status
  2. Status: active
  3. To Action From
  4. OpenSSH ALLOW Anywhere
  5. $sudo ufw app list
  6. Nginx Full
  7. Nginx HTTP
  8. Nginx HTTPS
  9. $sudo ufw app info 'Nginx HTTP'
  10. Port: 80/tcp
  11. $sudo ufw allow 'Nginx HTTP'
  12. $sudo ufw status
  13. Nginx HTTP ALLOW Anywhere
  14. $sudo ufw status numbered
  15. $sudo ufw status verbose
  16. $ip a
  17. $ss -tlnp
  18. $curl -I localhost
解説 ― SET 2 で何をしたか

1行目のsudo ufw statusは5-6で有効化したufw※3(サーバー内部のファイアウォール)の現状確認です。出力例のとおり、今許可されているのはOpenSSH(SSH接続用の22番ポート)だけで、Webページを表示するための80番ポート(HTTP)はまだ許可されていません。これが「サーバーの中では動いているのに、外から見ると門前払いされる」状態の正体です。ufwの操作はサーバー全体のアクセス制御にかかわるためsudoが必要です。

2行目のsudo ufw app listは、nginxをインストールしたことでufwに新しく登録されたアプリ用プロファイルの一覧を見るコマンドです。出力例のようにNginx HTTP(80番のみ)、Nginx HTTPS(443番のみ)、Nginx Full(両方)の3種類が使えます。3行目のsudo ufw app info 'Nginx HTTP'で、そのプロファイルが具体的にどのポートを指しているかを見ると、出力例のとおり80/tcpだと確認できます。今回はまだ暗号化通信(HTTPS)の設定をしていないので、4行目のsudo ufw allow 'Nginx HTTP'でHTTP(80番)だけを許可します。プロファイル名にスペースが含まれるためクォートで囲みます。

5行目で改めてsudo ufw statusを確認すると、出力例のようにNginx HTTPがALLOWの一覧に加わっています。6行目のsudo ufw status numberedは、許可ルールに番号を振って表示するオプションで、あとからルールを削除したいときにsudo ufw delete 番号のように指定するために使います。7行目のsudo ufw status verboseは、デフォルトの拒否・許可方針まで含めた詳しい設定を表示するオプションです。

8行目のip aは5-5で学んだネットワークインターフェース確認のコマンドで、自分のサーバーに割り当てられたプライベートIPアドレスを再確認しています(実際にブラウザで使うのは0-1で控えたパブリックIPです)。9行目のss -tlnpで、80番ポートがnginxによってLISTEN状態になっていることを改めて確認します。10行目のcurl -I localhostで改めてサーバー内部からの応答を確認しておきます。これでサーバー側の門は開きました。ただし、Lightsailにはこれとは別に、もう1段階のファイアウォールがあります。それが次のSET 3の前に挟むSTEPです。

Lightsailコンソールでポート80を開ける

ufwはあくまでサーバー内部の門番です。Lightsailにはサーバーの外側、ネットワークの入口にもう1つ門番がいて、こちらはブラウザのLightsail管理画面から操作します。手順は次のとおりです。

  1. ブラウザでLightsailの「インスタンス」一覧を開き、このドリルで使っているインスタンスをクリックします。
  2. インスタンス詳細画面の「ネットワーキング」タブに切り替えます。
  3. 「IPv4ファイアウォール」の一覧を確認します。0-1〜0-2の時点で、SSH接続用の22番(SSH)だけが許可されているはずです。
  4. 「ルールを追加」ボタンを押し、アプリケーションの候補からHTTP(または「カスタム」でTCPの80番ポート)を選び、「作成」を押します。
  5. 一覧に「HTTP・TCP・80・Anywhere(0.0.0.0/0)」の行が追加されていれば成功です。

これで、外側の門(Lightsailファイアウォール)と内側の門(ufw)の両方が80番ポートで開いた状態になりました。二重のファイアウォール※4は片方だけ開けても意味がなく、両方が揃って初めて外部からアクセスできるようになります。

POINT

「ufwは開けたのにブラウザから見えない」というつまずきの9割は、Lightsail側のファイアウォールを開け忘れているケースです。逆に「Lightsail側は開けたのにダメ」という場合は、ufwのallowを忘れているケースです。うまくいかないときは、内と外の両方の門番を順番にチェックしましょう。

SET 3 ― 自分のページに差し替えて世界に公開する

ubuntu@lightsail: ~
  1. $curl -I localhost
  2. HTTP/1.1 200 OK
  3. $ls -l /var/www/html
  4. -rw-r--r-- 1 root root 615 ... index.nginx-debian.html
  5. $whoami
  6. ubuntu
  7. #echo '<h1>Hello from ubuntu, this is my first server!</h1>' | sudo tee /var/www/html/index.html
  8. $curl localhost
  9. <h1>Hello from ubuntu, this is my first server!</h1>
  10. $cat /var/www/html/index.html
  11. <h1>Hello from ubuntu, this is my first server!</h1>
  12. $ls -l /var/www/html
  13. -rw-r--r-- 1 root root 58 ... index.html
  14. $curl -I localhost
  15. HTTP/1.1 200 OK
  16. $date
  17. $cd ~
解説 ― SET 3 で何をしたか

1〜2行目でnginxが変わらず動いていることを再確認し、2行目のls -l /var/www/htmlで、これまで表示されていた「Welcome to nginx!」ページの実体が/var/www/html/index.nginx-debian.htmlというファイルであることを確認します。所有者がrootになっている点に注目してください。3行目のwhoamiで、自分が一般ユーザーのubuntuであることも確認しておきます。

4行目が今回のヤマ場です。echo '<h1>...</h1>'で自分だけのHTML文字列を作り、パイプ|でsudo tee /var/www/html/index.htmlに渡しています。3-3で学んだteeは「画面にも表示しつつファイルにも書き込む」コマンドでした。ここでsudoが必要なのは、直前で確認したとおり/var/www/htmlの所有者がrootで、一般ユーザーのubuntuには書き込み権限がないためです。>ではなくteeを使うのは、リダイレクト>単体だとsudoの権限がファイル書き込みの瞬間に効かず「Permission denied」になってしまうという、管理者がよくハマる落とし穴を避けるためです。

5行目のcurl localhostで、出力例のとおり自分の書いたHTMLがそのまま返ってくることを確認します。これで/var/www/html/index.htmlが新しいトップページとして認識されました(nginxはindex.htmlという名前のファイルを優先して表示します)。6行目のcat /var/www/html/index.htmlで、ファイルの中身そのものも直接確認しておきます。7行目のls -lで、ファイル一覧に自分のindex.htmlが加わっている様子も確認しておきましょう。8行目のcurl -Iで最終的なステータスを確認し、9行目のdateで今この瞬間を記録に残したら、10行目のcd ~で改めてホームディレクトリに戻り、次のSTEPへ進みます。

POINT

ここまで確認できたら、いよいよ自分のパソコンやスマホのブラウザを開き、アドレスバーにhttp://自分のパブリックIP(0-1で控えたIPアドレス。httpsではなくhttpです)と入力してみてください。あなたがさっき書いた見出しが、画面いっぱいに表示されるはずです。それは、あなたが今座っている場所から何千キロ離れていても構わない、インターネット上のどこからでも見えるあなただけのページです。

ゆみちゃん
ゆみ

あたし、初めて自分のIPアドレスをブラウザに打って、自分の書いた文字が表示された瞬間のこと今でも覚えてるよ。「これ、世界中の誰でも見られるんだ」って思ったら鳥肌立った! 1章のpwdやlsから始まって、ここまで叩いてきたコマンドが全部この1ページにつながってるんだよね。ちゃんと感動しておいてね!

まとめ

7-1では、nginxのインストールから2段階のファイアウォール開放、そして自分だけのHTMLの公開までを行いました。このページで叩けるようになったコマンドを一覧にまとめます。

コマンド何をするか覚え方
sudo apt install nginxWebサーバーソフトnginxをインストールするサーバーに受付係を雇う
systemctl status nginxnginxサービスの稼働状況を確認する受付係が出勤してるか確認
curl localhost自分自身のWebページにリクエストを送る自分で自分に電話してみる
curl -IHTTPヘッダーだけを確認する本文なしの返事だけ聞く
sudo ufw allow 'Nginx HTTP'サーバー内部の門(ufw)で80番ポートを開放する内側の門番にHTTP通してと頼む
sudo ufw statusufwで許可されている通信を確認する内側の門番の許可リストを見る
Lightsailファイアウォール(コンソール)サーバー外部の門でポートを開放する外側の門番にも同じお願いをする
echo '...' | sudo tee ファイルrootが所有するファイルに書き込む画面にも見せつつ、代筆してもらう

次のページ「7-2. 総合演習 ― 全章の集大成」では、1〜6章で学んだコマンドを総動員して、yumiのホームディレクトリを自動でバックアップするスクリプトを組み立て、cronに登録します。

脚注 ─ 用語解説
  1. nginx … 「エンジンエックス」と読む、世界的に広く使われているWebサーバーソフトウェア。軽量で高速な動作が特徴。↩
  2. Webサーバーソフト … ブラウザからのリクエストを受け取り、HTMLなどのファイルを返す働きをするソフトウェア。これがないとサーバーはWebページを表示できない。↩
  3. ufw … Uncomplicated Firewallの略。Ubuntuに搭載されている、サーバー内部で通信を許可・拒否するファイアウォール機能。5-6で有効化した。↩
  4. 二重のファイアウォール … Lightsailでは、クラウド基盤側(Lightsailコンソール)とサーバー内部(ufw)の両方に通信制御の仕組みがあり、両方の許可が揃って初めて外部から接続できる。↩