GitHubで二段階認証を有効にしたときに聞かれるパスワード認証の回避方法

GitHubで二段階認証をすると、 http 通信ではなく、 ssh 通信を使う必要があります。
ssh 通信を使用すると、 CLIなどで pullpush などの操作をしたときに秘密鍵のパスワードを聞かれます。

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 で管理できるみたいです。

marketplace.visualstudio.com

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::RuleName には - が使えないので、ココでエラーが出てしまいます。

Stage は、環境を表していて、 prod stg dev などの文字が入ってきます。

- を消す方法(テンプレートの変換の流れ)

どうにか - を消せないかとイロイロ試したところ↓の方法で - を消すことができました。

      Name:
        !Join
          - ''
          - - !Join
                - ''
                - !Split
                    - '-'
                    - !Ref ProductName
            - !Ref Stage

!Ref のところを展開します。

      Name:
        !Join
          - ''
          - - !Join
                - ''
                - !Split
                    - '-'
                    - hoge-mock
            - prod

!Splithoge-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

Fn::Join - AWS CloudFormation

Fn::Split - AWS CloudFormation

AWS Lambda@Edgeの設定でハマった話

CloudFront + S3 の構成で静的なWebページを公開したいが、Basic認証を付けたいということがあります。

Lambdaを使うと上記問題は解決できるのですが、Lambdaの設定にいくつか制約があったのでメモとして残しておきます。

  • ビューワーリクエストの場合はLambdaのタイムアウト時間を1秒にしなければいけない
  • バージョニングを使用する必要あり、$Latest は指定できない
  • 環境変数は利用できない

参考URL

AWS Lambda@Edge - AWS Lambda

Amazon CloudFrontとAWS Lambda@EdgeでSPAのBasic認証をやってみる | Developers.IO

Route53の設定だけは手動でした話

AWSでインフラを構築する際は極力Cloud​Formationを使うようにしています。
ですが、Route53の設定はCloud​Formationの設定を使いませんでした。

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があります。

github.com

これを使うと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';

参照:create-react-app-typescript/webpack.config.prod.js at master · wmonk/create-react-app-typescript · GitHub

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