LoginSignup
0
1

More than 1 year has passed since last update.

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

Posted at

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

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

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

多要素認証(MFA)を追加

IAM ユーザー

実際にEC2を利用してみる

Amazon Linux 2

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

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という方法でしか接続できない

このままだと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も利用したシステムを開発したいと思います!

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