CloudFrontで簡単なフロントエンド環境を構築するテンプレートを作った

CloudFront と S3 を使った簡単な静的サイトを作るときの CloudFormation のテンプレートを作った github.com 構成は S3 においた index.html を CloudFront でキャッシュするだけの構成です。 CloudFront に設定出来る SSL 証明書は 米国東部 (バージニア北…

VSCode で手動で vue-i18n-ally の設定を書くメモ

Vue.js で i18n の設定をしていると実際の日本語が何かぱっと見でわからないです。 VSCode を使っている場合、プラグインの vue-i18n-ally を入れることで日本語が見れる様になって便利でした。 github.com 手動で設定を書かないとうまく動かせなかったので…

Nuxt 2.8 から 2.9 へのマイグレーションメモ

Nuxt TypeScript というページができていました。 Nuxt 2.8 から 2.9 のマイグレーション手順が書いてあるのですがメモを残します。 typescript.nuxtjs.org 元環境 Nuxt 2.8 TypeScript (nuxt.config.ts) を使用している環境 きちんと読めば問題無いのですが…

EmbulkでMySQLからBigQueryへデータを転送するときの注意点

Embulk を使って MySQL から BigQuery へデータを転送するときにはまった部分を忘れないように記録として残しておく github.com DBの設定などで一度に大量のデータを取得することが難しい場合などに fetch_rows で1度に処理するデータ量を調整することが必要…

HTMLメールの注意点(Gmail)

システムで Gmail へ HTML メールを送る際の注意点になります。 Yahooなど他のサービスでの動作については確認していません。 例えばですが、PCではフォントサイズ 16px SP ではフォントサイズ 20px みたいな要件のとき .font { font-size: 16px; } @media o…

AWS CloudFormation で ECR のライフサイクルを設定する

AWS

AWS ECR を使ってコンテナを更新していくと知らないうちにイメージが貯まっていきます。 Lifecycle Policy を設定すれば、古いイメージを自動で削除できます。 CloudFormation で設定する方法を見ると、 LifecyclePolicyText に String で設定すれば、 ECR …

AWS Lambda のトリガーで CloudWatch の定数(JSONテキスト)を使った場合の起動方法

AWS Lambda が .Net Core をサポートしたと言うけど実際に書くときに引数ってどうするんだろうって思ったので調べてみた。 Lambda のトリガーには CloudWatch を指定できて、 CloudWatch のイベントからルールを設定することでバッチ処理のようなことをさせ…

CircleCI 2.0 で AWS CodeDeploy を使う

AWS

まず、 CircleCI 1.0 で CodeDeploy を使っているという前提で話を進めます。 そのため、デプロイ先のインスタンスへの CodeDeploy エージェントインストールなどについては触れません。 先に示すこれは失敗する例です。 成功する例はこの記事の一番最後に書…

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

GitHubで二段階認証をすると、 http 通信ではなく、 ssh 通信を使う必要があります。 ssh 通信を使用すると、 CLIなどで pull や push などの操作をしたときに秘密鍵のパスワードを聞かれます。 Enter passphrase for key '/path/to/id_rsa': このパスフレー…

VSCodeのExtensionを端末間で共有する方法

VSCodeでインストールしたExtensionを端末間で共有したり、PCを新しく買ったときにどうやって同じ設定にしようか悩んでました。 どうやら Settings Sync を使うことで簡単に Gist で管理できるみたいです。 marketplace.visualstudio.com

AWS CloudFormationで名前に - が使えなくて困ったこと

AWS

AWSの環境ではWAF など、名前に - が使えない物があります。 CloudFormationからWAFの設定をしようとした時に少し困ったのでメモを残しておきます。 何に困ったのか? CloudFormationのテンプレートで、Parametersから入ってくる変数の値に - が入っていると…

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

AWS

CloudFront + S3 の構成で静的なWebページを公開したいが、Basic認証を付けたいということがあります。 Lambdaを使うと上記問題は解決できるのですが、Lambdaの設定にいくつか制約があったのでメモとして残しておきます。 ビューワーリクエストの場合はLambd…

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

AWS

AWSでインフラを構築する際は極力Cloud​Formationを使うようにしています。 ですが、Route53の設定はCloud​Formationの設定を使いませんでした。 Route53は最低1つはAレコードを登録しなければいけません。 ですが、CloudFormationの設定からではAレコードに…

create-react-appでTypeScript環境を構築したときにsourcemapを出力しない方法

Reactのテンプレートを作る方法にcreate-react-appがあります。 github.com これを使うとcreate-react-appコマンドで簡単にテンプレートを作って、初期設定されているnpm scriptsでサーバー起動やビルドといったことが簡単にできるようになっています。 Reac…

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) => th</a>…

AWSで最初からCloudFormationでインフラを管理する方法を考えてみる

AWS

