0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AWSのハンズオン学習「第1弾」クラウド入門 - AWS で、ゼロから Web サーバーを立ち上げよう編

0
Last updated at Posted at 2025-11-19

はじめに

みなさんこんにちは!Ryuです!AWS資格SAAとSAPを取得しているのですが、実務未経験ということで実際の現場で通用するスキルを身につけるためにAWS Workshopsを通して実際に構築した内容を技術ブログとして記録していきます。
AWS Workshopsの中には初心者から上級者レベルの構成が多数あるので今後いろいろのな構成を構築していくって思うととてもワクワクします笑
自分自身まだ初心者ではあるのですが、記事を通して皆様の学びにもなれば嬉しいです!

完成イメージ

今回作成するのは以下の構成図。
Screenshot 2025-11-19 at 11.53.28 AM.png

今回構成するアーキテクチャはVPCを作成しパブリックサブネット内にEC2を立ち上げサーバーを構築していくというかなり簡単なものになります。

これに加えてAWS Amplify でのデプロイ構成も作っていきます。

以下のリンクから今回の構成を参照いただけます。

使用するサービスと役割

  • VPC: AWS上に作る“自分専用のネットワークの箱”
  • EC2: 仮想サーバー
  • amplify(オプション): フロントエンドでアプリ作るなら、裏側の面倒ごと全部AWSが持ってくれるサービス

では早速構築手順に入っていきます!

VPC作成

まずは自分専用の仮想ネットワークを作成していきます。
基本的にはこの自分専用のネットワーク内に各サービスを配置していく形になります。
Screenshot 2025-11-19 at 12.29.43 PM.png

VPCをクリックできましたらVPCを作成に進みます。
Screenshot 2025-11-19 at 12.36.35 PM.png

VPC作成ウィザードに画面が移行するので早速設定していきたいとおもいます!
Screenshot 2025-11-19 at 12.37.07 PM.png

まず上から順に選択項目を説明していきます。
[作成リソース]:こちらはVPCなどを選択します、VPC以外の関連リソースも合わせて作成可能。
[名前タグ]:わかりやすいVPCのネームをつけてください。
[IPv4 CIDR]:使用するIPアドレスの範囲を決めてください。
[IPv6 CIDR]:サービスの大半は IPv4 で十分なので、なしに設定。(後から追加可能)
[テナンシー]:共有ホストで動かすか専有ホストで動かすか、基本的にはセキュリティ要件で指定がない限りデフォルト設定になります。
Screenshot 2025-11-19 at 12.42.49 PM.png

ではスクロールして
[AZの数]:今回は簡単な構成になるのでシングル構成の1を指定します。
[パブリックサブネット]:今回はインターネットからアクセス可能なサーバーを立ち上げるので2を選択します。
[プライベートサブネット]:今回はパブリックサブネットを使用するのでなしなります。
[NATゲートウェイ]:これはプライベートサブネットをインターネットと接続するためのものになりますのでなしです。
[VPCエンドポイント]:インターネットを通らず AWS の内部ネットワークでアクセスできる機能、今回は簡単な構成なのでなしになります。
[DNSオプション]:この2つに関してEC2 に “ホスト名(名前)” を付けるかどうか。とVPC 内で DNS を使って名前解決できるかどうか。なので基本ありで構成を作成します。
Screenshot 2025-11-19 at 1.06.30 PM.png

以上の設定でVPC作成してください。

EC2作成

では次にEC2を作成していきます。
Screenshot 2025-11-19 at 1.22.46 PM.png

インスタンス起動をクリックします
Screenshot 2025-11-19 at 1.23.58 PM.png

起動するサーバーの設定を行ってきます。
[名前]:サーバーの名前、どのサーバーかわかりやすく判断できるものをオススメします。
[AMI]:特に指定はないのでデフォルトで設定されているものをそのまま選択。
Screenshot 2025-11-19 at 1.27.28 PM.png

