読者です 読者をやめる 読者になる 読者になる

2015年のCGI入門

前の記事にも書いたとおり、

2015年現在、プログラミング入門者がCGIを動かそうとすると、とりわけMac環境については情報が少なく、畢竟茨の道を歩まざるをえない。

上の記事ではある程度のエッセンスに触れはしたものの、「じゃあ具体的にはどうすればいいの?」ということまでは言及しなかったので、ここでは自分がどのような手順を踏んだのか、なるべく簡潔に紹介してみたい。

初めに免責事項として明記しておくと、これはあくまで非エンジニア&プログラミング入門期にある僕が、個人的な興味をもとに、自分の限定的な環境下で、自分が納得する程度まで行った過程の記録に過ぎないので、間違いや過不足もそれなりに含まれていると思う。

その中には致命的な思い違いもあるかもしれないし、それによって、ここに書いたことをそのまま実行した誰かが大変な目に遭うこともあるかもしれないけれど、そのことを申し訳なく思うとしても一切の責任を取ることはできないので、その前提でお付き合い願いたい。

今回のゴール

免責に続いて今回の目的地、さしあたっての終着点を明示しておくと、以下のCGIスクリプト(コード)を実行して、ブラウザで確認するまで、としたい。

#!/usr/bin/env perl
use strict;
use warnings;

print "Content-Type: text/html; charset=UTF-8;\n\n";
print "<h1>Hello CGI!</h1>";

上手くいけば、こんな風に見えるはず。

f:id:note103:20150406001601p:plain

環境構築

上記のとおり、実行結果はブラウザで確認する。ブラウザで確認するためには、サーバーを動かさなくてはいけない。全世界の誰でも見られるようにするには相応の手間がかかるので、「とりあえず手元で見られれば良い」という用途なら「ローカル開発環境」を構築してそれを使う。

ローカル開発環境の作り方として、ここではVagrantを使う。
Vagrantの導入についてはドットインストールが素晴らしい。

いやその前に、Vagrantって? というか開発環境って? という人は同じくドットインストールのローカル開発環境講座をザラッと見てもらってもいいかもしれない。

Mac用: http://dotinstall.com/lessons/basic_localdev_mac
Windows用: http://dotinstall.com/lessons/basic_localdev_win

ちなみに、開発環境以前の環境として、僕が使っているMacのヴァージョンは結構古くて、Yosemiteはおろかその前のMavericksすらスキップしていて10.8.5です。
でも、たぶんそんなに問題はないはず。(たぶん)

話を戻しつつ軽く脱線すると、僕が初めてローカル開発環境を手元に構築できたのは上記のドットインストール講座を見たからで、本当にありがたかった。

その前にXAMPPを使ったことはあったけど、本当にワケわからなかったので、僕の感覚では初心者にはVagrantの方が向いていて、XAMPPなどは多少知識があった方が使いやすいのでは、と思っている。

さらに脱線を続けると、PHPは初心者向きだなんてよく言われるけれど、これもブラウザで実行結果を見るためにサーバー環境が必要で、最近のPHPではビルトインサーバーなんて言って(たしか5.4以降とか)、すぐに結果を確認できるようになっているようだけど、僕が初めてトライした頃はギリギリそういう状況ではなくて、書いたコードを実際に見るまでの道のりがつらすぎて挫折、という目に遭ったりしたので、その時はPHPなんだよ、全然ハードル高いじゃん……と思ったし、そのPHPを初めて動かせたのがまさにこのVagrantで構築した環境だったりしたので、それでようやくPHPHello Worldがブラウザに出てきたときは本当に嬉しかったものだった。

閑話休題。以下では、上に紹介したVagrant講座の第1回、またはローカル開発環境講座の最初の数回をもとに、VitualBoxやVagrant自体のインストールはすでに済んでいるものとする。

今回使う仮想マシンはCentOS6.5で、以下のサイトの上方にある検索欄で「centos」と打ち込むとおそらくそのトップに「chef/centos-6.5」というのが出てくるのだけど、それを使う。
Discover Vagrant Boxes | Atlas by HashiCorp

最初にやることは、その仮想マシンを入れる場所としてディレクトリ(フォルダ)を作成すること。
ようは舞台を立てるための舞台を立てるようなものか。環境づくりのための環境づくり。こういう事前準備が延々と連なって元の目的が遠ざかっていくような感覚をヤックシェイヴィング(yak shaving/ヤクの毛刈り)と言うみたい。

yak shaving」でちょっと検索したら、以下の記事が面白い。
yak shaving で人生の問題の80%が説明できる問題 - bkブログ

