この記事は、ハシゴ Advent Calendar 2020の 5 日目の記事です。
この 5 日目の記事を持って、JAMStack なプロダクトの話はおしまいです。この連載中何回か書きましたが、当プロダクトは、リポジトリは 1 つで、build 時の環境変数で振り分けて 2 環境立ち上げています。
こういう姉妹プロダクトみたいなケースって、共通のライブラリのリポジトリを使って、実体は 2 つそれぞれのリポジトリに分かれているケースが多いと思いますが、今は 1 リポジトリで運用しています。
この運用をする中で感じたツラみをお話しようと思います。
GitHub にはどちらか一方のステータスしか流れてこない
一番困ったのが、これです。Amplify の Preview を CI に入れてるんですが、この結果としては、「どちらか一方の結果」しか流れてきません。
なので当然 Preview 環境の URL もどちらか一方しか降ってこないので、どちらも見る必要がある場合は、わざわざ AWS のコンソールにアクセスして拾ってくる必要があります（まぁ命名規則は決まっているので直打ちでいけないわけではありませんが、ワンクリックでは飛べない）。
地味ですが、地味ゆえにボディーブローのように積み上がってくるツラみがありました。
ちょうど AWS の方と話す機会があったので共有したところ、「そ、そんなトリッキーな使い方するヤツがいるなんて…クレイジー！」（意訳）みたいなことをおっしゃってました。
もしかしたらいい感じに対応してくれるかもしれないので、期待して待ちましょう。
環境変数増えがち
Amplify 環境は CDK を使って構築しています。当然こちらも 1 リポジトリで、GitHub Actions 経由で deploy まで流しているので、その中に環境変数を埋め込む必要があって、環境変数増えがち問題が発生しています。
今見たら 30over ありますね…多いな、おい。
2 環境分 * dev/stg/prd 分なので、まぁこれはどうしようもないのかなという感じですね…。
Component 内にロジックが混入しないような工夫
どちらも同じ Component を出すんであれば話は早いんですが、当然そんなことはなく、あっちはこの Component、こっちはこの Component と、それぞれ出したい Component は違います。
順当に書いてしまうと、Component 内で分岐を書いてしまいがちで、これが積み重なると見事にv-ifだらけのコードが生まれてしまいます（実際にこうなってました）。
たださすがにツラかったので、これを隠蔽すべく、main.js内でグローバルコンポーネントとして登録することにしました。
if (process.env.GRIDSOME_APP_NAME === "foo") {
Vue.component("Logo", LogoFoo);
...
} else if (process.env.GRIDSOME_APP_NAME === "bar") {
Vue.component("Logo", LogoBar);
...
} else {
throw new Error("GRIDSOME_APP_NAMEが設定されていません");
}あんまり美しくはありませんが、Component 内では何も意識することがなくなるので、便利です。
おわりに
結構ツラかった記憶があったんですが、振り返って見ると、全然そんなことないですね。タイトル詐欺でした:(
ただやっぱり 2 リポジトリに分けちゃおうか、という案も実はあって、検討した結果「やっぱ 1 個でいいや」ってなりました。一番は、上記のグローバルコンポーネントに登録する運用に変えたのが結構いい方向に働いた感じですね。
とりあえず、今回のアドベントカレンダーを通して使えたかったことは、Amplify はいいぞ です。
ありがとうございました！