Amazon Web Services ブログ

“AWS 上で静的な Web サイトを公開しよう！” 編を公開しました！- Monthly AWS Hands-on for Beginners 2020年5月号

こんにちは、テクニカルソリューションアーキテクトの金澤 (@ketancho) です。この記事では、先日公開した AWS の各サービスを使って簡単な Web サイトを作成し、それをインターネット上に公開するハンズオンを紹介していきます。

  • HTML や CSS を使った Web ページを作ったけどそれを簡単に公開するにどうすればいい？という開発者の方々
  • AWS で CDN や DNS の設定を行うにはどうすればいいの？というエンジニアの方々

にぴったりなコンテンツになっておりますので、ぜひご視聴いただければと思います。

AWS Hands-on for Beginners とは？

AWS Hands-on for Beginners は、動画にそって実際に手を動かしながら AWS サービスについて学んでいただく無償のコンテンツです。名前の通り、初めて AWS サービスをご利用される方向けの内容ですので、学習の最初のステップとしてご活用いただけます。オンデマンド形式での配信となるので、移動時間などのスキマ時間での学習もできますし、分かりにくい部分を巻き戻して何度でもご覧いただくことができます。

 

[New] “AWS 上で静的な Web サイトを公開しよう！” 編を公開しました

5/14(木) に AWS Hands-on for Beginners “AWS 上で静的な Web サイトを公開しよう！” 編 を公開しました。このハンズオンでは、下記のサービスを中心に取り扱います。

Amazon S3 と AWS Cloud9 については、他のハンズオンシリーズでも登場していますが、それ以外の3つのサービスについては AWS Hands-on for Beginners としては初めて紹介する内容になっています。どのサービスも Web サイトを構築する上で利用を検討するシーンが多いものになります。ぜひこのハンズオンを通して、基本的な使い方のイメージを掴んでいただければと考えています。

このハンズオンの前半では、Amazon S3 の “静的 Web サイトホスティング” 機能を用いて、簡単な Web コンテンツをインターネットに公開するハンズオンを進めていきます。アプリケーション開発、特にフロントエンドの開発を得意とされている方で、

「ローカル PC で HTML や CSS を使った Web ページは作れたんだけど、それを公開するにはサーバーを立てたりする必要があるんですよね？」

という方もいらっしゃると思います。もちろんサーバーを立ててコンテンツを配置することもできるのですが、静的なサイトであれば S3 の “静的 Web サイトホスティング” 機能で公開することが可能です。サーバーの管理が不要な点、比較的安価に運用できる点がメリットと言え、例えば商品のランディングページなどにお使いいただくことができます。“管理が楽で比較的安価” である点は、個人で Web ページを作る際にもメリットがあるので、私自身も個人的によく使っています。

インターネットで Web ページを公開するところまでであれば、ここまでのハンズオンで完了ですが、次に出てくる要求として

  • 画像ファイルなどはキャッシュするようにしたい
  • 独自ドメインで運用したい
  • HTTPS 化したい

といったものがあるかと思います。ハンズオンの後半では、CloudFront、Route 53、ACM を用いてこれらの設定を進めていく形になります。本ハンズオンではオリジン環境を S3 としていますが、ELB – EC2 – RDS 構成がオリジンになっている場合でも同じように設定を進めていく形になります。このような構成で CloudFront や Route 53 をご検討いただいている場合でも、このハンズオンで学びがあると考えています。（ELB – EC2 – RDS 構成については、AWS Hands-on for Beginners スケーラブルウェブサイト構築編 もあわせてご覧ください。）

下記の構成図がハンズオンで作る構成の最終形となります。CloudFront を用いてコンテンツをキャッシュする設定をまずは行います。続いて、Route 53 でドメインを取得し、レコードセットを設定することでドメインでアクセスできる形になります（※）。最後に ACM を用いて SSL/TLS 証明書を作成し、CloudFront に配置することで前述の要件を満たす形になります。

ちなみに、（※）の部分、つまりドメインを取得するパートで年間の費用が発生する（今回のハンズオンを収録した手順では 11.00 USD/年）ため、それ以降の部分をオプションとしています。その前の部分までをハンズオンしていただき、Route 53 以降の手順はデモとしてご覧いただくことも可能ですし、「実際にドメインを取って独自サイトを運用されたい！」という方は、Route 53 以降の手順も実際にやってみていただければと思います。

“AWS 上で静的な Web サイトを公開しよう！“ ハンズオン は以下のリンクから今すぐご視聴いただけます。ぜひご覧ください！

AWS Hands-on for Beginners “AWS 上で静的な Web サイトを公開しよう！” 申し込みページ

 

AWS Hands-on for Beginners サービスマトリックスの紹介

昨年11月からスタートした AWS Hands-on for Beginners ですが、スタートから約半年が経過し、のべ7コンテンツとなりました。フィードバックをもとに現在も4つのコンテンツ作成が進んでいますので、引き続きお楽しみいただければと思っています。

さて、コンテンツ数が増えてきたので、以前から整備したいと思っていたサービスマトリックスを作ってみました。「こういう構成を作りたいからハンズオンをやりたい」という方は、一覧からニーズに合うものを探していただけると思うのですが、「この AWS サービスを学びたいから（作りたい構成と異なってもいいから）ハンズオンをやりたい」という方もよくいらっしゃいます。そんな方にサービス名から逆引きでハンズオンを探していただければと考えています。

現在7つのコンテンツで計20の AWS サービスを学んでいただける形になっています。今年もあと1ヶ月で折り返しですが、コンテンツ数はもとより、みなさまに試していただけるサービス数も増やしていければと考えています。このサービスのハンズオンをやってみたいという方は、ぜひアンケートよりフィードバックをいただければと思います。

まとめ

今月の AWS Hands-on for Beginners シリーズのアップデート “AWS 上で静的な Web サイトを公開しよう！” 編 の紹介と、サービスマトリックスを紹介しました。今回のハンズオンは開発者の方に AWS をご利用いただくきっかけになれば！という想いで構想したものになります。ぜひアンケートなどからご感想をお聞かせ頂ければと思います。また、先々「このサイトはあのハンズオンで学んだことがベースにできてるんですよー！」といったご報告もいただければコンテンツ作成者冥利につきますので、ぜひ教えていただければ嬉しいです。それでは、ハンズオンをお楽しみください！

 

このブログの著者

金澤 圭 (Kei Kanazawa) @ketancho

サーバーレスが好きなテクニカルソリューションアーキテクト。業種業界問わず、お客様のプロダクト開発をサポートさせていただいています。好きなサービスは AWS Lambda と AWS Amplify で、好きな休日の過ごし方は娘ふたりと川の字になって昼寝です。