AWS EC2 で HTML ファイル表示　薬剤管理システムデモ

医療人2030のコンペも近づいてきたので共同開発している
薬剤管理システムの
試作品を作る必要があり
AWSを利用してシステム作成しました！

Amazon EC2
Amazon Machine Image (AMI) 
Amazon Linux 2　を使用して
HTMLファイルを表示する仕組みを作成しました

## まずはセキュリティ対策を実施

多要素認証（MFA）を追加

https://qiita.com/tmknom/items/303db2d1d928db720888

IAM ユーザー

https://qiita.com/kzykmyzw/items/ca0c3276dfebb401f7d8


### 実際にEC2を利用してみる

Amazon Linux 2


https://stakiran.hatenablog.com/entry/2019/05/22/203921

https://dev.classmethod.jp/articles/saichan-20220107/

セキュリティグループは仮想ファイアウォールとして機能し、
関連付けられたリソースに到達および離れるトラフィック（送受信される信号やデータ）を制御します。

https://docs.aws.amazon.com/ja_jp/vpc/latest/userguide/VPC_SecurityGroups.html

keyを作成後

## インスタンスを立ち上げる

## パブリックIPアドレス
グローバルIPアドレスはパブリックIPアドレスとも呼ばれ
インターネットに接続されているコンピュータや通信機器を個々に特定するための
一意で割り当てられたIPアドレスのこと

AWS　の　インスタンスを実行した際の　パブリックIPアドレス　が
Amazon Linux 2　仮想マシンのIPアドレスとなる

この　IPアドレス　は移動するたびに変更されてしまうため

固定的なIPアドレスを設定する

インターネット経由でいつでも同じ番号でwebサーバーに接続できる

## Elastic IP

Elastic IP の
アドレスの関連付け

で先ほど作成した　Amazon Linux 2　仮想マシン　の　インスタンスIDが表示されるため選択して

関連付ける

これでインスタンスを確認すると パブリックIPアドレスが関連付けられているのがわかる

パブリックIP　は　webサーバーに　リモート接続したり　webブラウザで表示したりする際に必要

## Amazon Linux 2　httpとして接続できるよう設定
Amazon Linux 2　仮想マシンはデフォルトでsshという方法でしか接続できない

https://qiita.com/aiandrox/items/98ad9b7551481d890916

このままだとwebブラウザからアクセスしても何も表示されないので
接続方法としてhttpとして接続できるよう事前に設定しておく

起動したインスタンスのセキュリティグループに接続する

インスタンス　→　セキュリティグループ　の画面が表示されたら
対象となるセキュリティグループが表示された状態で
アクション→インバウンドルールのを編集

HTTP　を追加

インスタンスのユーザーネームとパブリック IP　が必要　ec2-user@[パブリック IP]

を実施すると最初は　[パブリック IP]　真正性を確立することができない。
ECDSA鍵の指紋は〇〇です。
本当に接続を継続しますか？

```
The authenticity of host '[パブリック IP]' can't be established.
ECDSA key fingerprint is 〇〇 (yes/no/[fingerprint])?
```

とメッセ―が表示されます
yesを押すと

```
       __|  __|_  )
       _|  (     /   Amazon Linux 2 AMI
      ___|\___|___|
```

ssh接続でAWS Linux 仮想マシンに接続が 可能となります！

その後

## webサーバーとなるApacheのインストール

## Apacheサーバーの起動

## 自動でApacheサーバーを起動する設定とする

## SCPによるファイル転送

## 一度のscpコマンドで直接ファイルを変更できるように変更

## ローカルでHTML確認
デスクトップの　index.html　の内容を変更します

HTML CSS ファイル作成
Bootstrapのコンテナ も利用しました


```
<!DOCTYPE html>
<html lang="ja">

<head>
	<!-- Bootstrap -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">


    <h3>&emsp;&emsp;&emsp;---医療人2030---</h3>
    <h3>&emsp;&emsp;&emsp;Medical Innovators</h3>

    <!--p class="lead">次世代医療を創る医療人2030コミュニティ MIRAI</p-->
    <p class="lead">&emsp;&emsp;&emsp;薬剤投与量確認システム</p>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <!-- cssで余白を大きくする -->
	<style>
		body {
			padding-top: 50px;
			background-color: lightgray;
		}

		.starter-template {
			padding: 40px 15px;
			background-color: white;
		}
	</style>
</head>
</head>





<body>
	<div class="container">
		<div class="starter-template">
            <form action="/demo/send.html">
                <p>----------------------------------------</p>
                <div>
                    <label for="email">    年齢&emsp;&emsp;&emsp;&emsp;</label>
                    <input type="text" name="email" id="email">
                </div>
                <div>
                    <label for="email">   性別&emsp;&emsp;&emsp;&emsp;</label>
                    <input type="text" name="email" id="email">
                </div>
                <div>
                    <label for="email">   身長&emsp;&emsp;&emsp;&emsp;</label>
                    <input type="text" name="email" id="email">
                </div>
                <div>
                    <label for="email">   体重&emsp;&emsp;&emsp;&emsp;</label>
                    <input type="text" name="email" id="email">
                </div>
                <div>
                <label for="email">クレアチニン</label>
                <input type="text" name="email" id="email">
                </div>
                <div>
                    <label for="email">薬剤選択&emsp;&emsp;</label>
                    <select name="month">
                    <option value="jan">エドキサバン</option>
                    <option value="feb">シロドシン</option>
                    <option value="mar">ファモチジン</option>
                    <option value="apr">レベチラセタム</option>
                    <option value="may">レボフロキサシン</option>
                    </select>
                </div>
                <div>
                    <p>----------------------------------------</p>
                    <button type="reset">リセット</button>
                    <a class="btn btn-primary" href="#">決定</a>


                </div>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
            </form>
        </div>
    </div>
</body>

</html>
```

上記ファイルを
scpコマンドで直接ファイルを変更

## まとめ

Amazon EC2
Amazon Machine Image (AMI) 
Amazon Linux 2　を使用して
HTMLファイルを表示する仕組みを作成しました

今後はLAMPも利用したシステムを開発したいと思います！