まえがき
Unity Asset Store に例の
どうも初回投稿なら、技術力を見せるサイトを持ってないとダメな様子
仕方なく、作ることにします。
とりあえず index.html にアセットの画像がごろごろあればいいんかな
Node 環境を整える
Web サイトか…
今なら React x Typescript かな？
ということで node パッケージマネージャーを使えるようにしましょう。
Windows 環境はインストーラから入れるなど
nodejs.org
React x Typescript のサンプルをローカルで作る
こちらの技術書を読んで、サンプルを動かしながらコードを理解してみる
oukayuka.booth.pm
typescript で、見ただけでデータの動きがアニメで見えることが大事
以下のような単語で絵が動けばいい
分割代入
スプレッド演算子
読み切れば Redux + Saga の概念の理解と関数コンポーネントによる React の具体的実装がわかる
独自ドメインで世界に公開する
https://unityassets.elastprism.com/
具体的な手順はこちら
qiita.com
１．yarn build でできた build フォルダの中身を S3 にアップロード
２．Cloudfront でディストリビューションを作って、データオリジンに S3 を選ぶ
参考記事
simplestar-tech.hatenablog.com
３．バージニア北部にドメイン指定で証明書を作る
４．Route53で独自ドメインからCloudfrontへのAlias作る
以上の手順で世界からの独自ドメインリクエストするとCloudfrontへルートができて、各エッジサーバーからReact の SPA のアクセスが有効になる
肝となるのが、上記の Qiita の紹介にあるとおり Cloudfront の Custom Error Response で /index.html を 403 や 404 のときに返すようにする
これで、どの Route 先ページでも F5 でリロードしても S3 アクセス拒否という 403 エラーは返ってこない
そういえば昔ホームページの作り方を書いたことあったけど5年もすると Cloudfront で SPA を配信できるようになる（腕を上げたな）
simplestar-tech.hatenablog.com
ところでアセット紹介ページがまだぜんぜん形になってないのです。
追記：
単純に yarn build の成果物を公開すると .map ファイルが同梱されるためソース内容(ts, tsx)実装が同時に公開されてしまいます。
.env ファイルを直下に置いて
GENERATE_SOURCEMAP=false
を書き込んでから yarn build することで without sourcemap で build でき、それを公開した場合は実装がばれずに公開することができました。
情報元はこちら
qiita.com
