Webサイトのコンテンツが完成、外部に公開したい。
さて、なにをすればよいのでしょうか。
外部に公開するにはインターネットから接続できる場所にWebサーバーを構築してそこにHTMLや画像ファイルをアップロードし、ブラウザからhttpsで接続できるようにセッティングする必要があります。
または、レンタルサーバー会社と契約して自分のWebサーバーを確保するという方法もあります。
レンタルサーバーは簡単ではありますが、月額のコストがかかりますし、長期使う場合以外は契約自体も少しめんどくさかったりします。
ちょっとWebサーバを作りたいんだ、という人向けの記事です。
AWS S3を使ってWebサーバーを構築する
AWS S3とは、クラウド上にシステムを構築するプラットフォームサービスであるAmazon Web Service(AWS)の中のSimple Strage Service(通称:S3)のことで、S3を使うとクラウド上に自分専用のストレージを構築することができます。
イメージ的にはGoogleドライブやOneDriveのようなオンラインストレージと呼ばれているものと似ています。
オンラインストレージはフォルダやファイルをその単位で共有するのに対して、S3は静的ホスティング機能というものがあり、それを使うとフォルダやファイルを相互に参照できるようになるため、Webサーバーのような振る舞いが可能となります。
AWSを使ってWebサーバーを構築する、というとEC2というクラウド上に仮想サーバーを構築してApacheやNginxなどのWebサーバーソフトをインストールして構築、、、と思いがちですがS3単体でWebサーバーとして動かせるため、AWSのアカウントさえ作ればブラウザ上でちょっと操作すればすぐにWebサーバーが構築できます。
- Linux、ApacheやNginxの知識がなくてもできる
- SSL証明書を時前で用意しなくてもHTTPS通信できるWebサーバーが作れる
- セキュリティ強化も簡単(接続できるIPを指定、特定の端末だけ接続可能指定、等)
- ApacheやNginxの専用Webサーバーソフトと比較するときめ細かい設定(接続数やタイムアウト時間、URLのリライト)はできない
- サーバー側でプログラムが動くようなサイト(PHP/GCI等)はできない
AWSマネジメントコンソールにログイン
AWSマネジメントコンソールはこちらです。画面が表示されたらサインインします。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_15h27_35-1024x341.png)
AWSのアカウントは無料で作れます。
Webサーバー用バケットの作成
AWSはたくさんのサービスがあり一覧から探すのが大変ですが、この検索欄に「S3」と入力すると一発で見つかります。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_16h10_20-1024x288.png)
バケットを作成します。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_16h12_33.png)
バケットというのは入れ物のことです。S3はバケットという一つの入れ物を作り、その中にファイルを格納していきます。
Windowsで例えると、ドライブ(C: D:)がバケットのイメージです。バケットの中にはフォルダを作ってファイルを格納することができます
(厳密にはちょっと違いますがまだ気にしなくて大丈夫です)
バケットの名前を決める
バケットを作成する時には、バケットに名前をつけます。
今回は、「battan-web」にします。
AWSリージョンはどこのデータセンターに設置するか選択できます。アメリカの方が安いですが通信速度は遅くなります。
Webサイトを見る人が日本国内の人がメインなら東京リージョンがよいでしょう。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_16h17_21-1024x458.png)
バケット名はAWSアカウント単位でユニークではなく、リージョン単位でユニークにする必要があります。既にバケット名を誰かに使われてしまっている場合はバケット名を変更するか、どうしてもその名前を使いたい場合は他のAWSリージョンを変更してください。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_16h17_00-1024x485.png)
バケットのアクセス権限設定
ACLを有効にします。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_21h25_21-1024x483.png)
初期状態だとパブリックアクセスをすべてブロックにチェックが入っています。
この状態だとインターネットから接続できないのでWebサーバとして利用できないため、ブロックを解除(①)します。
ほんとに公開していいの?という確認がありますので、チェック入れましょう(②)
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_16h15_00.png)
バケットのバージョニング
バケットに格納したファイルのバージョン管理をするかどうか選択できます。
バージョニングを有効にすると、ファイル更新の際に自動的にバックアップが作られるので誤って更新してしまった場合などに古いファイルに戻すことができます。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_16h15_18-1024x290.png)
タグの追加
AWS内でタグ別でコスト集計している場合に使ったりしますが、よくわからない場合はそのままなにもしなくてOKです。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_16h15_47-1024x258.png)
詳細設定
オブジェクトのロック設定は画面説明の通りです。Webサイトの資材は別途マスタ管理していると思いますのでS3上ではロックしなくてもよいでしょう。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_16h16_29-1024x445.png)
設定が一通り終わったら、画面右下の「バケットを作成」ボタンを押します。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_16h16_37-1024x186.png)
バケットが作成されると、次のように画面が表示されます。
作成したバケットをバケット一覧に表示されると思います。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_16h17_41-1024x94.png)
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_16h18_09-1024x515.png)
これで入れ物の完成です。
Webコンテンツのアップロード
さて次は作ったバケットにWebサイトを構成するファイル一式をアップロードしていきます。
バケット一覧からさきほど作ったバケットを選択すると、バケットの詳細画面が表示されます。①のオブジェクトタブをクリックし、②のアップロードボタンを押します。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_16h18_28-1024x659.png)
パソコンの中に保存してあるWebサイトのフォルダやファイルをまとめてアップロードします。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_18h38_59-1024x503.png)
アップロードの確認画面が表示されますので、問題なければ右下の「アップロード」ボタンを押します。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_18h40_43.png)
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_18h41_00.png)
パソコン内のWebサイト構成ファイルがS3のバケットにアップロードされていきます。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_18h41_34-1024x170.png)
アップロードが終わると、成功画面に切り替わりますので、「閉じる」ボタンを押します。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_18h42_08-1024x148.png)
バケットの設定を変えてWebサーバ化する
バケット詳細設定画面のプロパティタブをクリックします。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_18h43_51-1024x387.png)
静的ウェブサイトホスティングの設定エリアの編集ボタンを押します。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_18h44_04-1024x181.png)
①の静的ウェブサイトホスティングを有効にします。この設定を有効にすることで、バケットの中をWebサーバのように公開できるようになります。
次に②のインデックスドキュメントを設定します。Webサイトっぽい質問なのでこれの記事を読んでいる方には説明不要だと思います。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_18h45_22.png)
最後に「変更の保存」ボタンを押します。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_18h44_43.png)
このように正常に編集されればS3バケットのWebサーバ設定は完了です。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_18h45_43.png)
Webサイトとして公開
次はアップロードしたWebサイトのフォルダやファイル群を公開します。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_18h46_10-1024x379.png)
①オブジェクトタブをクリックするとフォルダとファイルの一覧が表示されますので、すべて選択状態にします。
②すべて選択したら「アクション」⇒「ACLを使用して公開する」をクリックします。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_21h15_36-1024x562.png)
「公開する」ボタンを押します。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_21h15_59.png)
パブリックアクセスが正常に編集されればすべての設定は完了です。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-21_21h16_11.png)
Webサイト表示確認
それでは最後にWebサイトの表示を確認しましょう。
バケットのオブジェクト一覧からWebサイトの入り口となるindex.htmlを探してその詳細画面を開きます。
その画面の中に「オブジェクトURL」という部分にindex.htmlのURLが表示されていると思います。そのURLでサイトの入り口となります。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-22_00h00_46-1024x564.png)
ブラウザで表示してみます。
おお!
Webサイトとして表示されましたね。
![](https://blackbird-blog.com/wp-content/uploads/2023/01/2023-01-22_00h01_47-1024x898.png)
これならわざわざLinuxでWebサーバー立てなくてもよいですね。
Linuxで立てるとOSやWebサーバーソフトのバージョンアップなどのメンテナンスが必要ですが、S3バケットならAWS側で管理されているのでその辺の面倒ごとはありません。
- S3バケット作成
- Webサイトのコンテンツをアップロード
- バケットの設定を変更してWebサーバ化
- Webサイトを公開
ちなみに構成を図にすると、このようになります。
![](https://blackbird-blog.com/wp-content/uploads/2023/05/2023-05-02_17h17_44.png)
AWSは機能が多岐にわたり存在し、初心者が足を踏み入れるとほぼ100%迷います。まずはこの教科書で全体を広く浅く知ることが重要です。
AWSを使うメリットとして迅速なサービス運用環境の構築が求められます。失敗できない本番環境を構築する前に読んでおきたい一冊です。
そしていよいよAWS認定試験に挑戦したくなった場合は、こちらで徹底的に学習しましょう。これからはAWSです。
S3単体で公開も可能ですが、CloudFrontを追加するとセキュアかつ高速なWebサーバにパワーアップできます。興味ある方はお試しください。
コメント