DS243229 林理穂子作業記録

作業記録 - 2025年7月12日

実施した作業

AWSアカウントの作成

EC2インスタンスの作成とSSHログイン

EC2 Amazon Linuxの設定

Webサーバ(Apache)のインストールと設定

並行してMarkdown形式で作業記録を作成

作業記録をhtmlに変換し, EC2上のWebサーバで公開

SlackにURLを提出

作業詳細

AWSアカウントの作成

公式ドキュメントからAmazon EC2の基本情報を収集
- https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/concepts.html

エラー表示なくアカウント作成を完了

リージョンをアジアパシフィック（東京）に設定

EC2インスタンスの作成

以下の内容で作成
- 名前 : Mau-WebServer-Hayashi
- アプリケーションおよびOSイメージ : Amazon Linux
- キーペア : mau-diy
- ネットワーク設定 : SSHトラフィックとHTTPトラフィックを許可
- ストレージ : 20GiB
- パブリックIPアドレス : 52.195.187.213

SSHログイン

ターミナルを起動

読み取りと書き取りを許可するコマンドを入力

chmod 600 ~/Downloads/mau-diy.pem

接続するためのコマンドを入力

ssh -i ~/Downloads/mau-diy.pem ec2-user@52.195.187.213

接続を許可

Are you sure you want to continue connecting (yes/no/[fingerprint])? yes

ターミナルの表示が変わり、ログイン完了を確認

[ec2-user@ip-172-31-4-246 ~]$

EC2 Amazon Linuxの設定

Web検索でEC2 Amazon Linuxの設定について、情報を収集
- https://ninolog.com/set-amazonlinux-aws-ec2/
- https://denblog.info/archives/1732
- https://qiita.com/daikidomon/items/b7cc9622686139f7e440

chat GPTに基本の設定を質問し回答を取得

🔹 基本のセットアップ（共通）
項目目的コマンド例
システムを最新化セキュリティ＆安定性向上 sudo yum update -y
必要なツールのインストール Gitやcurlなど開発に必要 sudo yum install -y git curl
タイムゾーンの設定 JSTに合わせる（日本時間） sudo timedatectl set-timezone Asia/Tokyo
Pythonなど言語の確認開発・実行用 python3 --versionなど

項目	目的	コマンド例
システムを最新化	セキュリティ＆安定性向上	`sudo yum update -y`
必要なツールのインストール	Gitやcurlなど開発に必要	`sudo yum install -y git curl`
タイムゾーンの設定	JSTに合わせる（日本時間）	`sudo timedatectl set-timezone Asia/Tokyo`
Pythonなど言語の確認	開発・実行用	`python3 --version`など

セットアップすべき項目を検討
- パッケージの更新
- タイムコードの設定
- 文字コードを日本語に設定

パッケージの更新を実施

sudo yum update -y

既に最新の状態である旨が返ってきたため、次に移行

Dependencies resolved.
Nothing to do.
Complete!
[ec2-user@ip-172-31-4-246 ~]$

タイムコードを東京に設定

sudo timedatectl set-timezone Asia/Tokyo

タイムコードを確認し、問題ないことが確認できたため、次に移行

[ec2-user@ip-172-31-4-246 ~]$ timedatectl
Local time: Sat 2025-07-12 15:07:54 JST
Universal time: Sat 2025-07-12 06:07:54 UTC
RTC time: Sat 2025-07-12 06:07:53
Time zone: Asia/Tokyo (JST, +0900)
System clock synchronized: yes
NTP service: active
RTC in local TZ: no
[ec2-user@ip-172-31-4-246 ~]$

文字コードを日本語に設定

sudo localectl set-locale LANG=ja_JP.UTF-8

ロケールを確認し、問題ないことを確認

[ec2-user@ip-172-31-4-246 ~]$ localectl status
System Locale: LANG=ja_JP.UTF-8
VC Keymap: (unset)
X11 Layout: (unset)
[ec2-user@ip-172-31-4-246 ~]$

Webサーバ(Apache)のインストールと設定

公式ドキュメントで学習
- https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/UserGuide/CHAP_Tutorials.WebServerDB.CreateWebServer.html

Web検索でApacheのインストールに関する情報を収集
- https://zenn.dev/sway/articles/aws_publish_apache
- https://note.com/standenglish/n/ncc6efebe5bb5

chat GPTに「サーバーをインストールして、HTMLを公開する」ために設定すべき内容を質問し回答を取得

