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

　<a href="https://qiita.com/TaskArai/items/d44d324ca1888eb6ec0f">前回</a>の続きです。

## サーバー構築から設定
　AWS cloud9以外触れたことがないので、戦々恐々ですがとりあえず設定していきます。
　<a href="https://qiita.com/harufuji/items/4fcd8f991fab5ad3354a">参考にした記事</a>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984231/ae72f5c3-ff39-403b-d4a3-03f3920003ef.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984231/3cdc19ec-d6bb-51da-55ec-b8312d1a509d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984231/859f909e-7ad9-89ce-16b8-854666c5b387.png)
　とりあえず、PHPが起動できるらしいAWS EC2を設定しました。パブリックDNS(IPv4)、IPv4パブリックIPは、SSHなるもので必要らしいので控えておきます。
 画像を取り忘れましたが、RSA鍵なるものを設定してます。

## SSHを利用したserverへの接続
　<a href="https://ja.osdn.net/projects/ttssh2/">Tera Term</a>なるものが、AWSのインスタンスに接続して、ApacheをDLするために必要だそうなので、インストールします。

　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984231/b8fce2f4-b3ec-a7e7-6b5d-f3be44ea507d.png)
　起動して、ホストにパブリックDNS(IPv4)を入力して接続します。僕には、まったく詳細は分かりません…。詳しくは<a href="https://qiita.com/harufuji/items/4fcd8f991fab5ad3354a#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%92%E4%BD%9C%E3%82%8B">元記事</a>を参照してください。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984231/55a057cd-2066-50f8-33cb-ec36181a892a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984231/077179ee-0e05-8e86-a271-d603910b6b91.png)
　参照記事のおかげで、どうやらAmazon Linux AMIに接続できたようです。

## Apacheのインストールをするようです
　管理者権限にするために、「sudo -i」を入力するようです。その後、「yum install httpd」と入力してApacheをインストールするようです。
　「systemctl start httpd」と入力し、Apacheを起動し、「systemctl status httpd」と入力、緑色でActiveと表示されていれば起動されているようです。
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984231/0cc46409-5259-c849-cff5-86906107349a.png)

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

## ファイルをサーバーに送る
　アクセス権限を付与するために、「sudo chown -R ec2-user /var/www/html」と入力する。

　その後、画像のようにファイルや送信する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984231/e0a8d3af-f642-bdfc-d561-df994ef50577.png)

## 何故か出るエラー
　index.htmlは反映されているのですが、ローカル環境で動いていたprofile.phpが動きません。
　「Hello world」やコードをコメントアウトして調べると、画像の再生成をしているコードでエラーを出している模様でした。
　それ以外は何もわからずに、QiitaのQ&Aでお聞きしました。
　どうやら、ローカル環境とAWS EC2の環境が違うこと（モジュールの不足が考えられる）、imagecreatefrompngにはGDモジュールが必要だということを教えて頂きました。<a href="https://qiita.com/TaskArai/questions/0d4b0bbd2b476cf5499e">Q&Aページ</a>
 モジュールなるものがあるのかと、ここで認識しました。以後気を付けて行きます。
　Tera Termを使って、GDモジュールをインストールしていきます。
```
yum list | grep gd
```

```
yum install php-gd.x86_64 
```
　GDモジュールがインストールされました。

## AWS EC2上で実行
　さて、気を取り直してURLからアクセスすると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984231/e3d0aa35-fa7e-6b63-158a-ebe6680bb7b3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984231/295e570c-f54d-d384-6665-8b5cff484fc9.png)
　アクセスすることが出来ました！これで、画像ジェネレーターのようなものを作成することが出来ました。
　プログラミングに触れて一か月、PHPを真面目に触れて一週間、AWS EC2に触れて一日感動です。
　僕自身、4月からプログラマーになりますが、一か月前までプログラムに触れたことがなかったので、やっていけるか不安でした。ですが、少し自信になりました。

　良かったら、見てみて下さい。
　<a href="http://ec2-13-231-114-173.ap-northeast-1.compute.amazonaws.com/index.html">リンク</a>

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

```: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);
?>
```


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