「AWSでWebサイトを作ろう!」 IT初心者が仮想サーバに向き合う 知識ゼロからやってみた「AWSを使ってみたい!」 始めの第一歩

» 2023年05月22日 10時00分 公開
[PR/ITmedia]
PR

 アマゾン ウェブ サービス(AWS)を業務に生かしたい――そんな思いでAWSのアカウントを取得したITmediaの営業・カワバタ。AWSの知識はほぼゼロの彼が、仮想サーバを使ってWebサイト作りに挑戦するという。さて、どこまでできるのか、今回はその模様をレポートしたい。

 この発端は4月、カワバタが新入社員の研修担当になったことだ。ITmediaの組織について紹介しようとしたとき、自身が所属する営業部以外の編集部やバックオフィスを詳しく説明できないと気付いた。そこで、新入社員向けに社内の取り組みなどを紹介するWebサイトを作ろうと思い立ったわけだ。いよいよ本格的にAWSのサービスを使っていく。

AWSでWebサイト作り 「私たちもできそう!」

 Webサイトを作るのは、カワバタと編集部の若手記者ハラダ。AWSのアカウント開設は2人で進めたが、今回は難易度が分からないためITmedia NEWS編集部の編集記者ヨシカワがアドバイザーとして同席した。

photo カワバタ

カワバタ 会社紹介のWebサイトを作ったら便利ですよね! Webサイトを作った経験はないですが、やってみませんか? 前回、アカウント作成もしたし、AWSを使ってできちゃうと思います。


photo ハラダ

ハラダ 経験ないのに、すごい自信(笑)。まずは調べてみましょうか。


「AWS サイト 立ち上げ 簡単」を検索すると――AWSの漫画がヒット。「第1話:数分以内にホームページを立ち上げろ!」にたどり着いた。

カワバタ ぴったりですね! やっぱりAWSでWebサイト作れちゃいますね。

 漫画は、新米プログラマーが新製品の紹介サイトを作るため、AWSの仮想サーバサービス「Amazon Lightsail」を活用する内容だ。これを読んで2人とも「私たちでもできそう」とやる気満々。

カワバタ ところで、Amazon Lightsailってどんなサービスですか?

photo ヨシカワ

ヨシカワ Amazon Lightsailは、仮想サーバを提供するサービスです。類似のサービスは他にもありますが、簡単さが特長です。例えば「Amazon Elastic Compute Cloud」(Amazon EC2)も同様の仮想サーバサービスですが、設定やソフトウェアなど一つ一つ内容を選んで準備をする必要があります。一方でAmazon Lightsailはある程度決まったものから選べばいいので、詳しくない人でも使いやすいのです。


カワバタ なるほど、イチから用意するのではなく選べば良いという面で初心者向きですね。僕たちにはぴったりですね!

ヨシカワ 「Amazon LightsailでWebサイトを作る」などと検索すれば分かりますが、Webサイトやブログを作れる無料のソフトウェア「WordPress」をセットで使います。プログラミング不要なので初心者でも使いやすいですよ。

Amazon Lightsailでインスタンス作成……インスタンスって?

 早速、カワバタとハラダはAmazon Lightsailを使うことにした。AWSの「マネジメントコンソール」でサービス名を検索し、Amazon Lightsailのホーム画面にアクセスした。

カワバタ ロボットのキャラクターが「Welcome」と出迎えてくれましたね。かわいい(笑)。親しみやすさとか分かりやすさをアピールポイントにしているようですね。

ハラダ まずはオレンジ色の「Let’s get started」をクリックします。英語の画面ですが、画面右下のボタンから日本語を選んで変えられるので良いですね。

カワバタ では、改めてオレンジ色の「では、始めましょう」のボタンを押しますね。「インスタンスを作成する」という画面になりました……ヨシカワさん、「インスタンス」の意味を教えてもらってもいいですか?

ヨシカワ インスタンスは直訳すると「実体」といった意味です。仮想サーバは、「仮想」だけに実際には目に見えないものですが、ここでいうインスタンスは仮想サーバを指すものと思ってください。なので、「インスタンス作成=仮想サーバ立ち上げ」というニュアンスで理解しておけばOKです。

カワバタ なるほど。では、インスタンスイメージの選択に進みます。プラットフォームを「Linux®/Unix®」「Microsoft Windows」から選ぶのですね。業務で普段使っているMicrosoft Windowsがいいですかね?

ハラダ いま試してみたのですが、Microsoft Windowsを選択すると、アプリケーションにWordPressは選べないですね。Linux®/Unix®ならWordPressを選べるのでそれでいきますね。

