Amplifyを使ってGatsyby.jsのホスティングとバックエンドの構築を最近やっていて、
sotrybookを使っていたので簡単にホスティングできる方法を探したところ、色々他サービスあるんですが、BASIC認証が有料だったりともあるのでAWS Amplifyでやってみた。
1. amplifyのアプリを作成
メインのアプリとは別にstorybook用のアプリを作成します。
※著者はすでに作ったあとなのでこのように２つのアプリに分けるようにします。
2. リポジトリの選択
ポチポチ、リポジトリとブランチを選択します。
3. ビルドの設定
-
backendは不要なのでチェックを外しておきます（デフォルトだとチェックが入っている）
-
ymlは初期時に自動で入っているので[Edit]します。
-
yarn run build→yarn run storybook:buildと変更して保存します。
※自プロダクトのpackage.jsonのscriptに設定されているscriptを実行するのでコマンド名が違う場合は適宜変更を。
4. 公開
-
ビルドの書き換えができたら[次へ]を押下し、確認画面で、[保存してデプロイ]を押下してあとはビルドが終わるのを待つだけです。
-
おお、公開された！
5 BASIC認証
このままだとURLアクセスすると誰にでも見られてしまうので一応BASIC認証をかけておきます。
アプリの中に「アクセスコントロール」があるのでそこの[アクセス管理]から環境ごとにBASIC認証がかけられます。
まとめ
他にもいろいろホスティングサービスはあるけど、BASIC認証は有料だったり、描画が遅いとか、デプロイが面倒とかうまくいかなかったりしてとかあるから、AWS使っているならぜひampfliyはおすすめしたい。
静的ホスティングだけでも使えるし、バックエンドも構築できるのでフロントライクな環境が簡単に作れて好きです。
あとは指定したブランチ(master)にコード修正をマージしたらデプロイが自動で走るのでCIツールの設定も不要。
ここでは話していませんが、同じアプリ内で環境切り替えもできるので環境変数はもちろん、簡単に同環境を複製もできるのでサーバー建てる作業も必要ないのもとてもいいですね。