13
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

S3 + Route53 + Google Domains でお手軽サーバレス

Last updated at Posted at 2019-07-13

自分のWebサイトをGCPで運用してたが、そろそろ無料枠が切れそうなので前々からやろうと思っていたサーバレスに乗り換えた。

私は好きでGoogleDomainsでドメインを管理している為、「S3とRoute53でもできるやん」という謎指摘は受け付けません。

2020/07/04 追記
自分のサイトはFirebaseに移行しました。(個人的にこっちのほうがおすすめ)

注意
今回のメインURLはwwwなしの方で設計します。
「www.your-domain.com」 にアクセスしたら 「your-domain.com」 にリダイレクトされるように作るので逆が良い方は全て逆にしてください。

S3

1.バケット作り

持っているドメインの名前でバケット作る。
bandicam 2019-07-13 19-14-31-988.jpg

特に設定は無いのでそのまま作成。

※wwwを付けたバケットも作る

バケットが二つできたと思う。
bandicam 2019-07-13 19-17-34-264.jpg

2.ポリシー設定

作ったバケット二つ共に適応する。
バケットクリック→アクセス権限→バケットポリシー

バケットポリシー
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::your-domain.com/*"
        }
    ]
}

yourdomain書き換えてね。
bandicam 2019-07-13 19-20-27-700.jpg

ちゃんと適応されるとこうなる。

3.static website hosting を有効にする。

バケットクリック→プロパティ→static website hosting
bandicam 2019-07-13 19-26-09-561.jpg
ウェブサイトホストをするを選択

インデックスドキュメントを書き込む

wwwの方はリダイレクトに設定する。

bandicam 2019-07-13 19-35-05-332.jpg

自分のドメイン(バケット名)を書き込む。

####4.さっき作ったバケットに資材突っ込む
リダイレクトしないほうに資材を突っ込む。

bandicam 2019-07-13 19-36-25-018.jpg

突っ込んだらindex.html をクリック
概要→オブジェクトURLをクリックすると、動作を確認できる。

Route53

1.ホストゾーン作る

自分のドメイン入れて作成ボタン押す
bandicam 2019-07-13 19-47-18-585.jpg

できたホストゾーンをクリックして中を見る

####2.レコードセット作る
これは作成済みのキャプチャ
bandicam 2019-07-13 19-48-15-646.jpg
あらかじめNSとSOAが生成されているのでタイプAを
your-domain.com、www.your-domain.com
の二つ分作成する。

レコードセット作成をクリック。

1つ目
bandicam 2019-07-13 19-50-33-207.jpg
名前:なし
タイプ:A
エイリアス先:S3のヤツを選択
そのまま作成

2つ目
bandicam 2019-07-13 19-53-18-411.jpg
名前以外同じ通りに作成

GoogleDomainsでNSを設定する為タブは閉じない事

Google Dmains

GoogleDomainsに行って対象のドメインを選択
DNSを開く
ネームサーバのカスタムネームサーバーにAWSのNSの項目をコピペする。
bandicam 2019-07-13 19-57-02-652.jpg
これを

bandicam 2019-07-13 19-56-26-349.jpg
ここに入れる

5分くらい何かして待つ

ドメインにアクセスすると、自分のサイトが見れる。

できない場合は
・30分待つ
・NSが違う
・S3の設定が間違っている(プライベートのままなど)
・ドメイン名を間違っている
などなど

atogaki

そんなに調べてないですがあまり外部アドレスで運用する方法記事があんまり無かったと思うので書きました。
1時間クオリティなので細かいところは許して。

13
6
6

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?