シンプルなWebサービスをEC2デプロイ ハンズオン

INAMURA

はじめに

関係各位、AWS Summit Tokyo@幕張メッセ お疲れ様でした。
最新の情報や、サービス、AWSに携わる人と触れ合えることは控えめに言って最高でした。

ということで気分を引き締め、今まで自分の中で雰囲気だった、サービスをEC2にデプロイしてみるをしてみようと思います。
4月入社の新人もやらないようなことかもしれませんが、「まぁー仕方ないよねー、わい分かってねぇーんだもんwww」ということでサクッと構築していきます。

構成図

ハンズオン

構築のながれ

1.HTML/CSS/JavaScriptの作成

2.EC2の設定

1.HTML/CSS/JavaScriptの作成

1.1. HTML

現在の日本時間を表示するだけのシンプル構成なHTML

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>現在の日本時間</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>現在の日本時間</h1>
        <div id="time-display"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

1.2. CSS

styles.css

body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

h1 {
    margin: 0;
    margin-bottom: 10px;
}

#time-display {
    font-size: 48px;
    font-weight: bold;
}

1.3. JavaScript

script.js

function displayJapanTime() {
    const timeDisplay = document.getElementById('time-display');
    const now = new Date();
    const japanTime = new Date(now.toLocaleString("en-US", { timeZone: "Asia/Tokyo" }));
    const formattedTime = japanTime.toLocaleTimeString();

    timeDisplay.textContent = formattedTime;
}

displayJapanTime();
setInterval(displayJapanTime, 1000);

1.4. フォルダの構成


1.5. ブラウザでの確認

ブラウザに index.htmlを ドロップ&ドラッグして画面の確認

2.EC2の設定

2.1. EC2インスタンス作成

Amazon Web Services (AWS) アカウントにログインし、下記設定値のEC2インスタンスを作成。

項目 設定値
インスタンスタイプ t2.micro
AMI Amazon Linux 2 Kernel 5.10 AMI 2.0.20230418.0 x86_64 HVM gp2
サブネット パブリックサブネット
パブリック IP の自動割り当て ◯

2.2. セキュリティグループの設定

インスタンス作成時にセキュリティグループを設定し、ポート80（HTTP）とポート22（SSH）を、自身のIPアドレスからのアクセスに開放。

タイプ プロトコル ポート範囲 ソース CIDR
HTTP TCP 80 マイIP 【自身のIP】
SSH TCP 22 マイIP 【自身のIP】

2.3. インスタンスに接続

2.3.1. インスタンスが起動後 SSHによる接続

※作成時にダウンロードした秘密鍵ファイル（.pem）を使用して認証。

【ローカルでのコマンド】

tetutetu214@mbp .ssh % ssh -i 【秘密鍵】.pem ec2-user@【1 で構築したEC2のパブリックIP】

2.3.2. 必要なパッケージのインストール

インスタンス接続後、必要なパッケージをインストール

【EC2でのコマンド】

[ec2-user@ip-192-168-20-74 ~]$ sudo yum update -y
[ec2-user@ip-192-168-20-74 ~]$ sudo yum install -y httpd

2.3.3. Apacehを起動及び自動起動設定

インストールが完了後、インスタンス起動時に自動的に起動するようにApacheを設定する

Apache(アパッチ)とは？
ざっくり言うと『URLに応じてサーバー内に蓄積された情報を提供するシステム』のこと。
インストールしたApacheのデフォルトのドキュメントのルートディレクトリに配置することで、URLでの情報を提供できる。

【EC2でのコマンド】

[ec2-user@ip-192-168-20-74 ~]$ sudo systemctl start httpd
[ec2-user@ip-192-168-20-74 ~]$ sudo systemctl enable httpd

2.3.4. ウェブサービスのファイルをアップロード:

自身のコンピュータからEC2インスタンスに対して、ウェブサービスのファイル（index.html、styles.css、script.js）をアップロードする。
アップロードには、SCPコマンドを利用する。

【ローカルでのコマンド】

#HTML.CSS.JavaScriptを配置したフォルダへ移動
tetutetu214@mbp % cd /Users/tetutetu214/projects/20230429_JapanTimeNow/ 

#SCPコマンド
tetutetu214@mbp 20230429_JapanTimeNow % scp -i /Users/tetutetu214/.ssh/ 【秘密鍵】.pem index.html styles.css script.js ec2-user@【1 で構築したEC2のパブリックIP】:/tmp/    

#コマンド入力後のレスポンス
index.html                                                                                100%  414    11.6KB/s   00:00    
styles.css                                                                                100%  421    14.5KB/s   00:00    
script.js                                                                                 100%  366    16.7KB/s   00:00

2.3.5. アップロードしたファイルを適切なディレクトリに移動

アップロードしたファイルをApacheのデフォルトのドキュメントルートディレクトリ(/var/www/html/)に移動。

【EC2でのコマンド】

[ec2-user@ip-192-168-20-74 ~]$ sudo mv /tmp/index.html /tmp/styles.css /tmp/script.js /var/www/html/

挙動の確認

1.EC2のパブリックIPアドレスをブラウザに入力

さいごに

実際に検証したかったことは『PrivateLinkでサービスを表示させる』ことから検証を始めたのですが、載っけるサービスがなかったことから始まりましたが、サービス自体は問題なくデプロイできました。
こちらの簡易的なサービスを、当初の予定のようにPrivateLinkのために利用したり、CI/CDの検証のために利用したりと作り終わってからですが、案外今後の拡張性という意味では構築してよかったのかもしれません。

Last modified: 2023-05-03

Author