というかこの行為じたいがいかにも一種のyak shavingだ。

あらためて、手元に今回用のディレクトリを作る。CGIの練習なので「cgi_lesson」とでもする。

$ mkdir cgi_lesson
$ cd cgi_lesson

おもむろにVagrant boxを取得。

$ vagrant init chef/centos-6.5

すると、同じディレクトリ内にVagrantfileができるので、一旦それをエディタで開く。
30行目ぐらいに以下のような行があるので、

 # config.vm.network "private_network", ip: "192.168.33.10"

行頭のコメントを外す。

  config.vm.network "private_network", ip: "192.168.33.10"

ちなみにこの時、以下のように記述すると、同じネットワーク内なら別マシンからもアクセスできるようになる。

  config.vm.network :public_network, ip: "10.0.1.100", bridge: "en0: Wi-Fi (AirPort)"

僕は自宅の同一Wi-fi内のいろんなデバイス/マシンからアクセスしたいことがあるので、これを使うことが多い。前者のprivate_networkと併記することもできる。

public_networkについては以下でも少し触れているので、上手く動かなかった場合も含めて必要に応じてどうぞ。
http://note103.hateblo.jp/entry/2014/07/08/114457
http://note103.hateblo.jp/entry/2014/07/25/001219

ちなみに、上記のIPアドレスはあくまで任意のもので、その数字じゃなきゃ駄目ってことではない。255まで、とかいろいろ制限や理由があると思うのでそれは各位調べてください。(僕も調べます)

そんなVagrantfileを保存して、Vagrantを起動。

$ vagrant up

起動完了したら、vagrantアカウントでssh接続。

$ vagrant ssh

中に入れたらOK。(普通入れる)
こんな感じか。

$ [vagrant@localhost ~]$

httpdインストール

これでCentOS6.5は起動されたけど、まだWebサーバーは起動していない。というかインストールされてすらいない。だからブラウザからアクセスすることもまだできない。

よって、httpdサービスというのを入れる。

vagrantアカウントで仮想マシンに入って(すでに入っているならそのまま)、

$ vagrant ssh

httpdyumインストール。

$ sudo yum -y install httpd

起動。

$ sudo service httpd start

ついでに、以後は勝手に起動するようにしておく。

$ sudo chkconfig httpd on

この辺りの作業もドットインストールで教えてもらいました。
#06 仮想マシンに接続してみよう | Vagrant入門 - プログラミングならドットインストール

なんて言ってるうちに、この時点で以下のURLに飛ぶと、Apacheのテストページが反映されるはず。

http://192.168.33.10/

public_networkを有効にしているなら、これも。

http://10.0.1.100/

こんなやつ。

f:id:note103:20150406002422p:plain

ということで、これでようやく舞台の設置が完了。
この後は、この仮想マシン/サーバー上にCGIのコードを置いて、動かして、ブラウザで見るという流れです。

スクリプト設置&実行まで

舞台の設置が完了。と断言したばかりだけど、実はこの仮想マシン(chef/centos-6.5)にはPerlが入っていなくて、しかし冒頭に示したCGIスクリプトPerlで書かれているので、とりあえずPerlを入れる。

$ sudo yum -y install perl

で、/var/www/以下にあるcgi-binというディレクトリへ移動。

$ cd /var/www/cgi-bin/

余談ながら、「cd /var/w」ぐらいまで打ってからTabボタンを押すと「cd /var/www/」まで勝手に補完される。その後、「c」を押してまたTabを押すと「cd /var/www/cgi-bin」まで一気に補完される。地味ながら、チリも積もれば的に人生の時間を節約できる。

cgi-binディレクトリ内部に入ったら、今回の主役であるCGIファイルを作る。ファイル名は「hello.cgi」にしましょう。

$ sudo vi hello.cgi

Viが起動するので、「i」でインサート(挿入)モードに。記載する内容は以下。(上記したけど再掲)(親切!)

#!/usr/bin/env perl
use strict;
use warnings;

print "Content-Type: text/html; charset=UTF-8;\n\n";
print "<h1>Hello CGI!</h1>";

インサートモードなら普通にコピペできるはず。(このぐらいの分量ならそのまま書いても良いでしょうけど)

で、ファイルを保存。
今回はViの使用方法についてはとくに触れないけれど、ここだけ言うとEscボタンでノーマルモードに戻ってから「:wq」とすれば保存されてファイルも閉じられる。

さあ出来た!と思って、これでブラウザにアクセスすると、こんな感じになる。

f:id:note103:20150406002801p:plain

もちろん、見たい画面はコレジャナイ。

これは先の記事の半ばに書いた、
http://note103.hateblo.jp/entry/2015/04/01/154344