AWSで最初からCloudFormationを使ってインフラを管理していく方法について考えてみました。 個人でサービスを作ろうと思い、あまりお金もかけたくなかったのでサービス選定は 項 サービス名 クラウドサービス AWS ソースコード管理 Bitbucket CI/CD CircleCI…

CircleCI2.0でawscliを使いたいのでDockerイメージを作ってみた

AWS

CircleCI2.0で awscli を使いたいと思ったとき、毎回 .circleci/config.yml で awscli のインストールコマンドを書くのも面倒に感じます。 dockerhubを使うと特定のイメージの更新をトリガーにして、自分のイメージも更新することができます。 Dockerイメー…

phpでlocalstackのs3にファイルをアップロード

AWS

AWS周りのものをローカルで開発する場合 localstack を使うと便利だというのを聞いたので試してみました。 github.com localstackは、GUIはあまり提供されていない用で、主にawscliコマンドを使います。 s3にファイルをアップロードしたい場合は、 --endpoin…

docker exec で cd する方法

dockerを使っていて、普段は↓のコマンドでコンテナ内に入って作業してます。 $ docker exec -it {container-name} /bin/bash 最近はコンテナ内でお決まりの作業(特定のディレクトリに移動してコマンド実行など)をしたいときに $ docker exec -i {container…

ISUCON7予選に参加しました

id:Maco_Tasu に、ISUCONに一緒に出ませんかと誘ってもらえたのでいい機会だしと思い参加しました。 LabALICEというチームで、メンバーはid:Maco_Tasu, id:karia です。 macotasu.hatenablog.jp karia.hatenablog.jp 全員のスコアと順位を出して頂けて運営の…

javascriptのスプレッド演算子(...)

javascriptで関数を呼び出すところで、引数に ... と書いているソースコードを見かけるがこれが何か調べてみた。 ES2015から追加された、スプレッド演算子というらしい。 参考 「…」←これ、ただの省略記号かと思ってました。(Spread operatorのお話)|もっ…

TypeScript2からのReactとnon-null assertion

TypeScript2からコンパイルオプションの strictNullChecks で、nullability をチェックできるようになった。 最近になってこのオプションを有効にしたら意外と修正するところが多かったのでメモ。 TypeScript1系の時は↓の様に書いてました。 import * as Rea…

go言語をインストールしてvimで保存時にコードフォーマットを走らせるまでの設定

Macの環境でgo言語をインストールして、vimでソースコード保存時に自動でコードフォーマットが走るまでの環境設定です。 普段はIDEを使うので、vimでファイル保存時に go fmt を実行させる設定に手間取ってしまったのでメモしておきます。 ※ vim のプラグイ…

AWS CloudFormationでECSを管理するときにハマったこと

CloudFormationでECSを構築したときにハマったメモです。 CloudFormationのテンプレートを書いて AWS::ECS::Cluster AWS::ECS::Service AWS::ECS::TaskDefinition あたりの設定をして、構築しました。 動作確認ができたので、AWS::ECS::Service の設定を更新…

nodeのバージョン管理にnaveを使おうと思ったら上手くいかなかったのでメモ

basherからnaveをインストールしたあと、 $ nave use latest を実行したところ、nodeのインストールに失敗した。 $ nave cache clear したら直った 環境 AWS EC2 OS Debian Jessie AMI ami-dbc0bcbc 問題が発生した手順 basherインストール naveインストール…

MacにVisualStudio for Mac を入れてみたけど、dotnet coreが動かなかった

Macに VisualStudio for Mac を入れて、プロジェクトの作成から Console Application を選びました。 プロジェクトは作成されたのですが、リストア・ビルドが成功しませんでした。 $ which dotnet dotnet not found となり、どうやらdotnetコマンドが使えま…

AWS CloudFormationでインフラを構築するときに CAPABILITY_NAMED_IAM というエラーが出た

AWS

AWS CodePipeline + CloudFormation でインフラをソースコードで管理しようと思い、cfn-ci-cd-demo というRepositoryをベースにいろいろ試してみました。 github.com IAM Role を作るときに、 Requires capabilities : [CAPABILITY_NAMED_IAM] というエラー…

esaの任意ページを素早く表示するesajump公開しました。

Chrome Extensionで esajump というものを公開しました。 chrome.google.com esajumpはドキュメント共有ツールにesaで、任意の番号のページを素早く表示することを目的としています。 esa.io たまに、口頭で「esaの何番です」といった形で共有されるケースが…

AWSのCloudFormationでs3バケット名変更

AWS

CloudFormationからs3バケット名を変更しようとした時の注意メモ CloudFormationのテンプレートでs3を構築/管理しているときにバケット名を変更しようとします。 変更時の動作は 新しく名前のバケットを作成する 古い名前のバケットを削除する の流れのよう…

windows10 + docker for windows + intellij idea

windows環境のintelliJ IDEAでdocker integrationを使おうとしたときに、接続できなかった。 docker for windows 側の設定を直すことで解決できたのでメモしておく。 前提条件 intellijのdocker integrationプラグインを追加 解決方法 docker for windows の…