前期第06回 - oddmutou/jugyo-2025kyototech GitHub Wiki
やること
- php-fpm用コンテナの立ち上げ
- phpを利用した動的なウェブページの実現
webサーバー(apacheやnginx)とphpプログラムを繋げる便利なやつ
https://www.php.net/manual/ja/install.fpm.php
まずnginxのドキュメントルートの下にphpの動作確認用のphpプログラムを作成します。
vim public/phptest.php<h1>hello world!</h1> と出力するだけの簡単なPHPプログラムですね。
次に，php-fpmを動かすためのコンテナを起動するために，compose.yml に設定を追記しましょう。
vim compose.yml11行目から15行目の部分が，php-fpmを動かすためのコンテナについての部分です。webサーバー(nginx)のコンテナと同様に，コンテナの外の./publicをコンテナ内の/var/www/publicとしてマウントしています。phpからもWebサーバーと同じようにファイルにアクセスする必要があるからです。
9行目と10行目の depends_on は，起動の順番まちのための記述です。こう書いておくことで，phpコンテナが起動するのを待ってから，webコンテナが起動します。
最後にnginxの設定ファイルにphp-fpmと連携するための記述を追記します。
vim nginx/conf.d/default.conf7行目から13行目までが，今回の追記箇所です。 パスの最後が「.php」で終わるものについては，phpコンテナに処理を回してね，といった内容です。
以上の準備が整ったら docker-compose up しなおして， http://EC2インスタンスのホスト/phptest.php に接続してみてください。
大きな文字(h1)で，hello world と表示されましたね？成功です！
phpを用いて，現在の日時が表示されるWebページを作ってみましょう。
日本時間で表示してください。
PHPのDateTimeクラスを使いましょう。 https://www.php.net/manual/ja/class.datetime.php
JS一切使わずにアナログ時計を作ってみましょう。
図形の描画はCSSを使うか，HTML中にインラインでSVG( https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg )を書くかするとよいでしょう。
動作例: http://54.227.30.210/clock.php
時計の実装は以下の順でやってみるといいでしょう。
- SVGで、円を描いてみましょう
- 円の中に、12時を指す時針を描いてみましょう
- 時針を、3時を指すように90度傾けてみましょう
- 時針を、4時を指すように120度傾けてみましょう
- 時針を現在の時間に応じて傾けてみましょう
- 時針と同様に分針を実装してみましょう
- 同様に秒針も実装してみましょう
- 目盛りを描いてみましょう
実装例: https://github.com/oddmutou/jugyo-2025kyototech/commit/64be03201b9d701adae4315a57073c7afbeaabc5