AWS日記46 (Amazon S3 - WebAssembly)

はじめに

今回はAmazon S3の静的ウェブサイトのホスティングを試します
ウェブサイトのホスティングの有効化の手順を参考にしつつ、WebAssemblyを利用したサイトをホスティングします

準備

• wasmファイル作成
  • WebAssembly | MDNを参考に、wasmファイルをビルドします。

wasm-pack build --target web

• htmlファイル作成
  • index.htmlを作成し、wasmファイルをロード・実行する処理を書きます

let wasm;

let cachedUint8Memory0 = new Uint8Array();

function getUint8Memory0() {
    if (cachedUint8Memory0.byteLength === 0) {
        cachedUint8Memory0 = new Uint8Array(wasm.memory.buffer);
    }
    return cachedUint8Memory0;
}

const heap = new Array(32).fill(undefined);
heap.push(undefined, null, true, false);
function getObject(idx) { return heap[idx]; }

let cachedInt32Memory0 = new Int32Array();

function getInt32Memory0() {
    if (cachedInt32Memory0.byteLength === 0) {
        cachedInt32Memory0 = new Int32Array(wasm.memory.buffer);
    }
    return cachedInt32Memory0;
}

...

const imports = {};
imports.wbg = {};
imports.wbg.__wbindgen_object_drop_ref = function(arg0) {
    takeObject(arg0);
};

...

WebAssembly.instantiateStreaming(fetch('sample_wasm'), imports).then(obj => {
    wasm = obj.instance.exports;
    cachedInt32Memory0 = new Int32Array();
    cachedUint8Memory0 = new Uint8Array();
});

Amazon S3 設定

• 今回はAmazon S3 コンソールを使用します

S3 バケット作成

S3 アクセス許可の設定

静的ウェブサイトホスティングの有効化

• バケットのプロパティの最下部にスクロールします

• バケットウェブサイトエンドポイントを書き留めます
• ファイルアップロード後、このURLにアクセスします

バケットのアクセス許可の確認

ファイルアップロード・設定

• アップロードしたwasmファイルのメタデータを編集します
  

• メタデータの値を 「application/wasm」 に変更します

別の方法で設定 (CloudFormation & AWS CLI)

S3バケット作成・設定

---
AWSTemplateFormatVersion: "2010-09-09"
Transform: AWS::Serverless-2016-10-31
Description: S3 Static Website

Parameters:
  ApplicationName:
    Type: String
    Default: 'S3StaticWebsite'

Resources:
  StaticWebsiteBucket:
    Type: "AWS::S3::Bucket"
    Properties:
      AccessControl: PublicRead
      WebsiteConfiguration:
        IndexDocument: index.html

  StaticWebsiteBucketPolicy:
    Type: "AWS::S3::BucketPolicy"
    Properties:
      Bucket: !Ref StaticWebsiteBucket
      PolicyDocument:
        Statement:
          - Action: "s3:GetObject"
            Effect: Allow
            Resource: !Sub "arn:aws:s3:::${StaticWebsiteBucket}/*"
            Principal: '*'

Outputs:
  APIURI:
    Description: "URI"
    Value: !GetAtt StaticWebsiteBucket.WebsiteURL

sam package --output-template-file packaged.yml --s3-bucket {bucket}
sam deploy --stack-name {stack} --capabilities CAPABILITY_IAM --template-file packaged.yml

ファイルアップロード

aws s3 cp index.html s3://bucket-name --content-type "text/html"
aws s3 cp sample.wasm s3://bucket-name --content-type "application/wasm"

終わりに

Amazon S3の静的ウェブサイトのホスティングを試しました。
今回は Fetchを使用してWebAssemblyコードのロードを行いました。
WebAssemblyコードのロードと実行にあるような別の方法も、今後試していこうと思います。

追記：パッケージのウェブでの利用 の方法がシンプルです。
wasmファイルと jsファイルをアップロードし、html内に import 処理を書くことでパッケージを利用できます。
特に、ロード後に1度だけ実行するWebページの場合 (対話型の処理が無い場合)は有用です。