direnvを使ってTerraformにAWSクレデンシャルを設定する

バージョン $direnv --version 2.21.2 $tf --version Terraform v0.13.2 方法 Terraformのホームディレクトリに下記の.envrcを追加する。 AWS_PROFILE="<PROFILE_NAME>" AWS_DEFAULT_REGION="ap-northeast-1" .gitignoreに.envrcを追加する。 .envrc これで対象のディレク</profile_name>…

未知のライブラリ、フレームワーク、サービスを使うときのキャッチアップ方法

概要 キャッチアップ方法 1. コンセプト、モチベーションを知る 検索方法 2.用語をざっくり知る 検索方法 3.動かす 検索方法 4.ベストプラクティスを調べる 検索方法 わからない事があったとき 前提 検索順番 例 1. コンセプト、モチベーションを知る 2.用語…

2021年1月時点Next.jsのGraceful Shutdown実装状況調査

概要 Next.jsをコンテナで動かすときにGraceful Shutdownが実装されているか気になった。 12月の調査時点ではcanaryだったが、すでにリリースされていた。 本当は「2020年12月時点Next.jsのGraceful Shutdown実装状況調査」だったが、 今の状況だと「Next.js…

変更に強いE2Eテストにするためにカスタムデータ属性を使う

E2E

概要 壊れやすいE2Eテストとは E2Eテストのテストシナリオを書くときに、下記のようなセレクタの使い方をすると壊れやすくなる。 CSSの変更やJSのイベントに紐づくセレクタ(id,classなど) 例:同じclass属性を持つ要素が増えたときにテストが通らなくなる。 …

Gitで削除された文字列のコミットとプルリクエストを調べる

Git

概要 Gitで削除された箇所のコミットとGitHub上のPRを調べる。 環境 $git version git version 2.26.0 結論 文字列からコミットを検索するには $git log -p -S '<検索したい文字列>' <対象のコード> #例 git log -p -S 'hoge' fuga.js GitHub上でコミットハ…

sedでcommand i expects \ followed by textが出た

環境 $sw_vers ProductName: Mac OS X ProductVersion: 10.14.6 BuildVersion: 18G95 概要 sedを実行したら下記エラーが出た $cat test.txt 1 2 3 #2行目にhogeを挿入 $cat test.txt | sed -e 2ihoge command i expects \ followed by text 原因 Mac(BSD)とL…

Reactで孫のイベントで親のステートを変更する(コンポジションとコンテクスト)

目的 環境 実装例 コンポジションとは 実装例 コンテクストとは 実装例 まとめ 目的 孫のイベントで親のステートを変更したい。 環境 Node.js v14.15.0 NPM v6.14.8 React v17.0.1 create-react-app v4.0.1 実装例 実装パターンを二通り試した。 コンポジシ…

ローカル開発環境でプロキシサーバを構築しHTTP headerを利用する

前提 環境 結論 詳細 app 動作確認 前提 Webアプリケーションサーバ+プロキシサーバ構成のアプリケーションを運用する Webアプリケーションサーバにアクセスする際、プロキシサーバがX-Forwarded-Hostを付与する X-Forwarded-Host - HTTP | MDN これらのロ…

Next.jsでhealth checkを実装する

概要 環境 結論 方法1 方法2 まとめ 概要 Next.jsでhealth checkを実装する。 k8s上で動かすという要件を想定する。 下記exampleを利用する。 https://github.com/vercel/next.js/tree/canary/examples/with-docker 環境 Next.js v10.0.1 Node.js v14.15.0 N…

Node.jsをDockerで動かすときのPID 1問題について動作確認する

概要 結論 確認 対応 tiniを利用する initオプションを利用する 参考 概要 Node.jsとDockerのPID1問題について動作確認する。 結論 Dockerでnodeプロセスを動かす場合 直接動かすときはtiniやdocker run --initオプションを使う npmを使って起動しない 確認 …

CodeDeployのhook時に実行環境を判別する

自分用メモ 概要 CodeDeployのhook時に、現在prdなのかstgなのか判別したい。 ユースケースとしてはアクセスするS3バケット名を変えたいときなど。 アプリケーションリポジトリは一つなのでhook scriptの中で分岐させる必要がある 。 やりかた 下記ドキュメ…

SPAアプリケーションのコンテナ化と設定値について

概要 問題点 結論 方法一覧 案1 デメリット 案2 デメリット 案3 案4 デメリット 案4.5 デメリット 概要 コンパイルされたJavaScriptのSPAアプリケーションがある。 これはDockerコンテナ上で動いている。 このアプリはdev,stg,prdなどの環境ごとに異なるAP…

Goの開発tips

自分用メモ。 依存関係はgo modで管理する。go mod tidyで使われてないパッケージを削除する。 Makefileでやること test,build,deploy,format,lint(golangci-lint),tool install ちょっとした動作確認するときはplay.golang.orgが便利https://play.golang.or…

ShellCheckでSC1090: Can't follow non-constant source. Use a directive to specify location.が出たときの対処法

概要 super linterをGitHub Actionsで使っていてShellCheckで下記エラーが出た。 SC1090: Can't follow non-constant source. Use a directive to specify location. super linterバージョン linter.yaml uses: docker://github/super-linter:v3 https://git…

