最近になって Frontend Ops の傭兵として活動を始めました。 Frontend Ops 実践のモデルケースとして、 株式会社GiXo様で Next.js 仕事に取り組ませいただきました。今回、その内容を公開する許可を頂けたので、事例として公開させていただきます。 依頼主 株式会社GiXo様 以下、敬称略 相談内容 フロントエンド関連のリポジトリで、Next.js のビルドが遅くなってしまった。 重いことに起因して Vercel CI で OOM で確率的に落ちるようになった。CIが信用できなくなり、とりあえず再ビルドするクセがついてしまって、生産性が落ちている。 モノレポ内にとくに重いアプリケーションが一つあり、これを調査・解決してほしい。 仮ゴール: VercelCI 上のビルド時間を半分OOM が発生しないようにしたい 調査フェーズ リポジトリの閲覧権を頂き、プロジェクト構成

皆さんこんにちは。この記事では、筆者が最近業務中に経験した恐るべき罠についてシェアしたいと思います。 CIでユニットテストを実行することは、とても多くのプロジェクトで行われています。ユニットテストは特に、既存のコードの変更を自信を持って行うために必要なものです。弊社でも、CI (GitHub Actions) でユニットテストを実行しています。 あるとき、CIの挙動が不安定になったことをきっかけに、CI上でのユニットテストの実行について調べてみました。その結果、とんでもないことが判明したのです。 不安定になったCI 時折、CIにすごく時間がかかり、30分経ったあたりでタイムアウトしてしまうことがありました。そのときのログを見てみると、jestによるユニットテストが実行されている最中に、何のログも出力せずに突然止まっているようでした。そのようなときはリトライするとそこそこの確率で成功します。

最初に作ったのがCIAnalyzerです。なるべくツール自体の運用の手間がかからないように常駐サーバー無し、データの保存先と可視化はマネージドサービスを使う前提で設計しました。具体的にはデータの保存先をBigQueryとすることによって自前でDBを管理する必要をなくし、webhookを受けるのではなくcronで定期的にAPIを叩くことで常駐サーバーを不要にし、データの可視化はBigQueryと簡単に連携できてマネージドサービスであるLooker Studioを使用する前提としました。 CIAnalyzerのアーキテクチャ CIAnalyzerを作ったきっかけはAzure Pipelineの分析機能に感銘を受けたことで、それと同等の分析を当時自分が業務とプライベートで使用していたJenkins, CircleCI, Bitrise, GitHub Actionsでも可能にしたいと思って開発を

はじめに この記事では、 フロントエンドの開発において意義のあるテストはなにか？ それらをコスパよく実現するためにはどうすればよいか？ について考えて、作った構成を紹介します。 前提 下記の技術スタックを利用していますが、これ以外のスタックでも応用可能な仕組みが多いと思います。 Next.js Storybook playwright msw msw-snapshot （拙作） 注意事項 この記事の構成は、まだまだ実験的な機能だったり怪しい技術が一部採用されています。 msw-snapshot 拙作のライブラリであって、動作が怪しい可能性がめっちゃあります。 Next.js の testmode playwright + msw を実現するために必要でした。 まだまだ全然まともに動かないかもしれません。（サンプルリポジトリの単純なテストは動いた） サンプル 下記のリポジトリにサンプルを用意

【Unit4 ブログリレー 1日目】 Viteは"ヴィート"と読みます♫　もう覚えましたね♫*1 こんにちは、エムスリーエンジニアリンググループの山田(@Satoki_1226)です。 本日より、Unit4でもブログリレーを行うこととなりました。Unit4は医療系ポータルサイト m3.com の開発・運営を担当するチームです。Unit4エンジニアがリレー形式でテックブログを執筆し、どんなメンバーがいるのか・どのような開発をしているのかなど、ご紹介できればと思います。 トップバッターである私からは、m3ラウンジというサービスのVite移行時に得られた知見をもとに、 Vite/Vitestへの移行によって感じた「速さ」 移行時の手順とポイント をお伝えできればと思います。Viteが気になっている方や、Vite移行の進め方に困っている方にとって少しでも参考になれば幸いです。なお掲載しているサンプ

