前回の続きです。
サーバー構築から設定
AWS cloud9以外触れたことがないので、戦々恐々ですがとりあえず設定していきます。
参考にした記事
とりあえず、PHPが起動できるらしいAWS EC2を設定しました。パブリックDNS(IPv4)、IPv4パブリックIPは、SSHなるもので必要らしいので控えておきます。
画像を取り忘れましたが、RSA鍵なるものを設定してます。
SSHを利用したserverへの接続
Tera Termなるものが、AWSのインスタンスに接続して、ApacheをDLするために必要だそうなので、インストールします。
起動して、ホストにパブリックDNS(IPv4)を入力して接続します。僕には、まったく詳細は分かりません…。詳しくは元記事を参照してください。
参照記事のおかげで、どうやらAmazon Linux AMIに接続できたようです。
Apacheのインストールをするようです
管理者権限にするために、「sudo -i」を入力するようです。その後、「yum install httpd」と入力してApacheをインストールするようです。
「systemctl start httpd」と入力し、Apacheを起動し、「systemctl status httpd」と入力、緑色でActiveと表示されていれば起動されているようです。
PHPをインストールする
「yum install php」と入力し、PHPをインストールする。「php -v」と入力し、PHPがインストールされていることを確認する。
PHPを有効化するために、「systemctl restart httpd」と入力する。
ファイルをサーバーに送る
アクセス権限を付与するために、「sudo chown -R ec2-user /var/www/html」と入力する。
何故か出るエラー
index.htmlは反映されているのですが、ローカル環境で動いていたprofile.phpが動きません。
「Hello world」やコードをコメントアウトして調べると、画像の再生成をしているコードでエラーを出している模様でした。
それ以外は何もわからずに、QiitaのQ&Aでお聞きしました。
どうやら、ローカル環境とAWS EC2の環境が違うこと(モジュールの不足が考えられる)、imagecreatefrompngにはGDモジュールが必要だということを教えて頂きました。Q&Aページ
モジュールなるものがあるのかと、ここで認識しました。以後気を付けて行きます。
Tera Termを使って、GDモジュールをインストールしていきます。
yum list | grep gd
yum install php-gd.x86_64
GDモジュールがインストールされました。
AWS EC2上で実行
さて、気を取り直してURLからアクセスすると
アクセスすることが出来ました!これで、画像ジェネレーターのようなものを作成することが出来ました。
プログラミングに触れて一か月、PHPを真面目に触れて一週間、AWS EC2に触れて一日感動です。
僕自身、4月からプログラマーになりますが、一か月前までプログラムに触れたことがなかったので、やっていけるか不安でした。ですが、少し自信になりました。
良かったら、見てみて下さい。
リンク
こちらは最終的なコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>闘病プロフィールメーカーα版</title>
</head>
<body>
<h1>闘病プロフィールメーカーα版</h1>
<p>22.12.01</p>
<!--formを用いて、文字と画像を合成するphpファイルにデータを渡す-->
<form action="profile.php" method="post">
性別:<input type="text" name="gender"><br>
誕生日:<input type="text" name="birth_day"><br>
病名:<input type="text" name="sick"><br>
自由欄:<input type="text" name="hobby"><br>
<br>
<input type="submit" value="生成">
<br>
<br>
<a href="https://twitter.com/nemuihito912">Twitter</a>
</form>
</body>
</html>
<?php
//入力フォームから無毒化して、文字を受ける
$gender = htmlspecialchars($_POST['gender']);
$birth_day = htmlspecialchars($_POST['birth_day']);
$sick = htmlspecialchars($_POST['sick']);
$hobby = htmlspecialchars($_POST['hobby']);
// コンテントタイプを設定します
header('Content-Type: image/png');
//画像を呼び出す
$url = '../html/toubyo_profile.png';
// 画像を再生成する
$im = imagecreatefrompng($url);
// 黒を生成する
$Black = imagecolorallocate($im, 0, 0, 0);
// フォントを設定する
$font = '../html/UDDigiKyokashoN-B.ttc';
// テキストを追加する
imagettftext($im, 30, 0, 105, 65, $Black, $font, $gender);
imagettftext($im, 30, 0, 100, 146, $Black, $font, $birth_day);
imagettftext($im, 30, 0, 100, 230, $Black, $font, $sick);
imagettftext($im, 20, 0, 50, 330, $Black, $font, $hobby);
// png生成して、画像をメモリから排除する
imagepng($im);
imagedestroy($im);
?>
次回以降、この画像ジェネレーターの改善記事を投稿するので、良かったら成長過程を見守ってくださると嬉しいです。