絶対に設定すべきこと【一覧】
ステップ内容必須か？
1 Apacheのインストール ✅ 必須
2 サーバーの起動＆自動起動設定 ✅ 必須
3 セキュリティグループでHTTP (80番ポート) を開ける ✅ 必須
4 HTMLファイルを公開ディレクトリに設置 ✅ 必須
5 権限・所有者設定（必要に応じて） ⚠️ 場合によっては必要
6 ファイアウォール（firewalld）の確認（※Amazon Linux 2なら基本不要） ⚠️ 場合によっては必要

ステップ	内容	必須か？
1	Apacheのインストール	✅ 必須
2	サーバーの起動＆自動起動設定	✅ 必須
3	セキュリティグループでHTTP (80番ポート) を開ける	✅ 必須
4	HTMLファイルを公開ディレクトリに設置	✅ 必須
5	権限・所有者設定（必要に応じて）	⚠️ 場合によっては必要
6	ファイアウォール（`firewalld`）の確認（※Amazon Linux 2なら基本不要）	⚠️ 場合によっては必要

Apacheをインストール

sudo yum install -y httpd

サーバーの起動

sudo systemctl start httpd

自動起動設定

sudo systemctl enable httpd

HTTPが許可されていることを管理画面上で確認
- セキュリティ>セキュリティグループ>インバウンドルール

作業記録をhtmlに変換し, EC2上のWebサーバで公開

Notionで記録した作業記録をHTMLに変換

Web検索でコマンドを調べる
- https://nanashi-technology.com/2023/03/aws-ec2-html/#toc2

HTMLをインスタンスにアップロード

scp -i ~/Downloads/mau-diy.pem ~/Downloads/index.html ec2-user@52.195.187.213:/tmp/

HTMLをアップロードしたところ、エラーが起きconnection closedになってしまった

Complete!
[ec2-user@ip-172-31-4-246 ~]$ sudo systemctl start httpd
[ec2-user@ip-172-31-4-246 ~]$ sudo systemctl enable httpd
Created symlink /etc/systemd/system/multi-user.target.wants/httpd.service → /usr/lib/systemd/system/httpd.service.
[ec2-user@ip-172-31-4-246 ~]$ scp -i ~/Downloads/mau-diy.pem ~/Downloads/index.html ec2-user@52.195.187.213:/tmp/
Warning: Identity file /home/ec2-user/Downloads/mau-diy.pem not accessible: No such file or directory.
The authenticity of host '52.195.187.213 (52.195.187.213)' can't be established.
ED25519 key fingerprint is SHA256:uCnqoNOD15YgGv/y28hzmfXUK/09RVuCr8z3acjJ1+Y.
This key is not known by any other names
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
Warning: Permanently added '52.195.187.213' (ED25519) to the list of known hosts.
ec2-user@52.195.187.213: Permission denied (publickey,gssapi-keyex,gssapi-with-mic).
Connection closed

chat GPTに質問し回答を取得
今いるのはEC2の中（リモートサーバー）
[ec2-user@ip-172-31-4-246 ~]$
これは すでにEC2にSSH接続している状態です。
つまり、scp で指定しているこのファイル：
~/Downloads/mau-diy.pem
~/Downloads/index.html
は Mac側にあるはずのファイルなので、EC2上では当然「そんなファイルないよ」となります。

ターミナルで新しいタブを開き、EC2の外からHTMLをアップロード

再度インスタンスに入る

ssh -i ~/Downloads/mau-diy.pem ec2-user@52.195.187.213

公開

sudo mv /tmp/index.html /var/www/html/index.html

公開完了！念の為別デバイスからもURLを叩き、問題がないことを確認
- http://52.195.187.213/

中間課題 - 7月16日追記

今後EC2を使用してチャレンジしたいこと

APIの活用

APIを活用すると、サイト来訪者それぞれに合わせた情報を与えたり、外部データをビジュアライゼーションして面白く見せたり、などができそう
- 世界中のニュースを取得：https://newsapi.org/
- ユーザーの地域を取得：https://ipinfo.io/
- 天気データ取得：https://openweathermap.org/
- GIF画像の検索：https://developers.giphy.com/
- 本の情報を取得：https://developers.google.com/books　など

画像・CSS・jsを用いたデザイン要素の公開

Markdown形式のテキストだけではなく、画像・CSS・jsを組み合わせて、魅力の伝わるサイト（もしくはアプリ）を作りたい

API・画像・CSS・jsを用いたサイトのイメージ

アクセスしてきたユーザーの地域と天気の情報をもとに、服装のおすすめを表示するサイト

地域と天気の情報をもとに、適切な服装にアバターが着替えるギミックを付ける

可能であれば複数の服装パターンを用意しておき、シーンやテンションなども選択可能にしたい