.app ドメインで、サーバーレスアプリを公開する
ということで、Google Domainでドメインを取得して、アプリを公開してみました。
マインクラフトの、主人公キャラ用のスキンを作れるアプリです。
ドメイン取得
Google Domainはこちら:
とは言っても、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 にバケットを作成
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などを使えば、このままサーバレスのまま、スキンを公開したりする機能も作れるでしょう。