自分がチームでフロントエンドの開発をするときの技術選定について書きます。 ログインしてユーザーごとに個別の情報を扱うことがメインのサービスを前提に書きます。 考え方 メンテナンス性の優れたものを選ぶ 制限が少ないものを選ぶ 余計なことに気を使わない 一気にいろんなことに挑戦しすぎない フレームワーク 正直に書くと最近は問答無用でNext.jsを選択しています。 慎重な性格なので、自分が責任を持って開発、運用するプロダクトであれば自分の経験値が高く、多くの課題をクリアできるNext.jsを選びます。 一部インフラの制約があるものの、ページごとにSSGやSSR、On-demand ISRなどができること、Reactの大きなエコシステムの恩恵を受けられることは非常に大きいです。 採用面でも現状Reactを扱える人は他のフレームワークを扱える人より多く感じます。 次点でCloudflare Wor

こんにちは！ソウゾウの Software Engineer の @dragon3 です。 連載：「メルカリShops」プレオープンまでの開発の裏側の８日目を担当させていただきます。 この記事では、メルカリShops 開発において、日々バリバリに利用されている CI/CD 環境と Pull Request 毎のデプロイ環境について紹介します。 CI/CD 環境 メルカリShops では、CI/CD （テスト・ビルド・デプロイ）やその他自動化のために GitHub Actions を使っており、ほとんどのワークフロー・ジョブを Self-hosted runners で実行しています。 Self-hosted runners は、専用の VPC ネットワーク 内の GCE インスタンス上で動かしており、Managed Instance Group 等を使い、そのプロビジョニングや起動・停止等は

オリジナルのJavaScriptライブラリを公開します！ ライブラリの作り方よりかは、実際に公開する手順やCI/CDについて解説します。 【技術】 ・ JavaScript ・ Node.js ・ npm/yarn ・ Mocha ・ Chai ・ Git/GitHub ・ GitHub Actions

【注意】この記事で紹介しているSMS APIサービスのVonageは利用規約により認証にVonageの電話番号を利用することを禁止しているという記述があるので、末尾の別解として載せたAndroidデバイスを使ってSMSを転送する方法が良さそうです。 help.nexmo.com 2021年2月から、App Store Connectにログインする際にすべてのApple IDで2ファクタ認証が必須になります。 Starting February 2021, additional authentication will be required for all users to sign in to App Store Connect. This extra layer of security for your Apple ID helps ensure that you’re the only

【CICD2021】デプロイメントパイプラインの原理原則を再確認する / Confirm Deployment Pipeline Principle

2020年になって、CircleCIのCI用の公式ベースイメージはcimg/base派生になった。 ただ、2020/06/07現在、Go向けの言語別公式ガイドの中身は古いままである。 cimg/goを使ったGo向けのCircleCIの設定をまとめる。 TL;DR CircleCIで利用するコンテナイメージに次世代版が登場した。 https://hub.docker.com/r/cimg/go 直接使わなくても、Orbsが便利 https://circleci.com/orbs/registry/orb/circleci/go go/mod-download-cachedでキャッシュとGo Modules周りがすぐ解決。 go-junit-reportをgo getしなくてもよい gotestsumコマンドがデフォルトインストールされている GOPATHは変更されているので注意する /hom

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

2019年7月22日のJAWS-UG アーキテクチャ専門支部での発表資料です。 引き続き、議論・更新していきたいと思います。 (運用設計ラボ合同会社 波田野裕一)

概要 Dockerfileを書くためのベストプラクティスを読んで、ベストプラクティスなDockerfileを作った/作りたい人が対象です。 そのDockerfileで大丈夫かを3分でチェックできるツールをつくりました。Hadolintのような、単なるDockerfileのLinterではなく、ビルドしたイメージの中身まで細かく分析します。 通常のLinterでは原理的に不可能な、ベースイメージに存在している危険性も含めて調べることができます。 ←GitHubのStarもらえると嬉しいです。 Dockleの内部で使われているツールはTrivy, Vulsなどと同じなので、そのあたりを踏まえて、動作原理を別記事にまとめました。 人を震えさせるツール｢Dockle｣の仕組みを解説 なお、DockerHubで人気のコンテナに対して試した結果をサイトにして公開しています。操作方法もふくめて、別記事に

問題 select * from member where namae like '%サトウ%'; こんなSQLで、namaeがサトウ、ｻﾄｳ、さとう、サトｳ（一部半角）何でもマッチさせたい！ 答え では、これで。 select * from member where namae collate utf8_unicode_ci like '%サトウ%'; データベースがutf8でないときは、もうひとつ変換を入れて、 /* ERROR 1253: COLLATION 'utf8_unicode_ci' is not valid for CHARACTER SET 'ujis' など言われたら */ select * from member where convert(namae using utf8) collate utf8_unicode_ci like '%サトウ%'; 数字の全角/半

