おさらい
S3経由でWebサイト公開
前回までの記事では、StaticPressでHTML化し、
関連記事
【StaticPress】WordpressのブログやサイトをHTML化して爆速管理しよう【使い方/インストール】
StaticPressS3でS3バケットに転送し、公開するところまで進めました。
関連記事
【StaticPressS3】WordpressのブログやサイトをAWSのS3に転送して公開してみよう！【静的サイト】
ドメイン設定
独自ドメイン化
しかし今のままだと、ブラウザで正常にアクセス出来るようになりましたが、ドメインがS3バケット標準の形式のままになってしまっています。
http://{バケット名}.s3-website-ap-northeast-1.amazonaws.com なので、今回はお名前.com
これを実現するには、AWSのRoute53とCloudFrontというサービスを利用する必要があります。
Route53?CloudFront?
とりあえずは、Route53はドメインをAWSサービス内で使えるようにするサービスで、CloudFrontはドメインを割り振ってS3バケットと連携することで表示することが可能になるサービスと思ってもらえれば良いです。(だいぶ端折っていますorz)
この辺から少しAWS周りのサービスの設定が複雑になってきますので、出来るだけ丁寧にまとめるように心がけます！
手順
前提
- お名前.comでドメイン取得済み
- S3バケットでWebサイト公開済み
【準備】S3側
バケットポリシーの設定
前回、S3のStatic website hostingを有効化にしてブラウザからアクセス出来るようにしました。
しかし、実際にはCloudFront経由で表示させるためこちらのエンドポイントのアクセス許可は全体公開する必要はありません。
また、このまま作業を進めることも出来ますが、それだとStatic website hostingのエンドポイントがサーチエンジンにインデックスされてしまいあまりよろしくありません。
なので、エンドポイントにはCloudFrontからのみしかアクセス出来ず、かつファイルの転送もWordpressが構築されているサーバーのIPからのみしか出来ないようにポリシーをしておきましょう。
対象のバケットを選択し、アクセス制限タブを選び、バケットポリシーをクリックすると、バケットポリシーエディターが表示されるので、以下のコードを元に値を変えて入力し、保存ボタンをクリックします。{
"Version": "2012-10-17",
"Id": "S3BucketPolicy",
"Statement": [
{
"Sid": "cloudfront-stmt",
"Effect": "Deny",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": [
"arn:aws:s3:::{バケット名}",
"arn:aws:s3:::{バケット名}/*"
],
"Condition": {
"StringNotEquals": {
"aws:UserAgent": "Amazon CloudFront"
}
}
},
{
"Sid": "staticpress-3s-stmt",
"Effect": "Deny",
"Principal": "*",
"Action": "s3:PutObject",
"Resource": [
"arn:aws:s3:::{バケット名}",
"arn:aws:s3:::{バケット名}/*"
],
"Condition": {
"NotIpAddress": {
"aws:SourceIp": "{WordpressサーバーIP}"
}
}
}
]
}
確認
変更後、エンドポイントにアクセスしてみましょう。
正常にポリシーが働いてアクセスが出来ないようになっていますね。
【準備】CloudFront側
Distributionsの作成
では次に、CloudFrontの準備を進めていきましょう。
AWSのマネジメントコンソールにログインし、上部サービスメニューからネットワーキング ＆ コンテンツ配信>CloudFrontを選択します。
そして次の画面では、Create Distributionボタンをクリックします。
すると、Select delivery method画面が表示されます。
これは、コンテンツの配信方法を選択する画面なので、Web側のGet Startedボタンをクリックします。
次に、作成のための細かい設定画面が開きます。
項目はたくさんありますが今回はその中の幾つかの項目だけ設定を行います。
まず、Origin Domain Nameの項目に連携させたいS3バケットのStatic website hositngのエンドポイントを以下の形で入力してください。
{対象バケット名}.s3-website-ap-northeast-1.amazonaws.com
ここでS3バケットを直接指定してしまうと、うまくページが表示されない部分が出てきてしまいますので、気をつけましょう。
また、中段あたりのAlternate Domain Names (CNAMEs)に、事前に取得済みのドメインを入力します。
そして、Default Root Objectにindex.htmlと入力し、それ以外はデフォルトのままで良いのでCreate Distributionボタンをクリックします。
これでDistributionは作成されました。
StatusがDeployedになるまでしばらくかかるので気長に待ちましょう。
【準備】Route53側
Hosted Zoneの作成
次に、上部サービスメニューからネットワーキング ＆ コンテンツ配信>Route53を選択します。
次に、左部メニューのHosted zonesを選択し、Create Hosted Zoneボタンをクリックします。
すると、以下のような画面が表示されるので、あらかじめ取得しておいたドメインを入力し、Createボタンをクリックします。
正常に作成されると、以下のような画面が表示されます。
TypeがNSのネームサーバーは後ほどお名前.com側の設定時に使うのでメモしておきましょう。
Record Setの作成
次はRecord Setを作成します。
Create Record Setボタンをクリックします。
AliasのYesにチェックを入れ、Alias Targetのプルダウンから先ほど作成したCloudFrontを選択し、Createボタンをクリックします。
Route53の設定はこれで完了です。
【準備】お名前ドットコム側
ネームサーバーの変更
では、次にお名前.com側の設定を変更します。
その前に、事前にお名前.comで取得済みのドメインにブラウザからアクセスすると、以下のような画面が表示されると思います。
これは、お名前.comのネームサーバーで管理しているドメインだからです。
また、ドメインにまだサーバーの紐付けを行っていないのでデフォルトの画面？が表示されている状態と言えます。
今回はネームサーバーをお名前.comではなく先ほどのAWSのRoute53のものに変更します。
お名前.comの管理画面にログインし、ドメインタブを選択し、対象のドメインの初期設定リンクをクリックします。
表示されたページの中段あたりに2. ネームサーバーの選択エリアがあるので、その他ネームサーバーにチェックを入れ、先ほど控えたRoute53のネームサーバーを入力し確認ボタンをクリックしましょう。
すると、以下のような確認ダイアログが表示されるので確認の上問題が無ければOKボタンをクリックします。
以下のようなメッセージが表示されればお名前.com側の設定は完了です。
確認
時間が経過して、設定が反映されるまで数時間ほどかかりますが、そのうち以下のように独自ドメインでS3バケットに転送したWordpressのサイトが表示されるようになります。
記事ページも問題なく表示されていますね♪
終わりに
とりあえず、独自ドメインでアクセス出来るようになりましたね♪
しかし、まだまだやっておかないといけない設定があります。
- SSL化
- 更新時のキャッシュ対策
- 不要ファイルの転送制限
これらについては別の記事で少しずつ整理しますので、そちらも見て頂ければなと思います。
関連
関連記事
【無料SSL証明書】AWSでHTTPS通信を取得してCloudFrontに設定してみよう！【Wordpress】