AWSでHELLO WORLDを公開する

Last updated at 2024-12-18Posted at 2024-12-16

はじめに

こんにちは、mamedogといいます。
私はもともとエンジニア以外の仕事をしていて、５年程前、エンジ二アに転職したのですが、プログラミングの学習の中で、書いたプログラムを公開するという点が難しいと感じた記憶があります。
その点を踏まえ、誰かのお役に立てればと思い、そのあたりの内容を記載していければと思います。

今回のゴール

下記の画像のように、htmlでHELLO WORLDを出力しファイルをインターネット上で公開することをゴールとしたいと思います。

AWSを触る前にイメージを確認

そもそも、Google Chrome等のブラウザを使ってインターネット上のサイトにアクセスし、パソコンの画面に表示された時、どのようなことが行われているでしょうか?

流れとしては以下になるかと思います。

パソコンからサーバーへファイルを要求
対象のサーバーからHTML等のファイルを返却
GoogleChromeがHTMLファイルを解析して、人間が見やすいように表示

上記を実現するためには何が必要でしょうか？

今、このqiitaを見ている人でしたらパソコンはあるかと思うので追加で用意する必要はなさそうです。

一般的な人はサーバーを所持していないかと思うので、そのあたりを追加で用意していく必要がありそうですね。

そのためサーバー周りの準備として下記のことが必要になります。

サーバーを用意する
サーバーに通信が到達するようにネットワークを設定する
通信到達後サーバーから適切なファイルを返却できるようにサーバーを設定する

これらの事項をAWSを利用して解決していこうと思います。

AWSで構築

では早速、AWSを使って上記の課題を解決していきましょう。
AWSのアカウントは作成されている前提で進めたいと思うので、実際にコンソールにログインしたところから解説していきます。

サーバーを用意する

AWSでサーバーを用意してくれるサービスはAmazon EC2(Amazon Elastic Compute Cloud)といいます。
こちらのサービスを使って今回サーバーを用意して行こうと思います。

まずはVPCを作成

いきなりEC2でサーバーを作っていきたいところなのですが、まずサーバーの置き場所となるネットワークを作ります。
サーバーが通信を行うためにはネットワークに所属させる必要があります。AWSでは、仕組上サーバーを作成する前段階としてネットワークを用意しておく必要があります。
ネットワークを作成するサービスは AmazonVPC(Amazon Virtual Private Cloud)です。

そのため、まずはVPCの作成から実施していきます。

コンソールにログイン

コンソールにログインすると下記のような画面になるかと思います。
そこからVPCを選んでいきましょう。
(最近アクセスしたサービス等に表示されないときは検索欄に「VPC」と入力して検索してください)

リージョンを選択
VPCに移動したら、東京リージョンを選択しましょう。

リージョンとは?
AWSは世界各地で展開されているサービスなので、世界の各地にデータセンターがあります。外国のデータセンターにサーバーを構築することもできますが、地理的に近い場所のほうが、通信速度等の面で安定しやすいため、日本でサービスを公開したい場合は東京を選択することが一般的です。

その後、上記が画面の「VPCを作成」からVPCを作成していきます。
「VPCを作成」をクリックすると下記の画面に遷移するかと思います。

各項目については下記を参考に設定してみてください.

作成するリソース:
VPCのみ
名前タグ: 任意の名前（なんでもいいのですが、一旦「mamedog_vpc」としときます。)
IPv4 CIDR ブロック:192.168.0.0/24
IPv6 CIDR ブロック:IPv6 CIDR ブロックなし
テナンシー:デフォルト
タグ:初期入力のまま（触らなくてOKです）