社内外でちょいちょい聞かれるのでメモ。 前置き GitHubを使ってる場合 ライブラリを作ってる場合 Travis CIを選択する理由 2020/4/21追記 Travis CIを選択しない理由 アプリを作ってる場合 CircleCIとWerckerの共通点 CircleCIとWerckerの機能差異 GitLabを使ってる場合 GitLab CIの優位点 Jenkinsなどを使った方がいい場合 追記：2018/12/8 前置き 100%自分の主観なので偏ってます SaaSかオンプレならSaaS派。（自分でサーバの面倒身たくない） 自分が使ったことがないものは紹介していません 今回紹介してるTravis CI, CircleCI, Wercker, GitLab CI, Jenkinsに関しては仕事や趣味で各3〜4年くらいは使ってるはず GitHubを使ってる場合 ライブラリを作ってる場合

こんにちは。 品質向上グループの茂呂一子(@ichiko_revjune)です。 クックパッドアプリは、サブミット・リリース作業を自動化して、アプリを毎週サブミットするようになりました。これを実現するリリースフローについては、 クックパッドアプリはみんなが寝ている間にサブミットされる で紹介しました。 このリリースフローを実現していく過程では、「機械に人間があわせる」という方針で、サブミット・リリース作業が自動化されていきました。つまり、毎週サブミット・リリースをするためには、何をどのように自動化するべきかという視点で自動化する対象が決まっていきました。 アプリは開発が終わればすぐにリリースできるというものではありません。この記事では、リリース前のテスト作業をどのように調整して、毎週リリースを実現しているのかを説明していきます。自動サブミットの導入はiOSアプリが先行したため、ここではiO

前回はCI/CDに関する一般的な解説をしました。今回と次回でCI/CDの代表サービスの一つであるCircleCIを使って実際にCI/CDを設定する感覚を学んでもらいたいと思います。今回はCircleCIの設定方法の基礎から始めるので、記事の前半は比較的入門者向けの内容ですが、記事の後半では最新機能のVer. 2.1も紹介します。 これからCI/CDを導入する方にも、すでに活用されている方にも、CircleCIを通してCI/CDに対する理解を深めるお手伝いができれば幸いです。 前回の記事：「CI/CDのエキスパートが解説：CI/CDとは何か？ なぜ今、必要とされるのか？」 対象読者 前回の記事を読んでCI/CDに興味を持たれた方 CI/CDについて学びたい方 CircleCIを使ってみたい方 CircleCI Ver. 2.1について知りたい方 必要な環境／知識 GitHubのアカウント ソ

@rana_kualuさんの 2018年の最先端フロントエンドエンジニアになろう 2018年の最先端バックエンドエンジニアになろう という翻訳記事のDevOps版という感じですが、HackerNoonに投稿されたThe 2018 DevOps RoadMapという記事が個人的に大変参考になりましたので、翻訳してみました。 ちなみに関連記事として 2018年の最先端バックエンドエンジニアに必要なスキルについて考えてみました。 という私の記事もございますので、併せてご参照頂けますと幸いです。 はじめに DevOpsは最近非常にホットなトピックで、私の友人や同僚、シニア開発者のほとんどは、DevOpsエンジニアになるために非常に熱心に取り組んでおり、組織やチームの中で「DevOpsのチャンピオン」として自分自身をセルフプロデュースしていいます。 私自身は、ソフトウェア開発とデプロイプロセスの改善

はじめに はてなサマーインターン2018の大規模システム開発コースの成果報告をします。 今年は、メンターのid:cohalzさん、id:wtatsuruさんの下、実際に使われているサービスをAmazon ECS(Elastic Container Service)にデプロイする基盤を構築しました。 コンテナでサービスを本番運用するために、AutoScaleの検証や、デプロイ時間の計測、改善策の検証を行いました。また、開発、デプロイフローを楽にするために、AWS CodeBuild、CodePipelineを使ってCI/CDの構築も行いました。これにより、PullRequestごとにCIが走り、masterにマージされたら自動でECSにデプロイすることができるようになります。高速なデプロイ切り替えを行うために、Blue-Green Deploymentの検討も行いました。 他にも、Micro