GAミント至上主義

Web Monomaniacal Developer.

Nuxt v3.0.0でnuxt generate時のメモリエラー FATAL ERROR: Reached heap limit Allocation failed

Nuxt v3.0.0のテスト用プロジェクトで、GitHub Actionsでデプロイさせるためにnuxt generateコマンドを実行したところメモリ不足のエラーが出た。 ローカル環境では問題なく成功するし、GitHub Actionsでも成功するときもあるのでメモリリーク的な印象。 メ…

Nuxt v3でcomposablesを使ってフラッシュメッセージをつくる

Nuxt v3はcomposablesにstateと処理をまとめると便利なので、よく使うフラッシュメッセージ(数秒表示されて勝手に消えるやつ)を作ってみました。 ソースコード github.com Nuxtのドキュメントでも使われてるStackblitzを試してみたけどこういうときに便利 …

リモートワークで節電しつつ冬を乗り切る作業服コーディネート

物価や電気代ガス代高騰という名目と、電熱ベストが欲しかった欲望が合致し、リモートワークを作業着の力で乗り切ることにしました。 買った商品や選定基準をメモ。商品リンクはいつも買ってるまいど屋と、YouTubeチャンネルでお世話になってるユニフォーム…

Nuxt (3.0.0 stable)でTypeScriptのstrict:trueを開発中とその他で切り替える

いよいよバージョン3.0.0 stableがリリースされたNuxtですが、 nuxt.com RC12までTypeScriptのcompilerOptionsのstrictがデフォルトfalseだったがRC13以降trueになりました。 詳細はこのリリースノート v3.0.0-rc.13 · Discussion #8687 · nuxt/framework · …

リモートワークWEB開発者が作業服に入門したメモ

仕事中も休日も作業服を着るようになり、普段から作業服通販サイト、メーカーのカタログを見まくるもはや作業服オタクになって、もうすぐ季節を一巡りするのでメモ。 これまで買ったやつ 写真を取ってて面倒になるなほど思ってたより買ってて自分でもびっく…

NestJSの型定義をNuxt3で使えるようにエクスポートする

フロント、サーバーともにTypeScriptのWEBアプリケーションにおいて、 NestJS側のEntityやDTO、GraphQLの型をNuxt3側で使えると非常に便利だったのでメモ。 システム全体像にとしてはこの記事参照 uyamazak.hatenablog.com いろいろ前提 レポジトリはNestJS…

新規サービスのNestJS + Nuxt3のFull TypeScript環境とセカンドシステム症候群について

2022/8/15にシニアジョブで新規サービスをリリースしました。忘れないうちに振り返りとかをメモ。 まだ想定してる3割ぐらいの機能しかできておらず、これからやること山積みですが、とりあえず動きはするのでWEBサービスのリリースとして許容範囲かなと。 シ…

Nuxt3 RC4にTailwind Elementsを導入する(RCなので暫定)

RCでまだまだ対応ライブラリの少ないNuxt3ですが、TailwindCSSのモジュール@nuxtjs/tailwindcssは 本体の開発者がメンテナンスしてくれているためか、RC以前から問題なく動いているので使用しています。今回アニメーション周りの動きなどが欲しくなったのでT…

CircleCI Orb + Cloud BuildでArtifact Registryにイメージをプッシュする際にタグにコミットハッシュを使う

CircleCIでCloud Runにデプロイする際、下記のOrbを使ったけどトリガー経由ではないので、コミットハッシュをCloud Build側で使うのがちょっとややこしかったのでメモ。 CircleCIから--substitutions を使って渡す必要がありました。CircleCI Developer Hub …

JavaScript (TypeScript) のMapをObjectに変換する

TypeScriptで素のObjectよりMapの方がTypeScriptと相性がよく使う機会が増えてきたけど、レスポンスに変換するときなどはObjectに変換する必要があったのでメモ。ぐぐったらreduceとか使う古いのが検索上位に出てきてしまうが、 Map.prototype.entries()をOb…