CGIが動かない3大要素の2番め、

2. ファイルのパーミッション設定で実行属性が付いていない。

にド真ん中から衝突している。

とりあえず今いる「/var/www/cgi-bin/」ディレクトリ内で、対象ファイルのパーミッション状況を確認すると……

$ ls -l

こんな感じで出てくる。

-rw-r--r--. 1 root root   5  4月  5 14:00 2015 hello.cgi

これまた以前のCGI記事で少し触れたけど(というかドットインストールを紹介しただけだが)、「-rw-r--r--」というのがパーミッションの内容を表している。

翻訳すると、「このファイル、オーナーは読み書きまでOK。グループと他人は読むだけOKってなってるよ」と言っている。

さらに翻訳すると、「このファイルではオーナーもグループも他人も、ようは誰も実行属性を持っていないよ」ということを言っている。よって、こんな感じでそれを付けてやる。

$ sudo chmod a+x hello.cgi

で、もう一度確認すると、

$ ls -l

こんな感じに変わってる。

-rwxr-xr-x. 1 root root 130  4月  5 14:00 2015 hello.cgi

で、あらためてアクセスすると……

f:id:note103:20150406003028p:plain

Congrats!! \(^o^)/

CGI.pmを動かす

ここまでで当初の目標は達成しているのだけど、ついでにこんなコードを動かしてみたくなったとしよう。

#!/usr/bin/env perl
use strict;
use warnings;
use CGI qw (:standard);

print header;
print h1('Hello CGI.pm!');

PerlモジュールのCGI.pmを使ったコード。4行目でCGIモジュールをuseしてますね。
(ちなみに、このコードは前回紹介した結城浩さんの書籍で紹介されていたサンプルコードを見ながら作成しました)

このファイルをhello.cgiと同じ /var/www/cgi-bin/ ディレクトリに、hello2.cgiという名前で保存する。
パーミッションをさっきと同じ「-rwxr-xr-x」にして(数字で言うと755。とはいえ、実際には実行属性があればいいはずなので755じゃなきゃ駄目ってことではないはず)、ブラウザでチェックするとこんな感じになるはず。

f:id:note103:20150406003514p:plain

見覚えがありますね。しかし理由はさっきと違って、マシンにCGI.pmが入っていないから。

ここで、前回の記事の以下が効いてくる。

3. PerlスクリプトCGI.pmを使う際にyumperl-CGIがインストールされていない。

なので、インストール。

$ sudo yum -y install perl-CGI

で、ブラウザにアクセス。

f:id:note103:20150406003541p:plain

Congrats!!! \(^o^)/

そして伝説へ……

ということで、けっこうアッサリ終わったけど(当人比)、実は上記が動いているのって、深遠な理由による「/var/www/cgi-bin/ にファイルを置く」というセオリーに素直に従っているからで、だから前回のCGI記事に書いた httpd.conf のカスタマイズも一切行っていないし、それゆえ自分的には考えられるかぎり最短ルートの実行工程なのだけど、もし今回のCGIファイルを別のディレクトリに置きたいとか、その他もう少し凝ったことをやろうなんて思ったら、そういう気にしなきゃいけないことがまだまだどんどん出てくる。

一方、上記のような最短ルートがなぜか(というか必要とされていないと思われているからかもしれないけど)、あまりよそでは見かけないので、頑張って書いてみました。

実際には、2015年の今この瞬間においても、「なぜ?」と聞かれても上手く答えられないような理由(それこそ深遠な)や状況下において、CGIスクリプト(コード)を動かしてみたいと思っているプログラミング入門者はけっして少なくはないはずで(多くもないだろうけど)、少しでもそういう人たちの役に立ったら嬉しいです。

次回予告。
そんな入門者の次の欲望としては、もし僕と同じような指向を持つならば、今度は同じことを手元のローカル環境ではなく、全世界の誰もがアクセスできる場所でやってみたい、公開してみたい、と思うに違いない。

「Hello CGI!」としか出ないページを全世界に公開して何が嬉しいんだ? と思われるかもしれないけど、そう思える人は対象ではないから安心してもらっていい。でも、そんな欲望を持つ人は世界のどこかに確かにいるし、そのことを知って損することもないだろう。(得にもならないだろうけど)

具体的には、さくらのVPSなどを借りて、そこで公開するまでの手順を書いてみたい。まあ、やることはほとんど今回と同じだと思うけど、そのほんのわずかの違いをどうジャンプしたらいいのか(どの場所から、どうやって跳べばいいのか)、ということがなかなかわかりづらいとも思うので。

以上です。