IPv4 CIDRブロック、IPv6 CIDRブロックとは？
所謂IPアドレスに関する設定です。
ネットワーク上でコンピュータ同士が通信するときには、それぞれのコンピュータにIPアドレスを設定する必要があります。
IPV4 CIDRブロックでは、今回作成するVPC上で設定することができるIPアドレスの範囲を定義しています。
192.168.0.0/24 の場合は、192.168.0.0〜192.168.0.255の合計256のIPアドレスを設定することができるという意味になります。
IPv6 CIDRブロックとについては、詳細な説明は割愛しますが、IPアドレスの新規格というイメージです。IPv4の方が一般的に浸透しているため、今回は利用しない方向で話を進めます。

テナンシーとは？
AWSでは、数多くのユーザーが存在するため、ユーザーの見た目からはそれぞれの作成されたVPCは独立していても、実際にはAWSの用意している同じコンピュータ上に複数のアカウントのデータがのせられて運用されています。
テナンシーを占有にすると、他のアカウントと同居せずに、アカウント占有のコンピュータを割り当ててもらえます。
ただし、有料オプションなので、個人利用の場合は基本的にデフォルトで問題ないかと思います

全て入力が完了したら、「VPCを作成」を押してVPCの作成を完了してください。

サーバーの置き場となるサブネットを作成

いよいよサーバーを作成。と行きたいところですが、まだ作成できません。
VPCを作成したあとには、VPCの中にサブネットを作成する必要があります。

サブネットとは？
サブネットとはVPCに割り当てたIPアドレスを更に複数のIPアドレスのまとまりに分割していく機能のことです。
VPCでは、基本的にサブネット単位でネットワークの設定をする仕組みになっているので、作成するサーバーが１台であってもサブネットを作成して、サブネット上にサーバーを配置する必要があります。

サブネットはVPCの画面から作成することができるので、画面左部にあるVPCダッシュボードからサブネットを選択し、その後、画面右上に表示される「サブネットを作成」選択してください。

すると下記の画面に遷移するかと思いますので、以下を参考に入力してみてください。

VPC ID:先ほど作成したVPCのIDを選択。名前タグを入力していた場合IDのあとに（）書きで名前タグが表示されるかと思います。
サブネット名：任意の名前（VPCの名前タグと同じでわかりやすければなんでも良いです。ここでは「mamedog-subnet」と入力しておきます。）
アベイラビリティーゾーン：どれでも良いのですが、ap-northeast-1aを選択しておきます。
IPv4 VPC CIDR ブロック:触らなくてOK(VPCで設定したIPv4 CIDRブロックの値が入っているかと思います。)
IPv4 サブネット CIDR ブロック:今回作成するサブネットが適用されるIPアドレスの範囲を設定します。一旦192.168.0.0/28(192.168.0.0〜192.168.0.15の16個)を設定しておきます。
タグ：触らなくてOK(初期値のまま)

アベイラビリティゾーンとは？
同一リージョン内でも、一般的なクラウドサービスでは、複数のデータセンターを保持しています。
こうすることで、仮にリージョン内の１つのデータセンタで停電・火事等の障害が発生したとしても、別のデータセンターに同一のサーバーを保持しておくことによりサービスを停止せずに住むメリットがあります。
アベイラビリティゾーンは同一リージョン内のどのデータセンターにサブネットを作成するのかという概念になります。

全て入力が完了したら。「サブネットを作成」を選択して作成を完了してください。

EC２でサーバーを作成

サブネットの作成が完了すると、ようやくサーバーを作成することができます。
そのため、EC2からサーバーを作成していきます。
ホーム画面からEC2を探すか、画面上部の検索欄にEC2と入力し、EC2の画面に遷移してください。

画面左部のメニューから、インスタンスの配下にあるインスタンスを選択し、その後、画面右上に表示される「インスタンスを起動」を選択します。
(インスタンスとは、サーバーを構成するコンピュータ（仮想マシン)のことです。）

上記のような画面になるかと思うので、下記を参考に入力をしてみてください。