photo プラットフォームを選択する(クリックで画像拡大)

カワバタ 画面をスクロールダウンすると、オプションの項目が出てきました。いまは、オプションは不要そうなので、次はインスタンスプランの選択ですね。メモリやストレージのサイズで月額料金が変わるようです。今回作るのは大規模なWebサイトではないので、一番小さいプランにしておけばいいですね。

ハラダ で、その次は……と、「インスタンスを確認」が出てきました。インスタンスに名前をつけるようです。デフォルトの「WordPress-1」のままが分かりやすいのでこのままいきますね。あとはタグ類の設定あるようですが、いまは不要ですかね。

カワバタ では、大丈夫かと思うので、「インスタンスを作成」のボタン押しちゃいます!

 十数秒ほどでインスタンスの一覧画面に切り替わった。WordPress-1のところが「保留中」となっていたが、1〜2分ほどで、表示が「実行中」に変わる。これでWordPressを使うインスタンスの準備が完了したことになる。以降の操作は、このWordPress-1のインスタンス管理画面を中心に進めていく。

ヨシカワ すんなり設定できましたね。

インスタンス作成の流れ

Webサイト構築の下準備 WordPressを立ち上げよう

 WordPress-1のインスタンスをクリックすると管理画面に移動できる。トップページ中央の緑の囲い枠の中に「WordPress入門ガイド」を読むことをお勧めします」と表示されるので、入門ガイド(クイックスタートガイド)に沿って進めることにした。

カワバタ ステップ1は、WordPressの管理ダッシュボードにアクセスするパスワードの取得ですね。手順通り、インスタンス管理ページの「SSHを使用して接続」を開きます。

ハラダ コマンドを入力する黒い画面が立ち上がりましたね。点滅している「〜$」の後に次のコマンドを入力して、ENTERキーを押すようです。

cat bitnami_application_password

ハラダ 2段目に出た英数字の文字列がパスワードのようなので、記録しておきますね。

photo 「SSHを使用して接続」のコマンド入力画面(クリックで画像拡大)

カワバタ 次はステップ2、WordPressにサインインですね! WordPress-1インスタンスの管理ページ右上ある「パブリックIP」(例:00.00.00.00)をコピーして、Webブラウザのアドレスバーに「http://00.00.00.00」と入力して移動すると――。

ハラダ おっ!WordPressの画面が表示されましたね! まだサイトの設定などしていないので、すごくシンプルです。

カワバタ 思っていた以上に簡単ですね。

ハラダ  WordPressの管理画面に入るためのリンクが見当たらないですが、直接「http://00.00.00.00/wp-admin」にアクセスすれば管理ダッシュボード入るためのログイン画面につながるみたいです。

カワバタ できました。ユーザー名にAWSのアカウント名を、パスワードは先ほど記録したものを入力すればいいですよね。

ヨシカワ あっ! そこ違います。クイックスタートガイドのステップ2の4に、ユーザー名のところには「user」と入れると書いてあります!

カワバタ user?

ヨシカワ 入れてみましょう。

カワバタ 本当だ、ログインできました。これでステップ2は完了ですね。

 WordPressの管理ダッシュボードにログインしたら、左のカラムにある「Setting」タブの「General」欄で言語を日本語に変更できる。

 そして、次のステップ3へと進む。インスタンス管理ページに戻って静的IPアドレスの設定をする。設定前のIPアドレスは動的なもので、インスタンスを起動する度に番号が変わるのでWebサイトには適していない。IPアドレスを固定する操作は簡単で、管理ページ内「ネットワーキング」タブを開いて「静的IPをアタッチする」をクリックし、静的IPの名前を決めて、「作成およびアタッチ」のボタンを押せば完了だ。これでWebサイト構築の下準備が終わった。

カワバタ えっ! これでWebサイトは完成ですか。待ち時間とか除けば、正味十数分でできちゃいましたね!

WordPress開設までの流れ

Webサイト用のドメイン取得 AWS内で完結

ヨシカワ せっかくなので、独自ドメインを登録しましょうか。クイックスタートガイドのステップ4ですね。

カワバタ それをすると良いことがあるんですか?

ヨシカワ 現在のURLのアドレスは「http://0.0.0.0」のような数字ですが、これを「http://会社名.com」「http://プロジェクト名.net」などを好きな文字列に変更できます。