Gitで WARNING: UNPROTECTED PRIVATE KEY FILE!が出たときの対処法

概要 git cloneしようとしたら下記のようなエラーが出る。 $git version git version 2.26.0 Cloning into 'hoge'... @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@…

機能組織について調べるために読んだ本まとめ

概要 まとめ 『エンジニアリング組織論への招待 ~不確実性に向き合う思考と組織のリファクタリング』 『ドラッカー名著集14 マネジメント[中]』 『マイクロサービスアーキテクチャ』 雑感 責任と権限について 職能別組織の必要性について 正解は組織ご…

DevOpsを推進するうえでチェックした資料まとめ

概要 『Effective DevOps』 AWS GCP Azure 『Release It!』 まとめ 概要 最近DevOpsを推進する活動をしていたので、チェックした資料をまとめる。 『Effective DevOps』 Effective DevOps ―4本柱による持続可能な組織文化の育て方作者:Jennifer Davis,Ryn Da…

Goのドット3つ

概要 Goを書いているときに見るドット3つについて公式ドキュメントのリンクをもとにコード例を示す。 配列 https://golang.org/ref/spec#Composite_literals The notation ... specifies an array length equal to the maximum element index plus one. とあ…

JavaScriptでマイク、カメラが使用されているか確認する

Webブラウザでマイクやカメラなどのデバイスが使用されていたらtrueを返す await navigator.mediaDevices.enumerateDevices().then(infos => [...infos].some(info=>info.label!=="")); マイクやカメラの許可状態を確認する await navigator.permissions .qu…

JavaScriptを使用してGoogle Chromeで開いているすべてのタブの情報を取得する

chrome extension APIを使って、開いているすべてのタブを取得する test.js chrome.tabs.query({}, function (tabs) { console.log(tabs); }); manifest.json { ... "permissions": [ "tabs" ], ... } 参考 https://developer.chrome.com/extensions/tabs

.envで定義した環境変数をDocker,docker-compseで使用する例

.envからdockerの実行環境に環境変数を渡す例 環境 go1.13.8 Docker version 19.03.8 ディレクトリ構成 Dockerfile docker-compose.yaml go.mod main.go .env .env2 main.go package main import ( "fmt" "os" ) func main() { fmt.Println("hello world") f…

ESLintで複数ファイル、複数フォルダをターゲットにする

結論 $eslint test1.js "testdir/**/*.ts" "testdir2/**/*.@(js|ts)" --parser-options=xxxx バージョン "eslint": "^6.8.0" ドキュメント https://eslint.org/docs/user-guide/command-line-interface eslint file1.js file2.js

docker-composeで実行環境の変数をコンテナに展開する方法

結論 https://docs.docker.com/compose/environment-variables/#pass-environment-variables-to-containers docker-compse.yamlのenvironmentに、実行環境の環境変数と同じキーをバリューなしで書く 環境 $docker --version Docker version 19.03.8, build a…

docker-composeのENVはbuild時に適用されない

まとめ 環境 検証 1の検証 ENVはbuild時に適用される ENVはコンテナ起動時に適用される 2の検証 ENVはbuild時に適用されない ENVはコンテナ起動時に展開される 参考 まとめ DockerfileのENVはbuild時もコンテナ起動時も適用される。 docker-compse.yamlのENV…

lighthouse-ciの使い方メモ

github.com lighthouseのCIインテグレーションツールがある。 https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/getting-started.md を読んだメモを残す 概要 前準備 結果の収集 アサーション GitHub Status Checks CI Serverの起動 GitHub …

Jestでwindow.location.hrefをmockしたいとき

環境 Jest: v24.8.0 モチベーション Jestでwindow.location.hrefをmockしたい。 結論 下記公式ドキュメントを参照。 https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom window.location.hrefのmock describe('moc…

レガシーをぶっつぶせ。現場でDDD!2nd 「インプット<アウトプット!」参加ログ

genbade-ddd.connpass.com 参加してきたので感想を書く オープニングトーク DX(デジタルトランスフォーメーション)についての話。 2025年以降の技術的負債の経済損失がが12兆円/年にのぼる。 comemo.nikkei.com つまり、レガシーなシステムを改善すること…

JSConf JP 2019 Day2参加記録

概要 時間はただの幻想である… JavaScriptにおいては まとめ WEB の自重 まとめ GraphQLを用いたECサイトにおけるパフォーマンス改善 まとめ 資料 マイクロフロントエンドについての話 JavaScriptのままでTypeScriptを始める まとめ 資料 Your Benchmark May…

JSConf JP 2019 Day1参加記録

概要 JAVASCRIPT AST プログラミング: 入門とその1歩先へ まとめ メモ 覚醒するアクセシビリティ まとめと感想 資料 JS開発者のためのSEOテクニック まとめと感想 資料 WEB ACCESSIBILITYのすゝめ まとめ 資料 予測的 PREFETCHING によるパフォーマンス改善 …

Mercari x Merpay Frontend Tech Talk vol.3参加記録

Practical tips for making a global EC site 特に気になった点 URL設計 SEO パフォーマンス i18n a11y 画像 発表のまとめ 感想 他のブログ https://mercari.connpass.com/event/153687/ 参加してきました。 一番の目的だった最後の発表に関してフォーカスし…