.app ドメインで、サーバーレスアプリを公開する

Googleが30億円かけてゲットした新ドメイン「.app」をついに運用開始 - GIGAZINE

ということで、Google Domainでドメインを取得して、アプリを公開してみました。

https://www.mc-skin.app/

マインクラフトの、主人公キャラ用のスキンを作れるアプリです。

ドメイン取得

Google Domainはこちら:

https://domains.google/#/ f:id:doloopwhile:20180604184103p:plain

とは言っても、Gmailなどで、すでにGoogleアカウントを持っていれば、簡単。

検索ボックスから、ドメインを検索して、指示に従って購入するだけです。

アプリを作成する

Reactでアプリを作成

react-create-app でアプリを作りました。

ちなみに、私は疎くて知らなかったのですが、WebpackではHTMLだけでなく、 CSSや画像も、JavaScriptの中でシームレスに扱えるんですね。便利!

import logo from './logo.png';

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

Adding Images, Fonts, and Files

S3 にバケットを作成

Amazon S3 に、適当な名前のバケットを作成します。

react-create-app は yarn build で公開用のファイルを生成できるので、そこに適当なファイルをアップロードします。そして、バケットのプロパティで「Static website hosting / このバケットを使用してウェブサイトをホストする」を有効にします。

なお、Amazon S3 では静的ウェブサイトのホスティング できるのですが、 この方法だとHTTPになる(.app ドメインではHTTPSが必須)なので、Cloud Frontを併用します。

Cloud Front で公開

https://console.aws.amazon.com/cloudfront/home?region=us-east-1 でCloud Front のDistributionを作成します。

なんか設定項目がやけに多いのですが、

  • "Origin Domain Name" に、S3のバケットを指定
  • "Alternate Domain Names(CNAMEs)" に、Google Domains で取得したドメインを指定
  • "SSL Certificate" で "Custom SSL Certificate" を指定し、"Request or Import a Certificate with ACM" で、SSL証明書を作成

かかった費用

Google Domain:
12ドル / 年 / 1ドメイン

S3:
ストレージ: 0.023ドル / 1GB / 月 通信はCloudFrontがキャッシュするので、ほぼ無し。

CloudFront:
通信量による従量課金:

-(米リージョン)0.085ドル / 1GB -(日本リージョン)0.140 ドル / 1GB

次にやること

今回公開したアプリは、フロントエンドのみのアプリでした。 (マイクラのスキンを編集できるだけ)。

AWS Lambdaなどを使えば、このままサーバレスのまま、スキンを公開したりする機能も作れるでしょう。