名前とタグ:任意の名前を入力してください。ここでは「mamedog-server」としておきます。
アプリケーションおよび OS イメージ (Amazon マシンイメージ) : 今回用意するサーバーのOSを選択します。今回はAmazon Linux 2023AMIを選択してください。
アーキテクチャ：サーバーに使用するCPUの種類になります。どちらでも問題ありませんが、今回はx86を選択してください
インスタンスタイプ：サーバーに利用するコンピュータの性能を選択します。今回は「t2.micro」を選択してください
キーペア(ログイン): 作成したサーバーにログインして操作するために必要な情報になります。「新しいキーペアを作成」を選択肢、キーペアを作成指定ください。キーペアの作成は下記をを参考にしてください

キーペア名：任意（ここでは「mamedog_key」とします)

キーペアのタイプ：RSA

プライベートキーファイル形式：「.pem」
※キーペアの作成が完了すると、手元のPCにキーペアのファイルがダウンロードされるかと思うので大切に保管してください。後ほど使います。
ネットワーク設定「編集」をクリックして以下を設定してきます。
VPC: 上記で作成したVPCを選択
サブネット:上記で作成したサブネットを選択
パブリックIPの自動割り当て：有効化
ファイヤウォール（セキュリティグループ）：セキュリティグループを作成
セキュリティグループ名：任意の名前（ここでは「mamedog-sg」とします)
説明：任意の説明（内容は任意ですが、説明を書くことは必須のようなので、ここでは「ssh for developer」と記載します）
インバウンドセキュリティグループのルール:後ほど設定するので一旦触らなくてOKです。
ストレージを設定:サーバーの保存容量を設定します。ここでは「30GiB gp3ルートボリューム」を設定します

以上を入力したら、画面右下の「インスタンスを起動」を選択してください。

ここまでやってようやくサーバーの作成が完了です。
現在できているものを図示すると下記になります。

サーバーの作成は完了したのですが、現在の状態だとサーバーがインターネットにつながっていないため当然、自宅のパソコンからアクセスをすることができません。そのため、
サーバーに通信が到達するようにネットワークを設定していく必要があります。

サーバーに通信が到達するようにネットワークを設定する。

サーバーに通信をが到達するためには下記の３つの要素を設定していく必要があります。

VPCにインターネットへの出入り口（インターネットゲートウェイ）を作る。
サブネットがインターネットゲートウェイと接続できるように設定をする。
サーバーに必要な通信だけが到達できるようにセキュリティグループを設定する。

インターネットゲートウェイを作成する。

現在のVPCにはインターネットとの接続点がないため、VPC内部にあるサーバーも当然インターネットに接続することができません。そのため、インターネットとVPCの出入り口となるインターネットゲートウェイを作成していきます。
イメージは下記です。

では実際にAWSで作っていきましょう。
インターネットゲートウェイは、VPCのサービス上で作れるので、画面上部の検索欄で「VPC」と入力し、VPCの画面へ遷移し、左部のメニューから「インターネットゲートウェイ」を選択。その後、画面右上の「インターネットゲートウェイの作成」を選択してください。

すると作成画面に行くと思うので、下記を参考に入力してみてください。
名前タグ：任意の名前（ここでは「mamedog-igw」としておきます。）
タグ：触らなくてOK（初期値のままでOKです）

その後「インターネットゲートウェイの作成」を選択して作成してください。

インターネットゲートウェイの作成はこれで完了としたいところですが、インターネットゲートウェイとVPCは自動的に関連付けされないようなので、今回作成したインターネットゲートウェイを先程作成したVPCに紐づけて上げる必要があります。

VPC画面の左部のメニューからもう一度「インターネットゲートウェイ」を選択し、先ほど作成したインターネットゲートウェイにチェックを入れた状態で、右上の「アクション」から「VPCにアタッチ」を選択してください。

その後遷移する画面から、今回作成したVPCを選択して、VPCにインターネットゲートウェイをアタッチしてください。

インターネットゲートウェイに接続できるようにサブネットを設定する。

VPCにインターネットゲートウェイをアタッチしましたが、まだサーバーがインターネットにつながった状態にはなっていません。AWSではサブネット単位でネットワークの設定をする仕組みになっているので、サブネットとインターネットゲートウェイを通信できるように設定していく必要があります。