CircleCIからCloud Runにデプロイするときにハマった3つのエラー

CircleCIを使っていてCloud Runが必要になったので設定したけど、いくつかハマったのでメモ 前提 この公式Orbsを使用する。 CircleCI Developer Hub - circleci/gcp-cloud-run .circleci/config.ymlはこんな感じ。本番でなくステージング環境を作ってるので…

2021年振り返り

GitHub統計 シニアジョブのレポジトリには3,028回コミットしてた 出社回数 健康診断と新規採用の顔合わせで2回? ざっくり時系列 会社のメインのレポジトリは通年ちょこちょこやってたのでそれ以外 1−3月 会社が歌舞伎町に引っ越しで、NuxtJS + Google App…

TypeORMのEntityでGetterを使うのをやめてAfterLoadでセットするようにした

TypeORMを使っているプロジェクトで、よくやるEntityのfirstNameとlastNameをくっつけてfullnameを返す方法として、getterを使って実装していました。 getterはTypeScriptというかJavaScriptの標準機能なのでまあ良いかと思っていましたが、 TypeScript: Doc…

axiosでinterceptorsを使って毎リクエスト直前にヘッダーをセットする

Firebase AuthのidToken(JWT)を、サーバー側(NestJS)へのリクエストで使う場面で、 サーバーへのリクエスト時にAuthorizationヘッダーにaccess_tokenを付与する必要があった。 FirebaseのユーザーはNuxt3のuseStateで入れてuseFirebaseUserで使っているけ…

NestJSのテストで Firebase AuthenticationのGoogle認証を使用する

NestJSでユーザー認証にFirebase Authentication + Google認証を使うこととなり、なんとかテスト環境を構築したのメモ。 認証はセキュリティ的にも怖いので、これできなかったらつらいなぁというレベルだったけどできてよかった。 Firebase Local Emulatorを…

Firebase AuthエミュレータをCircleCIで動かすためにDockerイメージを作って公開した

NestJSを使ったプロジェクトで、認証だけFirebase Authenticationを使う。 そのためローカルのエミュレータ環境とそれを使った簡単なテストを作った。 ローカルで動かすとUIはこんなので超便利↓ CIではもちろんいらないので無効化してる でもCircleCI上でそ…

NestJSのTest.createTestingModuleの基本的な使い方。ServiceのMock化とかforRoot系の指定とか

NestJSの新規開発で、テストを有効活用しながら開発を進めてるけどTest.createTestingModuleでいろいろハマったのでポイントをメモ。 使い慣れてくると超便利。 今作ってるe2eテストの場合、createTestingModuleはこんな感じ。コメントでメモ。 beforeAll, …

TypeORMのcascade, orphanedRowAction等RelationOptionsの違い

TypeORMのEntityで使うRelation系のオプションがいろいろ紛らわしいのでメモ。 バージョン "typeorm": "^0.2.37" DBはMySQLを使用。 公式ドキュメントはここらへん typeorm/relations.md at master · typeorm/typeorm · GitHub Entityはこんな感じのサンプル…

NestJS + CircleCIで各種チェックやテストを一通り実行する

NestJS + TypeORMを使った新規開発で開発がちょっと進み、テストコマンドなどもできてきたのでCircleCIで自動実行できるようにしたのでメモ。前提としてローカルではテストなどが動いていること。 実行したのは下記。まだデプロイなどは行っていない。 lint…

NestJS + TypeORMでテスト時のRepository依存エラーをちゃんとする

昨日、思考停止の力技でなんとかしまってたけど、TypeOrmModule.forRootAsyncでテスト用の接続環境を渡し、TypeOrmModule.forFeatureをしっかりやればシンプルな設定で動いたのでメモ。NestJS + TypeORM でテスト時のRepository依存エラーを力技でなんとかす…

