Amplifyを使ってリプレイスした話ジャムジャム!!Jamstack_6【初心者歓迎LT会】で話した内容です。Amplifyを使ってリプレイスした時のことを話しました。ジャムジャム!!Jamstack_6【初心者歓迎LT会】https://jamjamjamstack.connpass.com/event/240403/使用した技術というよりは、Jamstack化した理由や得られたメリットを中心にまとめました。スライド37ページ目の補足記事はこちらです。WAFおよびWafCharmを複数サービスに導入した結果と課題iwamot0170『AWSではじめるクラウドセキュリティ』の裏側を。https://github.com/Yota-K経歴2020年4月にエンジニアになったので、エンジニアとしての実務経験は2年弱です。1社目ではWordPressを使ったサイト構築と社内ツール(PHP・Laravel)の開発に携わっていました。2020年5月からショーケースにジョインして、現在は自社SaaSアプリのフロントエンド開発(TypeScript・React、たまにVue)及び、技術選定に携わっています。Slide社内の採用サイトWordPressから、microCMSを用いたJamstack構成にリプレイスを行いました。表示崩れが目立っていたエンジニアではない人がサイトの構築に携わったこともあり、PCとスマホで見た時の見え方しか考慮されておらず、表示崩れが目立っていた。見た目だけではなく、内部的な不備も目立っていた内部的な不備としては、主に以下のような問題が発生していた。新を行うことが困難な状態になっていた。月のPV数が1500程度にも関わらず、月平均で6000円程度と、PV数に見合わない無駄なコストが発生していた。HTML・CSSの知識がない人でもコンテンツの編集を行えるようにしたかったから。APIスキーマを自由に組むことができ、サイトの改修にも柔軟に対応できると考えたから。法人でも無料プランで運用でき、アクセス数が増えたら有料プランへの移行も可能だから。ヘッドレスCMSとの相性がいいから。Routesを使いたい処理が必要だったから。→メールの送信処理で使用。SDKを使用してSESからメール送信できるようにしています。今後TypeScript・React・Next.jsを社内のフロントのコア技術として採用することを考えており、上記の技術に触れられる環境を作るため。JS系ライブラリの一種。CSSの記述をTypeScriptかつ、JSのオブジェクトスタイルで記述を行うことができるため、型補完をフル活用して、スタイルの記述を行うことができるのが特徴。CSSを用いて、メンテナンスしやすいCSSを書きたかったから。サイトの改修に関わるのはエンジニアのみのため、オブジェクトスタイルで記述できたほうが作業効率がいいと考えたから。今後開発予定のサービスでAmplifyを採用する可能性があったため、Amplifyの知見を社内に残しておきたかったから。社内のインフラは基本的にAWSで管理されており、リソースの管理を複雑にしたくなかったから。各々の作業領域を明確化することで、上記のような問題の再発を防ぐことができるのではと考えた。Slideお互いの担当業務を明確にすることで、サイトの品質を保つ事に繋がるCMS側で編集できない部分は自分たちにお任せあれ!CMS側で編集可能な部分の更新だけやればいいのかー!HTML、CSS、JavaScriptなどはエンジニアが編集する。運用者(人事)の方から、「編集しやすくなった」、「サイトが見やすくなった」とお褒めの言葉をいただいた。サイトの運用にかかるコストが削減できた。極的に導入されるようになった。Slide今回執筆仕切れなかった部分はブログにまとめたのでブログの方をご覧ください。creators.TermsPrivacyDMCA。