カワバタ いいですね!

 まずは独自ドメインを取得する。WordPress-1管理ページの「ドメイン」タブを開いて「ドメインを登録する」ボタンをクリック。「Route 53でドメインと登録する」というページに遷移するので、使いたいドメイン名(example.comなど)を入力して取得可否を確認する。ドメインは既に誰かが使っていたら取得できない。「.com」「.net」など使えるドメインは、「ドメイン登録の詳細」で確認できる。

 今回は「connect-example.net」というアドレスを取得する。独自ドメインには年間料金がかかる。自動更新の有無を選び、登録者の連絡先情報を入力。このとき、電話番号は国別コードと先頭ゼロを抜いた番号を入れる。日本の「080-0000-0000」なら「+818000000000」だ。また「都道府県」の欄は未入力にしないと登録できないため要注意だ。

 そして「プライバシー保護」の設定は、登録者情報を第三者が見えないようにするため有効にするのがお勧め。あとは「ドメインの登録」をクリックし、数十分ほど待てば独自ドメインの取得が完了する。途中、メールアドレスの検証メールが届くので、記載されたURLをクリックしておく。

 独自ドメインを取得したら、Webサイトと紐付ける。WordPress-1管理ページの「ドメイン」タブを開き、「ドメインを割り当てる」をクリックすると、取得したドメインが表示されるので選択して、ページ下部の「割り当てる」を押せば完了だ。

 カワバタが「http://connect-example.net」にアクセスすると、無事にWebサイトが表示された。

ヨシカワ 残るステップ5〜6は、WordPressの管理方法のチェックなどなので、時間があるときに確認すればOKです。

ドメイン登録の流れ

Webサイトの安全対策 基本は「ENTERキー」押せばOK

ヨシカワ 無事に独自ドメインでWebサイトを表示できたので、最後にセキュリティ対策で「SSL化」をしましょう。簡単に説明すると、Webサイトの所有者を証明する「SSL証明書」を発行します。これは通信を暗号化して安全を確保する役割もあります。いまは「http://」でアクセスしていますが、SSL化すると「https://」に変わります。

ハラダ 難しそうですね。

ヨシカワ AWSの解説ページの手順に沿ってコマンドを数回入力すればいいだけですよ。

 SSL化は、最初に使ったコマンド入力画面「SSHを使用して接続」で進める。まず必要なツールがインストールされているか確認するコマンドを実行する。「Welcome to〜」と表示されれば成功だ。

sudo /opt/bitnami/bncert-tool

 続いて「Domain list [ ] :」という文字列の後に、先ほど取得したドメイン「connect-example.net」を入力してENTERキーを押す。すると「他に追加しますか?」と聞かれるので、追加するドメインがなければNoを意味する「n」を入力する。

 「Warning」と警告されるかもしれないが、リダイレクトの確認をしているだけなのでそのままENTERキーを押して次に進む。

 そして「HTTPからHTTPSにリダイレクトしますか?」と聞かれるので、Yesを意味する「Y」を入力。諸々の確認が表示されるが、問題ないので「Y」。さらにメールアドレスを入力してENTERキーを押す。

 最後に「規約に同意しますか?」という問いに「Y」を入力してENTERキーを押せばSSL化は完了だ。

カワバタ connect-example.netにhttps://で始まるURLでアクセスできました!

ハラダ Webブラウザの左上の鍵マークを押したら「接続は保護されています」「証明書は有効です」と表示されましたね。成功のようです!

SSL化の手順

ヨシカワ あとは、WordPressで好みのWebサイトを作れば完成です!

ハラダ サイト名は何にしますか?

カワバタ もう「ITmedia Connect-Hub」に決めてあります!

ハラダ 良いですね! あとはここに画像を入れて――

 こうしてWebサイトは無事に完成。AWS初心者の2人でも、公式サイトの説明などを読み進めればAmazon Lightsailを使えると分かったのは大きな発見だ。

 Amazon Lightsailの始め方は公式サイトにも載っているので、気になった読者は一度触ってみてはいかがだろうか。そしてAWSの基礎知識をもっと知りたい人は、AWS初心者向けオンラインイベント「AWSome Day Online Conference」に参加するといいだろう(イベントページはこちら)。

photo

AWS re:Post

photo

 AWS re:Postは、アマゾン ウェブ サービス(AWS)コミュニティー向けのクラウドナレッジ共有サービスです。re:Postの使命は、AWSを利用する全てのユーザーが、AWSサービスに関する質問をしたり、知識を共有したりすることを歓迎する環境の提供です。re:Postには誰でもアクセスできますが、コミュニティーと交流するには、AWS認証情報を使用してサインインする必要があります。(詳細はこちら

Copyright © ITmedia, Inc. All Rights Reserved.


提供:アマゾン ウェブ サービス ジャパン合同会社
アイティメディア営業企画/制作:ITmedia NEWS編集部/掲載内容有効期限:2023年12月17日