オリジナルのスクラッチアプリをAWS S3を使ってWebページで公開する方法

※ 当ページには【広告/PR】を含む場合があります。

2020/08/21

前回 | Scratch-guiのデフォルトプロジェクトを置き換える方法

の内容では、カスタマイズしたスクラッチアプリのプロジェクトで、デフォルトスタートアップページを変更する方法を解説しました。

さらに、ビルドしたスクラッチアプリをGithubのOne Page Website機能やAWS S3の静的ページホスティングを利用することで、誰からでも利用可能な作品として公開することができます。

Githubでのアプリ公開のやり方は色々と情報ややり方などを解説されている記事が検索すると出てきますが、AWSのほうはやられている方が少なそうな印象です。

というわけで今回はAWS S3を利用したカスタマイズアプリの公開の行い方を特集してみます。

【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール５選

AWS S3での作業

まず当然AWSを利用する場合には、利用者アカウントが必要になってきます。

本稿の内容は、AWS S3が利用できる開発者前提とさせていただいておりますので、AWSアカウントの取得のやり方は割愛します。

バケットの作成

まずはAWSのS3コンソールから、新規のバケットを作成しましょう。

とりあえずバケット名以外はデフォルトの値で新規のバケットを作成します。

バケットの名前はユニークにする必要がありますので、AWS上に既に存在しているバケットの名前は利用できません。

今回は、一例として

tacokin-p-school.scratch3

の名前で登録してみました。

ビルド後のアプリをアップロード

前回の記事で紹介した

scratch-gui

で利用したものをビルドしたアプリをS3バケットへアップロードしてみます。

Scratch-guiのデフォルトプロジェクトを置き換える方法

Scratchアプリへのアクセス時に表示されるデフォルトスタートページをカスタマイズする方法を解説します。

scratch-guiでビルドした生成物は

scratch-gui/build/

に出力されています。そのフォルダをのぞいでみると、以下のようなフォルダ構造になっていると思います。

開く/閉じる

            
            $ tree -s scratch-gui/build/ -L 2
scratch-gui/build/
├── [       6593]  326c5f98902ccd335b5b.worker.js
├── [       6421]  326c5f98902ccd335b5b.worker.js.map
├── [        456]  blocks-only.html
├── [       4096]  chunks
│   ├── [       5707]  blocksonly.js
│   ├── [       3467]  blocksonly.js.map
│   ├── [       6937]  compatibilitytesting.js
│   ├── [       2275]  compatibilitytesting.js.map
│   ├── [     126248]  es-steps.js
│   ├── [      41171]  es-steps.js.map
│   ├── [      12187]  gui.js
│   ├── [       7568]  gui.js.map
│   ├── [       7926]  player.js
│   └── [       4731]  player.js.map
├── [        468]  compatibility-testing.html
├── [      57235]  extension-worker.js
├── [      43935]  extension-worker.js.map
├── [        428]  index.html
├── [   23223486]  lib.min.js
├── [   21619381]  lib.min.js.map
├── [        447]  player.html
└── [       4096]  static
    ├── [      32768]  assets
    ├── [       4096]  blocks-media
    ├── [       4096]  extensions
    └── [      34494]  favicon.ico

静的ページを公開するだけなら不要なリソースも含まれていますが、とりあえず間引かずにこれら

build

フォルダの中身を一通りS3バケットへアップロードします。

静的Webページのホスティング設定

次にスクラッチアプリを静的Webページ化する作業を行っていきます。

S3コンソールのバケットの

[プロパティ]

タブから

[Static website hosting]

を選択します。

[このバケットを使用してウェブサイトをホストする]

を選択し、インデックスドキュメントの項目に、

index.html

を入力します。

これを保存したら、S3から静的なWebページとして外部に公開されます。

アクセスポリシーの設定

先程の静的ページホスティングを設定しただけだと、ブラウザからこのエンドポイント(今回は

http://tacokin-p-school.scratch3.s3-website-ap-northeast-1.amazonaws.com

というURL値になっている箇所)にアクセスした段階では

403

のエラーで弾かれる状態です。

そこで、このバケットへのアクセス権限の設定を行う必要があります。

S3のこのバケットのコンソール画面から

[プロパティ]タグ --> [アクセス権限] --> [バケットポリシー]

の順で選択して、

バケットポリシーエディター

を表示します。

そしたらテキストエリアに以下のポリシー設定を入力して保存します。

開く/閉じる

            
            {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Accsess Policy 1",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::tacokin-p-school.scratch3/*"
            ]
        }
    ]
}

ちなみにご自身のバケットにポリシーを設定される場合は、上の設定だと自身のバケットのARN値で書き換えていただくと利用できます。

【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

動作確認

S3の設定が済んだら、早速S3から静的ページにアクセスしてみましょう。

エンドポイントに設定されているエンドポイント(

http://tacokin-p-school.scratch3.s3-website-ap-northeast-1.amazonaws.com

)にアクセスすると、

のようにスクラッチアプリが表示されていたら、スクラッチでのウェブページの完成です。

所管ですが、SPA(シングルページアプリケーション)ですので、アプリの初回起動までは少し時間が必要です。これは

lib.min.js

および

lib.min.js.map

だけ合わせても42MB強もあるためにダウンロードに時間がかかっているからと思います。

ライブラリの容量を減らせばもう少しこの長めのオーバーヘッド時間を改善することもできるかもしれません。

【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール５選

まとめ

以上、

AWS S3でもスクラッチアプリを公開する方法

を解説しました。

この方法を利用すると、独自のエクステンションなども手軽に公開することができます。

より先進的なライブラリを独自に実装したい開発者の方にオススメの方法です。

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

これからの"地方格差"なきプログラミング教育とは何かを考えながら、地方密着型プログラミング学習関連テーマの記事を不定期で独自にブログ発信しています。

カテゴリー

記事のおしながき

【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール５選