Help us understand the problem. What is going on with this article?

S3への静的サイトホスティングとAmplify Consoleによるデプロイ比較

S3への静的サイトホスティングとAmplify Consoleによるデプロイ比較

この記事はサーバーレスWebアプリ Mosaicを開発して得た知見を振り返り定着させるためのハンズオン記事の1つです。

以下を見てからこの記事をみるといい感じです。

イントロダクション

Amplify Consoleの楽さをより実感するために、あえてS3にもデプロイして静的サイトとしてホストします。
静的サイトといえど、Webアプリとして動作します。

コンテンツ

S3バケットの作成

AWSコンソール > S3 > バケットを作成するボタンを押下
Screenshot 2019-12-31 at 07.16.34.png
適当なバケット名前を入力し、次へ進んでください。
オプションの設定は、デフォルトのまま進みます。
アクセス許可の設定は、「パブリックアクセスをすべてブロック」チェックをOFFにして進みます。
Screenshot 2019-12-31 at 07.26.10.png
最後のページ確認でバケット作成ボタン押下により、S3バケットが作成されます。

Webアプリケーションのビルド&デプロイ

Webアプリケーションをビルドします。

$ npm run build

ビルドエラーなく完了すると、distフォルダにデプロイするファイルが発行されています。
このdistフォルダの中身を作成したS3バケットにアップロードします。

$ aws s3 cp ./dist s3://**********/ --recursive --acl public-read --cache-control "max-age=604800"

(※xxxxxxxxxxは作成したバケット名に置き換えてください。)

S3の作成したバケットに、distフォルダの中身がアップロードされていることを確認しておいてください。
Screenshot 2019-12-31 at 08.26.10.png

S3バケットのバケットポリシー設定

作成したバケット > アクセス権限 > バケットポリシー と選択してゆき、
バケットポリシーエディターに以下を設定し、保存します。
(※xxxxxxxxxxは作成したバケット名に置き換えてください。)

 {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::xxxxxxxxxx/*"
        }
    ]
}

Screenshot 2019-12-31 at 07.53.53.png
保存すると、このように、「このバケットにはパブリックアクセス権限があります」というメッセージが表示されます。(バケットにファイルが1つも存在しない場合、この処理は失敗します。)

S3の Static website hostingを有効にする

作成したバケット > プロパティ > Static website hosting を選択し、以下を設定して保存します。
このバケットを使用してウェブサイトをホストする : チェックON
インデックスドキュメント : index.html
Screenshot 2019-12-31 at 08.02.57.png

アクセスしてみる

Static website hostingの上部に記載されているエンドポイントにアクセスし、アップロードしたWebサイトが正しく表示され、Webアプリとして問題なく動作することを確認してください。

あとがき

いかがでしょうか。
S3の静的サイト作成に対して、Amplifyのアプリ作成、最初の作成の手間こそさほど違いませんが、デプロイの手間の差は結構大きいと感じます。

S3静的サイトホスティングの場合、まずはアプリをビルドし、ビルドが完了するのを待ち、S3にアップロードする、という一連の作業が必要となります。
Amplify Consoleの場合、リポジトリにコミットするだけです。
ビルドを待つ必要もないし、別途アップロードする手間もない。エラーがあれば中止してくれる。

デプロイは何度もする作業ですので、この差は大きいのです。

独自ドメインの設定をするのも、Amplify Consoleのほうが圧倒的に楽なのですが、それについては別記事にしたいと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした