0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

画像ジェネレーターを真似して、AWS EC2に上げてみた

Last updated at Posted at 2022-12-02

 前回の続きです。

サーバー構築から設定

 AWS cloud9以外触れたことがないので、戦々恐々ですがとりあえず設定していきます。
 参考にした記事
image.png
image.png
image.png
 とりあえず、PHPが起動できるらしいAWS EC2を設定しました。パブリックDNS(IPv4)、IPv4パブリックIPは、SSHなるもので必要らしいので控えておきます。
画像を取り忘れましたが、RSA鍵なるものを設定してます。

SSHを利用したserverへの接続

 Tera Termなるものが、AWSのインスタンスに接続して、ApacheをDLするために必要だそうなので、インストールします。

 image.png
 起動して、ホストにパブリックDNS(IPv4)を入力して接続します。僕には、まったく詳細は分かりません…。詳しくは元記事を参照してください。
image.png
image.png
 参照記事のおかげで、どうやらAmazon Linux AMIに接続できたようです。

Apacheのインストールをするようです

 管理者権限にするために、「sudo -i」を入力するようです。その後、「yum install httpd」と入力してApacheをインストールするようです。
 「systemctl start httpd」と入力し、Apacheを起動し、「systemctl status httpd」と入力、緑色でActiveと表示されていれば起動されているようです。
 image.png

PHPをインストールする

 「yum install php」と入力し、PHPをインストールする。「php -v」と入力し、PHPがインストールされていることを確認する。
 PHPを有効化するために、「systemctl restart httpd」と入力する。

ファイルをサーバーに送る

 アクセス権限を付与するために、「sudo chown -R ec2-user /var/www/html」と入力する。

 その後、画像のようにファイルや送信する。
image.png

何故か出るエラー

 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からアクセスすると
image.png
image.png
 アクセスすることが出来ました!これで、画像ジェネレーターのようなものを作成することが出来ました。
 プログラミングに触れて一か月、PHPを真面目に触れて一週間、AWS EC2に触れて一日感動です。
 僕自身、4月からプログラマーになりますが、一か月前までプログラムに触れたことがなかったので、やっていけるか不安でした。ですが、少し自信になりました。

 良かったら、見てみて下さい。
 リンク

 こちらは最終的なコードです。

index.html
<!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>
profile.php
<?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);
?>

 次回以降、この画像ジェネレーターの改善記事を投稿するので、良かったら成長過程を見守ってくださると嬉しいです。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?