NestJSでテスト用DB接続を使ったテスト実行時のNest could not find testConnection element エラーの対処

NestJS + TypeORMの環境で、e2eテスト実行時に、テスト用接続情報を下記のように使用したところエラーが出た。 ググっても記事出てこないのでメモ。app.e2e-spec.ts ``` import { getConnectionOptions } from 'typeorm'//省略 describe('UsersController (e…

NestJS + TypeORM でテスト時のRepository依存エラーを力技でなんとかする

2021/9/30 ちゃんと解決できたのでこちらの記事参照 uyamazak.hatenablog.com 以下、特に役に立つことはなさそうNestJS + TypeORMでJestのテスト時、@InjectRepositoryを使った部分の依存関係がなかなか解決できなかった。 そのため@InjectRepositoryに頼ら…

業種特化のシニア求人サイトをNuxtJS + SSR(mode: universal)でつくった

今回作ったサイトシニアジョブ会計事務所 accountant.senior-job.co.jp会社で出したプレスリリースはこちら既存の求人ポータルから、会計事務所系のお仕事に特化させたサイトです。専門用語でいうとサテライトサイトですね。会計事務所、税理士事務所向けの…

(解決)NuxtJS + Composition APIでsetup()内でerror() 使うとDOMException: Failed to execute 'appendChild' on 'Node'

2021/9/7追記 エラーの原因は、@nuxtjs/composition-apiではなく、error.vueの描画時の問題だったので、error.vueの内容をclient-onlyで囲むことで解決しました! @nuxtjs/composition-apiは悪くありませんでした。 ずっと放置してたけど他のメンバーに見て…

NuxtJS + Composition APIのuseAsync()でハマった3つ

新しいサイトの開発でNuxtJS + Composition API + TypeScriptで快適な開発をしてますがuseAsyncは、サーバー、クライアント両方で実行することもあり、理解にちょっと時間がかかっていろいろハマったのでメモ。基本的にちゃんとドキュメント通りに使えば大丈…

NuxtJSでaxiosのリクエストをキャンセルする

NuxtJSでSSR + SPAでコンテンツをaxiosで取得するよくあるページを作っていたら、リンクを連打するとこんな感じになった。 言葉で説明するの大変なのでブログ用にTwitterに動画あげた。NuxtJSなどのSPA + Ajaxでコンテンツを非同期取得してるやつで、ページ…

CircleCIでAWS ECSのScheduled Taskのタスク定義を最新のリビジョンに更新する

AWSのECSを使った環境構築、↓この記事からの続きで、 uyamazak.hatenablog.com Laravelの php artisan schedule:runを実行するためにタスクのスケジューリングを使ってみることに。新規作成はコンソール上でなんなくできたものの、CircleCIからの更新方法が…

AWS初心者がElastic Beanstalk環境をFargate化したメモ

優先度が高い仕事が落ち着いてきたため、ずっとやりたかった本番環境コンテナ化に着手しました。たぶんお休みで全部忘れるので社内に説明用も兼ねてメモ。下記の記事のように現在のシニアジョブに入社してすぐ、開発環境はDocker化していました。シニアジョ…

自作パッケージをnpmに公開&GitHub Actionsで自動化する

趣味で開発しているPuppeteerを使ったPDFサーバーhc-pdf-serverで一部分をnpmにパッケージとして公開しています。これ↓ www.npmjs.com FastifyからPuppeteerを通して、Headless ChromeのPageを使用できるプラグインです。 名前の通り速いFastifyの長所を殺す…

Google Apps ScriptとNuxtJSで簡易来客受付システムをつくったら実質サーバーコスト無料だった

シニアジョブのオフィスの引越にあたり、セキュリティの面からも来客の記録システムが必要になりました。最初すでにいろんな会社が作ってると思ったので、それ使えばいいじゃんと思いましたが、仕様を聞くとたしかに超簡易的なものなのでまあいいかというこ…