GAミント至上主義

Web Monomaniacal Developer.

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で簡易来客受付システムをつくったら実質サーバーコスト無料だった

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

Laravelの操作ログをGCPのDataflowテンプレートを使ってBigQueryに記録する

経緯 シニアジョブの人材管理システムで、もしもの時のセキュリティのために、すべての操作ログを記録することにしました。 Dataflowのテンプレートを使うことでちょっとのコードでできてしまったので、コードにならない部分の記録をするため雑にメモ。 記事…

Cloud BuildでApp EngineにデプロイしようとしたらPERMISSION_DENIED

NuxtJSで使った社内用アプリをCloud BuildでApp Engineに自動デプロイしようとしたら2時間くらいハマったのでメモ。GitHub Actionsもいいけど、やっぱGCP内で完結させたいなぁということでCloud Build使いました。GitHub Actionsと比べるとユーザーと情報が…

Google Apps ScriptからChartworkに投稿する

社内システムで最初、JavaScriptでブラウザからAPI叩こうとしたら、おそらくChatwork API側がPreflight requestに対応してないのが原因でCORSエラーが出て送れない・・・。 そのためGASのウェブアプリ側で送るようにしました。developer.mozilla.org UrlFetc…

Google Apps Scriptのウェブアプリでaxiosでリクエストする時にハマったメモ

シニアジョブで簡単な来客記録システムを作りあたり、Google Workspaceを使っているので、 NuxtJSでUI作って、Google スプレッドシートとGASでいけるんじゃね? と思ってやってみたら、ちょっとハマったものの出来たのでメモ。 ※画面は開発中のものです(圧…

Puppeteer v7.1.0でViewportの型エラーが解消しないので調査したログ

結論 mainに入ってるけどまだリリースされてないだけだった。 リリースちゃんと読もう。 TypeScriptでPuppeteerガンガン使いましょう。 経緯 Puppeteerはv6でTypeScriptの型がビルドインになり、@types/puppeteerが必要なくなりました・・・だと良かったんで…

あなたの欲しかった小数点以下"切り捨て"はMath.floorではなくMath.truncかもしれない

「JavaScript 小数点切り捨て」で検索するとMath.floor()とparseInt()使う記事が出てきてよろしくないと思ったのでメモ。 結論 小数点以下を削除したいのならMath.trunc()使え。負の時は思ってたのと違うかも。 小数点以下切り下げならMath.floor() 正の値の…

GitHub ActionsでDockerイメージのビルド結果だけを確認するActionを作る

このhc-pdf-serverのレポジトリで、ユニットテストの他に、Dockerイメージのビルドが成功するかどうかを確認したかった。 以前ファイル名などを変えた際に、テストは通るがdocker buildできない状況が発生していて気づけなかったことがある。 github.com普通…

Puppeteer + TypeScriptでWEBサイトをスクレイピングしたメモ

業務でとある業界のいわゆるアタックリストが必要になり、複数のサイトをスクレイピングしてCSVにしました。スクレイピング処理には、WEBブラウザ(Chrome or Chromium)を操るPuppeteerを使いました。https://pptr.dev/その過程で得たことをメモ。 スクレイピ…