More than 3 years have passed since last update.

s3静的ホスティング+clouddrontによるhttps通信でリニューアルページを設置する

Posted at 2021-02-16

目的

既存webサービスをデプロイしている
https://sss.red-miso.work/
のURLを工事中リニューアルページに差し替える

経緯

SkateSpotSearch

というwebサービスをrails+webpackerで作成
aws ecs+circleCI+code3兄弟で構築しておりました。
↓こんな感じで

フロントとバックエンドを分離するSPA構築にしたい
ので、
一旦サービスを停止。
URLはそのままにリニューアルページを差し替えたいと思います。
よろしくお願いいたします。

リニューアルページを作成しておく

最低限

index.html
があれば良いですが、今回は勉強も兼ねてvue.jsで簡単に作成してみました。

vueでのリニューアルページ作成

vue create .
npm run serve ==>>(localhost:8080で確認できる)
[画像ファイルと文言を整える]
npm run build ==>> 別ディレクトリ/distが作成されます。これをS3にあげますね！

↓localhost:8080で見ると、こんな感じですね！
あ、Canvaというおすすめの
Canva:ロゴ作成サイト
があるのでチェックしてみてください！使いやすいですよ！

S3で新規バケット作成〜エンドポイントでアクセス可能にしよう

AWS S3
↑アクセスして、

バケットを作成
バケット名を２つ作成(ドメイン名とサブドメイン名を)する。

red-miso.work
sss.red-miso.work

ドメインとは、

定義域という意味ですが
簡単にいうと
私のURLが
https://sss.red-miso.work
ここでいう
red-miso.work
がお名前ドットコムなどで購入したドメインです！

サブドメインとは、

任意で設定可能で、サイトを拡張していくときなどブランディングができ便利です！
route53にて、レコード作成するタイミングで
sss.red-miso.workからred-miso.workへ
とアクセスをマッピングする役割があります。
sssを含む、
sss.red-miso.workがサブドメインに当たります。

ドメイン名（red-miso.work）バケット内で、[タブ]アクセス許可内の

↓パブリックアクセスができるように変更する

↓バケットポリシーにポリシー追加する

コピーして使ってね！

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3::: **ここにバケット名を入れましょう** "
        }
    ]
}