スクロールしていくと
[インスタンスタイプ]:今回は無料枠のデフォルトで指定されているものを指定します。
[キーペア]:キーペアは、EC2インスタンスにSSHでアクセスする際に使用する認証情報です。今回は特にSSH接続するような構成ではないのでなしになります。(本番環境では必ずキーペア作成する必要がある)
Screenshot 2025-11-19 at 1.31.49 PM.png

さらにスクロールするとネットワークの設定に入っていきます。
[VPC]:先ほど作った自分のVPCを選択。
[サブネット]:パブリックサブネット好きなもの1つ選択。
Screenshot 2025-11-19 at 4.24.36 PM.png

最後のネットワークの設定としてセキュリティーグループ(インスタンスレベルでのファイアウォール機能です。どのトラフィックを許可するかを定義します。)作成します。
[セキュリティーグループ名]:セキュリティグループの名前(SGだとすぐにわかる名前にする)
[セキュリティグループルール]インバウンドとしてHTTPを選択します、HTTPだとソースは自動的に0.0.0.0/0に設定されます。
※SGはステートフルなためインバウンドを設定するれば、自動的にアウトバウンドも設定される。
Screenshot 2025-11-19 at 4.29.28 PM.png

ではEC2最後の設定としてユーザーデータの設定をして終えたいと思います。
ではユーザーデータスクリプトとはなんなのか?
答えはEC2 を起動したときに “自動で実行される初期設定スクリプト”になります。

今回ユーザーデータに入力したスクリプトはシステム更新、Apache HTTPサーバーのインストール、サービスの起動を順次実行します。
Screenshot 2025-11-19 at 4.38.18 PM.png

Webアプリケーションの確認

EC2インスタンスが完成したので、実際にWebアプリケーションが機能しているか確認していきたいと思います。

作成したインスタンスを確認しパブリックIPv4アドレスをコピーしてください。
Screenshot 2025-11-19 at 4.46.19 PM.png

そしてコピーしたアドレスをブラウザーにてアクセスすると...
無事にアクセスできたことを確認できました!(やっぱり自分が作ったサーバーが機能しているのを確認するのはいつも感動します...)
Screenshot 2025-11-19 at 4.49.41 PM.png

AWS Amplify でのデプロイ

ではお次はAWS Amplifyを使ってデプロイしていきたいと思います。

AWS Amplifyとは何か?
EC2 では仮想サーバーを管理する必要がありますが、Amplify は「サーバーレス」なサービスです。インフラストラクチャの管理が不要で、コンテンツの配信に集中できるサービスになっております。

早速デプロイを始めていきます。
まずはAWS Amplifyにアクセスしアプリケーションをデプロイをクリックします。
Screenshot 2025-11-19 at 5.00.41 PM.png

AmplifyではGit リポジトリと連携したデプロイと、ファイルを直接アップロードするデプロイの2つの方法があるみたいですが今回はGitなしで進めていきます。
Screenshot 2025-11-19 at 5.03.25 PM.png

アプリケーションの名前はAmplify の中で そのアプリを識別するための名前になりますのでわかりやすいものを設定します。
ハンズオン資料内にあるindex.htmlファイルをダウンロードしAmplifyにアップロードし保存してデプロイをクリックします。
Screenshot 2025-11-19 at 5.09.48 PM.png

これでAmplifyの基本的な設定は完了です。
Screenshot 2025-11-19 at 5.10.53 PM.png

最後に右上のデプロイされたURLにアクセスするをクリックすると...
はい!公開された Web サイトを確認することができます。
Screenshot 2025-11-19 at 5.11.45 PM.png

最後に

自分の学び

  • 同じ目的でもサービスによってアプローチ方法が違う。
  • Amplify はインフラを意識せずホスティングできる。

今回のハンズオンを通してマネジメントコンソールでインフラ構築できる素晴らしさを改めて実感できました、また言語化することによって曖昧だった部分の理解につながったので今後もたくさんAWS Workshopsを真似て構築してそれらを投稿していきたいと思います。

今回はこれで以上になります!ぜひみなさんもAWS Workshopsを利用して色々な構築方法に触れてみてください!

0
0
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
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?