Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

弊社の「意識チョット低いアーキテクチャ」10選

meijin
October 28, 2024

 弊社の「意識チョット低いアーキテクチャ」10選

meijin

October 28, 2024
Tweet

More Decks by meijin

Other Decks in Programming

Transcript

  1. 【BE】定期バッチや遅延実行はFargateのコンテナをStep Functionsから呼んで済まそう 1 【BE】とりあえずControllerからUseCaseは最悪切ろうね 2 【BE】PHPだけどPHP Stanのレベルを10段階の6までにしてるよ 3 【BE】Laravelの機能のうち、ORMにあまりにベタベタな機能はそもそも使わないでね 4

    【FE】Next.jsだけどApp Routerじゃないよ 5 【FE】デザインシステムなんて整っていないけどTailwind CSSだよ 6 【FE】WebもアプリもReactだけど、言うほどコード共通化してないよ 7 【BE/FE】OpenAPI書かなくていいよ。aspidaでサクッと型付けしちゃおう 8 【BE/FE】高速化がどうしてもしたいページはCloudFrontのSWRキャッシュで済ませるよ 9 【BE/FE】腐敗防止層は適当でもめっちゃ価値あるから積極的に切ろう 10
  2. 前提知識 マナリンクでは、バックエンド(Laravel)アプリケーションをAWS Fargateで運用 Welcome to PlantUML! You can start with

    a simple UML Diagram like: Bob->Alice: Hello Or class Example You will find more information about PlantUML syntax on https://plantuml.com (Details by typing license keyword) PlantUML 1.2024.8beta3 [From string (line 3) ] @startuml !define AWSPuml https://raw.githubusercontent.com/awslabs/aws-icons-for-plantuml/v18.0/dist !include AWSPuml/AWSCommon.puml Cannot open URL
  3. AWS Step Functionsからアプリケーションと同じ ECS Taskを起動 Welcome to PlantUML! You can

    start with a simple UML Diagram like: Bob->Alice: Hello Or class Example You will find more information about PlantUML syntax on https://plantuml.com (Details by typing license keyword) PlantUML 1.2024.8beta3 [From string (line 3) ] @startuml !define AWSPuml https://raw.githubusercontent.com/awslabs/aws-icons-for-plantuml/v18.0/dist !include AWSPuml/AWSCommon.puml Cannot open URL
  4. Step Functionsについて軽く解説 AWS Step Functions(Sfn)は多くのAWSサービスをフローチャートの要領で連携できるサービス トリガーにEventBridgeを設定でき、Cron式で定期実行が可能。タイムアウトやリトライも設定可 SfnはECS Task起動時にStdInを指定できるので、定期バッチ名や引数も渡すことができる 以下の例ではJST17時に php

    artisan command:introduce-trial-support を アプリケーションと同じDockerベースのインスタンスで実行する IntroduceTrialSupport: Type: Schedule Properties: Input: '{"commands": ["php", "artisan", "command:introduce-trial-support"]}' Schedule: 'cron(0 8 * * ? *)'
  5. Next.jsだけどApp Routerじゃないよ 2024年10月現在、弊社ではまだPages Routerを利用 思考プロセス 個人開発でApp Routerを検証し、ざっくり把握&移行見立ては立てている 'use client' しまくれば(理想かはさておき)移行自体は最悪できそう

    revalidateTag が動かないIssueが上がるなど、まだBuggyな部分がある&キャッシュの Opt-inなど思想も不安定 キャッシュ戦略はCloudFrontで今は十分(後述)だし、メディア&SaaSの特性が両方持っ ていてベストプラクティスが決めにくい ➡️前向きに移行するより必須度が上がったら移行する感じ
  6. OpenAPI書かなくていいよ。aspidaでサクッと型付 けしちゃおう aspidaとは APIの型定義をTSで書くと、型安全にAPIを叩くクライアントが自動生成されるライブラリ const { data, error, isValidating, mutate:

    revalidate } = useAspidaSWR(apiClient.available); console.log(data.is_available); // boolean type safe export interface Methods { get: { resBody: { is_available: boolean; }; }; }
  7. 史上最強に意識が低い腐敗防止層 …こんなただLibraryからImportしてExportするだけのコンポーネント、意味があると思いますか? import { Tab as LibTab } from '@headlessui/react';

    export const Tab = LibTab; export const TabPanel = LibTab.Panel; export const TabList = LibTab.List; export const TabPanels = LibTab.Panels; export const TabGroups = LibTab.Group;
  8. あります! 背景知識 Headless UIは、特定バージョンから Tab.Panels コンポーネントを TabPanels に変更した 現バージョンのHeadless UIから直接TabをImportしていると、ライブラリアプデ時に、

    N箇所のコンポーネントを Tab.Panels から TabPanels に変更する必要がある あらかじめ内製Wrapperで Tab.Panels を TabPanels に変換しておくことで、アプデ時の 影響範囲を1箇所に絞ることができる import { Tab as LibTab } from '@headlessui/react'; export const Tab = LibTab; export const TabPanel = LibTab.Panel; export const TabList = LibTab.List; export const TabPanels = LibTab.Panels; export const TabGroups = LibTab.Group;