これを実現するためにはサブネットのルートテーブルを設定していきます。

ルートテーブルとは？
サブネット毎に設定できる通信のルールのことです。
IPアドレス毎に通信先を振り分けます。
下記のようなイメージで設定ができます。
例：
192.168.0.0/24はVPC内で宛先を探す。
それ以外のIPアドレスはインターネットゲートウェイから宛先を探す。

左部のメニューから「ルートテーブル」を選択し、その後、右上の「ルートテーブルを作成」を選択します。

下記を参考に入力してみてください。

名前：任意の名前（ここでは「mamedog-rtb」としておきます)
VPC : 上記で作成したVPCを選択
タグ：　触らなくてOK（初期値のままでOK）

その後「ルートテーブルを作成」のボタンを押します。
作成後は下記の画面に遷移するので、そのまま「ルートを編集」を選択してください。

下記を参考に設定をしてみてください。

ルートを追加を押下

追加された欄に対して下記を選択。

送信先：0.0.0.0/0 を選択
ターゲット：インターネットゲートウェイを選択
選択後、先ほど作成したインターネットゲートウェイのIDを選択できるようになるので、選択。

設定後、「変更を保存」を選択。

上記の内容により、サブネット内の通信は下記のように振り分けられます。

192.168.0.0/24(192.168.0.0〜192.168.0.255)はVPC内で宛先を探す。
それ以外のIPアドレスはインターネットゲートウェイから宛先を探す。

これにより、192.168.0.0/24以外のIPアドレスとの通信はインターネットゲートウェイ経由で行われるようになります。

次に今回作成したルートテーブルを、先程作成したサブネットに関連付けます。

上記画像のサブネットの関連付けを選択し、その後「サブネットの関連付けを編集」を選択。
そこから、上記で作成しサブネットを選択し、「関連付けを保存」を選択します。

サーバーに必要な通信だけが到達できるようにを設定する。

ここまでの、設定により、サーバーがインターネットに接続できるようになり、手元のパソコンからも通信を遅れるようになりました。
しかし、誰でも、どのような通信でもできる状態となってしまうと、セキュリティ的に問題です。

そのため、VPCのセキュリティグループという機能を使って必要な通信だけが可能になるように設定していきます。
今回必要となる通信は下記の２つです。

ブラウザ経由でアクセスした場合に「HELLO WORLD」のファイルを送受信するためのHTTP通信
サーバーにアクセスして、サーバー内で操作を行い、設定を行うためのSSH通信。

SSHとは
遠隔にあるサーバーにログインし、手元のPCを使って遠隔のサーバーを操作することができるコマンドです。
作成したサーバーを設定するときはSSHコマンドを利用します。

また、上記の通信について、安全性をあげるため、通信の対象を制限するように設定します。

1.は手元のPCからのアクセス、2.については、AWSCloudShellからのアクセスに限定します。

AWS CloudShellとは？
linuxコマンドを実行するために、AWS側ですぐに操作できるlinux環境を提供してくれるサービスです。
ブラウザ経由でlinux環境を操作できることから、今回はこちらを使ってSSH等の操作を行おうと思います。

IPアドレスを確認する

通信の対象を制限するためには、IPアドレスを特定する必要があります。そのため、下記の方法で確認します。

1.手元のPCのIPアドレスの確認方法

下記のサイトにアクセスしてください。手元のPCのIPアドレスが表示されます。

2.SSHに使うcloudshellのIPアドレスの確認方法
AWSのコンソール画面の上部の検索欄で「cloudshell」と検索し、cloudshellを起動してください。

ClousdShell上で下記のコマンドを実行するとIPアドレスが確認できます。

shell

curl http://checkip.amazonaws.com/

セキュリティグループを設定する

AWSコンソールの画面上部の検索欄から「VPC」と検索し、VPCの画面に移動します。
左部のメニューからセキュリティグループを選択し、EC2を作成した際に一緒に作成したセキュリティグループを選択します。

