Vercelで配信していた静的ページをVite + Cloudflare Pagesに置き換えた
カウンターワークスで主にDevOpsなところでお手伝いしている@tchikubaです。ベンチャー企業のTech支援やアジャイルコーチ、エンジニア向け研修など複数社に関わってます。 この記事では、HTML・CSS主体の静的ページをVercelを使って配信していた構成を、Cloudflare Pages（以下Pages）で配信するように変更した話をお届けします。 歴史的経緯 そもそもなんで静的ページをVercelで配信してたん？ってところです。 課題感 もともと、動的なアプリケーションの構成が、フロントエンド = Next.js（Vercel）、バックエンド = Ruby on Rails（AWS）で、特にバックエンドとのAPI通信を必要としないページもフロントエンド環境に組み込まれていました。 1枚もののLPやよくあるフッター系のページ（ex. プライバシーポリシー）くらいならそのままでも良
25000行超えのAPIドキュメントを分割した話
はじめに COUNTERWORKSバックエンドエンジニアの伊藤です。 この記事ではAPIドキュメント分割の知見を紹介します。 弊社では OpenAPI を使用したスキーマ駆動開発を採用しています。 1ファイルで管理していたところ、25000行を超える行数となり管理コストが高くなっていました。 そこで分割作業を実施したのですが、どのような方針でどう対応したかを紹介します。 1ファイルで運用するデメリット そもそもどんなデメリットが発生していたのかを記載します。 全体の構造が把握しづらく、新規参画者への認知負荷が高い 行数が多すぎるため、RubyMine など IDE やエディタのパフォーマンスが落ちる 1ファイルの内部で複数の箇所を参照しているが、それぞれCommand fで該当部分を探す必要がある。そのため、見ているコードの箇所が頻繁に飛んで情報が追いづらい 実際にやったこと 方針 チーム
コードレビューの優先順位を高めたらチームの生産量が上がった話
※この記事は「COUNTERWORKS Advent Calendar」の14日目の記事です。 はじめまして、株式会社 COUNTERWORKS にてEnterprise向けプロダクトのエンジニアリーダーのshimです。 私のチームは、障害対応や既に決まっていたミーティングなどの次に、コードレビューの優先順位を高くしております。 私がチームのリーダー的存在となって1年半ほど運用してきた振り返ろうと思います。 古くは Google様のドキュメント 、本年も他の会社でも同様の取り組みで良かったと聞くことが増えました。 個人的にかなり良い取り組みとなったので、この文化が広まる一助となるよう筆を執りました。 経緯 開発メンバーも増えたものの、いろいろなバックログがしかかり中で終わって、メンバー数の割になかなか価値提供までいかないスプリントが多かった時期がありました。 それについて複数要因はあったの
スプレッドシートとAWSでコストかからない業務システムを作る設計TIPS
はじめまして @shimma です。本業はD2C企業のCTOとして働く傍ら、業務支援として複数社、インフラを中心に直接手を動かして、社内で横展開できるような設計・コードベースをご提供しています。 枯れた技術で コード行数少なく 運用コストかからず 8-9割くらいのことを解決できる こちらが私の設計がポリシーです。 世の中9割はスプレッドシートで解決できる 私達の想像以上に、世の中の困りごとの大半はスプレッドシートやエクセルで解決ができます。エンジニアに依頼しなくても直接ロジック変更できるなど、組織リソースの有効化としてもメリットあります。 一方、複雑な数式やマクロにすべてを寄せ切り、ロジックを育てていくと、メンテナンスが困難を極めていきます。この記事を読んで頂いている技術者の方々であれば 複雑な箇所はコードによせて 変更しやすい所はスプレッドシート／Google App Script とい
Reactで再レンダリングを抑えるシンプルな方法
はじめに 「React で再レンダリングを抑えたい...」となった場合、多くの人が React.memo や useMemo、useCallback などのいわゆる 「メモ化」 を思い浮かべることでしょう。 しかし、そういった「メモ化」を用いなくても再レンダリングを抑える方法が実は存在しています。 今回はその代表的な例を２つ紹介していきたいと思います。 よくある例 まず例として、以下のような 「パフォーマンスに問題を抱えたコンポーネント」 を考えてみましょう。 import { useState } from "react"; export default function App() { let [color, setColor] = useState("red"); return ( <div> <input value={color} onChange={(e) => setColo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
