GitHubで二段階認証を有効にしたときに聞かれるパスワード認証の回避方法
GitHubで二段階認証をすると、 http 通信ではなく、 ssh 通信を使う必要があります。
ssh 通信を使用すると、 CLIなどで pull や push などの操作をしたときに秘密鍵のパスワードを聞かれます。
Enter passphrase for key '/path/to/id_rsa':
このパスフレーズを回避する方法のメモです。
いくつか方法があるようです。
全部実施する必要はなくて、どれか一つをすれば大丈夫です。
ssh-add -K {秘密鍵}
CLIで↓のコマンドを入力してPCを再起動するまでの間、秘密鍵のパスワード入力を省略する。
ssh-add -K {秘密鍵}
.netrc を作成する
ユーザーのルートディレクトリに .netrc ファイルを作成する。
.netrc には以下の内容を記述する。
machine github.com
login {username}
password {password}
リポジトリのクローン時にトークンを追加する
GitHubの Settings から Personal access tokens でトークンを生成してリポジトリのURLにtokenを追加する。
https://github.com/settings/tokens
https://{username}:{token}@github.com/{username}/{repository}.git
秘密鍵からパスフレーズを消す
VSCodeのExtensionを端末間で共有する方法
VSCodeでインストールしたExtensionを端末間で共有したり、PCを新しく買ったときにどうやって同じ設定にしようか悩んでました。
どうやら Settings Sync を使うことで簡単に Gist で管理できるみたいです。
AWS CloudFormationで名前に - が使えなくて困ったこと
AWSの環境ではWAF など、名前に - が使えない物があります。
CloudFormationからWAFの設定をしようとした時に少し困ったのでメモを残しておきます。
何に困ったのか？
CloudFormationのテンプレートで、Parametersから入ってくる変数の値に - が入っていると Name を設定するときにエラーになってしまう。
最初に作成したテンプレートは↓です。
AWSTemplateFormatVersion: '2010-09-09' Description: WAF CI/CD Pipeline Parameters: ProductName: Type: String Stage: Type: String Default: prod Metadata: AWS::CloudFormation::Interface: ParameterGroups: - Label: default: Product Configuration Parameters: - ProductName - Stage ParameterLabels: ProductName: default: ProductName Stage: default: Stage Resources: WAF: Type: AWS::WAF::WebACL Properties: Name: !Sub ${ProductName}${Stage} MetricName: !Sub ${ProductName}${Stage} DefaultAction: Type: BLOCK Rules: - Action: Type: ALLOW Priority: 1 RuleId: !Ref WAFRule WAFRule: Type: AWS::WAF::Rule Properties: Name: !Sub ${ProductName}MyIp${Stage} MetricName: !Sub ${ProductName}MyIp${Stage} Predicates: - DataId: !Ref WAFIPSet Negated: false Type: IPMatch WAFIPSet: Type: AWS::WAF::IPSet Properties: Name: !Sub ${ProductName}-my-ipset-${Stage} IPSetDescriptors: - Type: IPV4 Value: {IPアドレス}/32
モックアプリを作っていたので、 ProductName には hoge-mock という感じで - 付きにしていました。
AWS::WAF::WebACL AWS::WAF::Rule の Name には - が使えないので、ココでエラーが出てしまいます。
※ Stage は、環境を表していて、 prod stg dev などの文字が入ってきます。
- を消す方法（テンプレートの変換の流れ）
どうにか - を消せないかとイロイロ試したところ↓の方法で - を消すことができました。
Name: !Join - '' - - !Join - '' - !Split - '-' - !Ref ProductName - !Ref Stage
!Ref のところを展開します。
Name: !Join - '' - - !Join - '' - !Split - '-' - hoge-mock - prod
!Split で hoge-mock を、 - で分割した配列に変えます。
Name: !Join - '' - - !Join - '' - - hoge - mock - prod
!Join で [hoge, mock] を、文字列に変換します。
Name: !Join - '' - - hogemock - prod
!Join で [hogemock, prod] を、文字列に変換します。
Name: hogemockprod
こういう変換の流れで、 - を消すことができました。
完成形
AWSTemplateFormatVersion: '2010-09-09' Description: WAF CI/CD Pipeline Parameters: ProductName: Type: String Stage: Type: String Default: prod Metadata: AWS::CloudFormation::Interface: ParameterGroups: - Label: default: Product Configuration Parameters: - ProductName - Stage ParameterLabels: ProductName: default: ProductName Stage: default: Stage Resources: WAF: Type: AWS::WAF::WebACL Properties: Name: !Join - '' - - !Join - '' - !Split - '-' - !Ref ProductName - !Ref Stage MetricName: !Join - '' - - !Join - '' - !Split - '-' - !Ref ProductName - !Ref Stage DefaultAction: Type: BLOCK Rules: - Action: Type: ALLOW Priority: 1 RuleId: !Ref WAFRule WAFRule: Type: AWS::WAF::Rule Properties: Name: !Join - '' - - !Join - '' - !Split - '-' - !Ref ProductName - MyIp - !Ref Stage MetricName: !Join - '' - - !Join - '' - !Split - '-' - !Ref ProductName - MyIp - !Ref Stage Predicates: - DataId: !Ref WAFIPSet Negated: false Type: IPMatch WAFIPSet: Type: AWS::WAF::IPSet Properties: Name: !Sub ${ProductName}-my-ipset-${Stage} IPSetDescriptors: - Type: IPV4 Value: {IPアドレス}/32
参考URL
AWS Lambda@Edgeの設定でハマった話
CloudFront + S3 の構成で静的なWebページを公開したいが、Basic認証を付けたいということがあります。
Lambdaを使うと上記問題は解決できるのですが、Lambdaの設定にいくつか制約があったのでメモとして残しておきます。
参考URL
Amazon CloudFrontとAWS Lambda@EdgeでSPAのBasic認証をやってみる ｜ Developers.IO
Route53の設定だけは手動でした話
AWSでインフラを構築する際は極力CloudFormationを使うようにしています。
ですが、Route53の設定はCloudFormationの設定を使いませんでした。
Route53は最低1つはAレコードを登録しなければいけません。
ですが、CloudFormationの設定からではAレコードにCloudFrontのURLを設定できなかったからです。
※ AWSコンソールから手動で設定する分にはAレコードにCloudFrontのURLを設定できます。
DNS:
Type: AWS::Route53::HostedZone
Properties:
Name: 'ドメイン名'
Route53RecodeSet:
Type: AWS::Route53::RecordSet
Properties:
Comment: HP Hoge
HostedZoneId: !Ref DNS
Name: www.hoge.com.
ResourceRecords:
- '設定したいCloudFrontのURL'
TTL: '300'
Type: A
Route53のレコードセットでCloudFrontのURLをAレコードに設定しようとすると
Invalid Resource Record: FATAL problem: ARRDATAIllegalIPv4Address (Value is not a valid IPv4 address) encountered with '設定したいCloudFrontのURL'
というエラーが出て設定できないためでした。
create-react-appでTypeScript環境を構築したときにsourcemapを出力しない方法
Reactのテンプレートを作る方法にcreate-react-appがあります。
これを使うとcreate-react-appコマンドで簡単にテンプレートを作って、初期設定されているnpm scriptsでサーバー起動やビルドといったことが簡単にできるようになっています。
React+TypeScriptの環境を構築したい場合はどうするのかというとプロジェクト作成時のオプションで--scripts-version=react-scripts-tsを指定することでTypeScriptの環境を構築することができます。
github.com
プロジェクトのビルドをするために、初期で用意されているnpm scriptsを実行します。
$ yarn build
buildディレクトリ以下に成果物が作成されます。
jsディレクトリ配下を見るとsourcemapも作成されています。
開発中は便利なのですが、本番環境にデプロイするときはsourcemapは作成しなくていいので、作成しないためにはどうするのか調べてみました。
webpack.config.prod.js にてsourcemapの出力を制御するために、nodeの環境変数を読み込んでいる部分がありました。
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
package.jsonのscriptsでビルド実行時に環境変数を渡してあげることでsourcemapを出力せずにビルドすることができました。
npm scriptsを修正すると↓の用になると思います。
"build": "GENERATE_SOURCEMAP=false react-scripts-ts build"
Reactでシングルクリックとダブルクリックを区別して使いたい
先に今回の話のソースコードです。 github.com
Reactでは シングルクリックイベントとダブルクリックイベントが用意されています。
シングルクリック
<a href="javascript:void(0)" onClick={(e) => this.handleOnSingleClick(e)}> Single Click </a>
onClickイベントが用意されています。
ダブルクリック
<a href="javascript:void(0)" onDoubleClick={(e) => this.handleOnDoubleClick(e)}> Double Click </a>
onDoubleClickイベントが用意されています。
※ mobile safari だと動きませんでした。
それぞれを別々に使う分には期待した通りに動作します。
問題はSingleClickとDoubleClickを両方設定したときです。
<a href="javascript:void(0)" onClick={(e) => this.handleOnSingleClick(e)} onDoubleClick={(e) => this.handleOnDoubleClick(e)}> Single Click and Double Click </a>
こんな形で実装して、ダブルクリックしてみると、onClickイベントが2回とonDoubleClickイベントが1回発火します。
シングルクリックのときは onClickイベントだけ、ダブルクリックの時はonDoubleClickイベントだけと区別して使いたいことがあります。
そういったときどうするのかという話です。
ソースコードはTypescriptで書いてます。
import * as React from 'react'; interface IAppProps { } interface IAppState { } export class App extends React.Component<IAppProps, IAppState> { private clickCount: number; constructor(props: IAppProps) { super(props); this.clickCount = 0; this.state= {}; } /** * Single or Double Click */ handleOnSingleOrDoubleClick = (e: React.MouseEvent<HTMLAnchorElement>) => { this.clickCount++; if (this.clickCount < 2) { setTimeout(() => { if (this.clickCount > 1) { console.log('Double Click'); } else { console.log('Single Click'); } this.clickCount = 0; }, 200); } } render() { return ( <div> <a href="javascript:void(0)" onClick={(e) => this.handleOnSingleOrDoubleClick(e)}> Single Click or Double Click </a> </div> ); } }
の様に書くとシングルクリックとダブルクリックを区別することができます。
キモになるのはこの部分で、onClickイベントのみを使います。
/** * Single or Double Click */ handleOnSingleOrDoubleClick = (e: React.MouseEvent<HTMLAnchorElement>) => { this.clickCount++; if (this.clickCount < 2) { setTimeout(() => { if (this.clickCount > 1) { console.log('Double Click'); } else { console.log('Single Click'); } this.clickCount = 0; }, 200); } }
クリックイベント時に、クリック数をインクリメントして、setTimeoutで後からクリック後の動作を実行してあげることでシングルクリックとダブルクリックを別々に認識させることができます。
クリックして動作が見れるページを作ってみたので、興味がある人はクリックしてみて下さい。 React doubleclick sample