その後、「インバウンドのルールを編集」を選択し、下記の画面に遷移します。

画面遷移後、「ルール」を追加を押下し、２つのルールを設定できるようにします。その後、下記のように入力します。
今回は安全のため、一旦手元のPCからのみアクセスができるように設定します。

タイプ	ソース	IP
HTTP	カスタム	上記で確認した手元PCのIPアドレス
SSH	カスタム	上記で確認したCloudShellのIPアドレス

※IPアドレスの末尾に/32を記載する必要があります。
例えば、確認したIPアドレスが 12.34.56.78の場合は12.34.56.78/32と記載します。

サーバーから適切なファイルを返却できるようにサーバーを設定する

ここまで実装で、手元PCからAWS上で作成したサーバーに通信が到達できるようになったはずです。ですが、作成されたサーバー自体は、通信を受け取ることができる状態となっていません。

そのため、下記の２つを実装していきます。

手元PCからファイルを要求された際に、通信を受取「HELLO WORLD」のファイルを返却するようにサーバーを設定する。
サーバー上に「HELLO WORLD」を表示するHTMLファイルを設置する。

これらを行うためには、先ほど作成したサーバーにログインし、サーバー上にソフトウェアをインストールしたり、必要なファイルを作成したりする必要があります。

サーバーにログインする

サーバーにログインするためには、サーバーにログインするための環境を用意する必要があります。
今回はwindowsでもmacでも同様にログインできるように、AWSのCloudShellを利用します。

AWSのコンソール画面上部の検索欄にで「CLoudShell」と入力し、CloudShellを起動してください。
すると下記のようなコマンドラインが起動すると思います。

ますはこのCloudShellの環境から、先程作成したサーバーへ接続できるように設定していきます。

下記のコマンドで、ホームディレクトリ配下に、sshの設定用のディレクトリを作成します。

shell

mkdir ~/.ssh

上記で作成したディレクトリ配下にコンフィグファイルを作成します。

shell

vim ~/.ssh/config

上記コマンドで、vimというエディタが起動します。
vimは一般的なファイル編集用のソフトと操作が異なります。
ノーマルモードというカーソルを移動させるためのモードと、入力モードという文字を入力するためのモードがあり、入力モードに切り替えないと文字を入力することができません。
詳しい操作はgoogle等でvimと検索するとでてくると思いますが、
最低限の操作は下記の表を参考にしてください。

キー	内容	モード
k	カーソルを上に移動	ノーマルモード
j	カーソルを下に移動	ノーマルモード
h	カーソルを左に移動	ノーマルモード
l	カーソルを右に移動	ノーマルモード
:w	ファイルを保存	ノーマルモード
:q	vimを終了する	ノーマルモード
i	入力モードへ移行	ノーマルモード
esc	入力モードからノーマルモードへ戻る	入力モード

これを踏まえて、先ほど起動したvimで.ssh/configに下記を記載します。

~/.ssh/config

Host mame #任意の名前（ここではmameにしていますが何でもOKです）
    HostName xx.xx.xx.xx #作成したサーバーのIPアドレス
    User ec2-user
    Port 22
    IdentityFile ~/.ssh/key.pem
    ServerAliveInterval 60

※HostNameには先程作成したサーバーのIPアドレスを入力してください。これはEC2のページから左部のメニューのインスタンスを選択し、作成したインスタンスのIDを選択することで、インスタンスの詳細ページに遷移し、下記の部分に記載されています。

次に下記のファイルを作成します。

shell

vim ~/.ssh/key.pem

ここには先程EC2でサーバーを作成したときに一緒に作成したキーペアの内容を手元のPCのでテキストエディタ等で開きそのままコピーしてください。

下記のような感じになります。

~/.ssh/key.pem

その後、上記で作成した~/.ssh/key.pemの権限を変更する必要があります。下記のコマンドを実行してください。

shell

chmod 600 ~/.ssh/key.pem

ここまでできたら下記のコマンドで作成したサーバーにログインできるはずです。

shell

ssh mame

※mameの部分には、~/.ssh/configのHostのところに記載した値を記載してください
下記のような鳥が表示されれば成功です。

shell

   ,     #_
   ~\_  ####_        Amazon Linux 2023
  ~~  \_#####\
  ~~     \###|
  ~~       \#/ ___   https://aws.amazon.com/linux/amazon-linux-2023
   ~~       V~' '->
    ~~~         /
      ~~._.   _/
         _/ _/
       _/m/'

nginxをインストールする

サーバーが通信をブラウザからの通信を受取り、適切なファイルを返却するためのソフトウェアをインストールします。
今回はnginxというソフトウェアを使っていきます。
下記のコマンドを実行してnginxをインストールします。

shell

sudo yum -y install nginx

エラー等が表示されず、最後の行にComplete!と表示されれば成功です。

nginxのインストールに成功したら、nginxを早速起動してみます。
起動するコマンドは下記になります。

shell

sudo systemctl start nginx.service

その後、下記のコマンドで起動が成功しているかを確認します。

shell

sudo systemctl start nginx.service

緑色の文字でactive (running)と表示されていたら、正しくnginxが起動しているので、作成したサーバーのIPアドレスに手元のブラウザからアクセスしてみます。
IPアドレスの調べ方は、.ssh/configファイルを作成したときと同様で、EC2の画面からインスタンスの詳細ページに遷移し、パブリック IPv4 アドレスの値を確認します。

ブラウザで下記のような画面が表示されれば成功です。

HELLOWORLDのファイルを作成し、nginxから返却するよう設定する。

ここまでくれば、作成したサーバーに通信はできているのであと少しです。HELLO　WORLDのファイルを作成し、nginxが返却するように設定していきます。
まずは下記のコマンドで/usr/share/nginx/html/hello.htmlを作成します。

shell

sudo vim /usr/share/nginx/html/hello.html

/usr/share/nginx/html/hello.html

<html lang="ja">
  <head>
    <title>Hello World!</title>
  </head>
  <body>
          HELLO WORLD!!
  </body>
</html>

その後、nginxが上記のファイルを返却するように設定します。
nginxの設定ファイルは、/etc/nginx/nginx.confなので、こちらを編集していきます。

shelll

sudo vim /etc/nginx/nginx.conf

上記のファイルを開くと、ファイルの真ん中あたりに、ブラウザからアクセスがされた場合に返却するファイルの設定を書く場所があるので以下のように追記します。

/etc/nginx/nginx.conf

    server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        root         /usr/share/nginx/html;
        ### ここから追加
            location / {
                            root   /usr/share/nginx/html;
                            index  hello.html;
                       }
        ### ここまでを追加

これで、サーバーにアクセスが来た時に、/usr/share/nginx/htmlディレクトリのhello.htmlを返却する。
という設定にが書けたので、nginxを再起動して、設定を反映させます。
再起動のコマンドは下記です。

shell

sudo systemctl restart nginx.service

再起動が成功したら、もう一度ブラウザにサーバーのIPアドレスを打ち込んでみてください。
下記のようにHELLO WORLDが表示されれば成功です。

後片付け

終わったらEC2のインスタンスを停止。または削除しておきましょう
無料枠なら問題ないかもですが、アカウントの状態によっては課金が継続して発生する可能性ありますので。

まとめ

お疲れ様でした。簡単なHELLO WORLDのファイルをインターネット経由でブラウザ表示するというでしたが、やってみると意外と考えることが多いですね。
ですが、何度も設定をしていくうちに、今の手順を覚えていけると思うので、AWSを使って練習してみてください。
web開発では、インフラエンジニア以外でも、ネットワーク゚を意識しなければならない場面はたくさんあるので、上記の内容程度は設定できるようにしておくと何かと立つかと思います。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up