Tech note

備忘録

Amazon RDSについて

AWS

概要 Aurora Standard 読み取りと書き込みのI/O操作に対する追加料金が発生する構成 I/Oの頻度が低い場合(I/O料金がAuroraの利用料の25%未満の場合)に採用 I/O最適化 読み取りと書き込みのI/O操作に対する追加料金が発生しない構成 I/Oの頻度が高い場合(I/O…

Amazon Redshiftについて

AWS

ノードタイプについて ノードタイプ 概要 DC2インスタンス 各コンピューティングノードが個別のSSDストレージを持つタイプ。データ処理の独立性が高まりさらなるパフォーマンス向上につながる。 DS2インスタンス 各コンピューティングノードが個別のHDDスト…

AWS ソリューション「AWS でのワークロード検出」について

AWS

概要 AWSが用意しているCloudFormationのテンプレートを元に以下構成のWEBサイトを構築することで、現状のAWSの構成が確認出来るようになる。 料金 ※バージニア北部リージョンで単一構成の場合 構築手順 ワークロード検出のページから「AWSコンソールで起動…

GCE内のログファイルを監視してアラート通知をする方法

概要 以下の流れでアラート通知を行う GCE内のログファイルをCloud Loggingに送信する。 Cloud Monitoringで監視して特定の文字列を検出したらアラート通知をする。 設定手順 GCE側で設定すること こちらに従って、Ops エージェントを導入する。 Ops エージ…

IN句に複数カラム指定するSQLをActive Recordで表現する方法

概要 Ruby on RailsのActive Recordで、IN句に複数カラム指定するSQLを表現する方法。 SQL例 SELECT * FROM test_table WHERE (test_col1, test_col2) IN (('test1', 'test2'), ('test3', 'test4')); Active Recordで表現する方法 test_arrays = [ ['test1',…

AWS Amplify CLIでAppSync環境を操作する際の備忘録

AWS

amplify push時の質問によって修正されるファイル 質問 Do you want to update code for your updated GraphQL API? Do you want to generate GraphQL statements (queries, mutations and subscription) based on your schema type? 1と2両方Yesを選択した…

AWS AppSync + DynamoDB構成で、データを取得する際の注意点

AWS

概要 AWS AppSync + DynamoDB構成で、Filterを使用してデータを取得する際の注意点。 注意点 前提 DynamoDBの1 回のScanリクエストで、取得出来る最大サイズは1 MBのデータ。DynamoDB でのスキャンの操作 - Amazon DynamoDB AppSync(GraphQL)のFilterで取得…

AWS API Gateway + Lambda構成のペイロード制限について

AWS

概要 AWS API Gateway + Lambda構成のペイロード制限での注意点。 注意点 前提 API Gatewayのペイロードサイズ上限は、10MB。Amazon API Gateway のクォータと重要な注意点 - Amazon API Gateway Lambdaのペイロードサイズ上限は、6MB。Lambda クォータ - AW…

Jestでaxiosの処理をモック化する

概要 Jestでaxiosの処理をモック化する方法。 モック化の方法 テスト対象の関数(axiosGetTest, axiosPostTestData) <template> <div> <div>{{ axiosGetTestData }}</div> <div>{{ axiosPostTestData }}</div> </div> </template> <script lang="ts"> import { Component, Vue } from 'nuxt-property-decorator'; @Component({}) export…

JestでVuexの処理をモック化する

概要 JestでVuexの処理をモック化する方法。 モック化の方法 テスト対象の関数(vuexTest) <template> <div> <div>{{ vuexTestData }}</div> </div> </template> <script lang="ts"> import { Component, Vue } from 'nuxt-property-decorator'; import { clientStore } from '~/store'; @Component({}) export default clas…

Jestでマウントせずに関数のテストをする

概要 Jestでマウントせずに、関数のみ実行してテストする方法。 方法 基本形 import 任意の名前1 "@/pages/ファイル名"; describe("任意の名前2", () => { it("任意の名前3", () => { const thisVal = {}; 任意の名前1.options.methods.テスト対象の関数名.c…

AWS AppSyncで、mutationの通信内容を見る方法

AWS

概要 AWS AppSyncのmutation(データ登録など)の通信内容をChromeのデベロッパーツール(F12)を利用することで、どのようなデータを登録したかを確認することが出来る。 通信内容を見る方法 Chromeのデベロッパーツール(F12)のNetworkタブを開いた状態で、muta…

Nuxtでinjectを利用して関数を共通化する

概要 injectを利用すると関数を共通化することが出来る。 環境 名称 Version Node 14.10.1 Nuxt 2.14.5 Vue 2.6.12 TypeScript 3.9.7 Vuetify 2.3.10 nuxt-property-decorator 2.8.8 injectの利用方法 共通化する関数を作成する ~/plugins/utils.ts import {…

Nuxt + TypeScriptで、Vuexを永続化する

概要 Vuexのデータは、永続化対応をしないとページ更新などをするとデータがなくなってしまう。そのため、「vuex-persistedstate」を使用して永続化の対応をする。 Nuxt + TypeScriptで、Vuexを扱う方法はこちら 環境 名称 Version Node 14.10.1 Nuxt 2.14.5…

Nuxt + TypeScriptで、Vuexを扱う

概要 公式に記載があるvuex-module-decoratorsを使用して、Nuxt + TypeScriptの環境でVuexを扱う方法。 ストア - Nuxt TypeScript 環境 名称 Version Node 14.10.1 Nuxt 2.14.5 Vue 2.6.12 TypeScript 3.9.7 Vuetify 2.3.10 nuxt-property-decorator 2.8.8 v…

NuxtのTypeScript化 〜nuxt-property-decorator導入編〜

概要 nuxt-property-decoratorを使用して、NuxtをTypeScript化する。 環境 名称 Version Node 14.10.1 Nuxt 2.14.5 Vue 2.6.12 TypeScript 3.9.7 Vuetify 2.3.10 nuxt-property-decorator 2.8.8 TypeScript化 パッケージをインストールする npm i nuxt-prope…

CloudFront + S3の構成で、特定のページだけキャッシュさせない

AWS

構成 特定のページだけキャッシュさせない方法 CloudFrontでの設定 Object Cachingで、Use Origin Cache Headersを設定する。 S3での設定 AWS コンソールで設定する場合 キャッシュさせたくないページのhtmlファイルを選択して、プロパティのメタデータから…

DockerでNuxt環境を構築する

環境 macOS Catalina 10.15.6 前提 Docker for Macをインストール済みであること。 インストールをしていない場合は、こちらからインストール。 ディレクトリ構成 |-- src |-- docker-compose.yml |-- Dockerfile Dockerコンテナの作成 必要なファイルを準備…

Amazon S3の静的ウェブサイトホスティングで、クエリパラメータが消える

AWS

事象 クエリパラメータを付与した状態のURLに直打ちでアクセスするとクエリパラメータが消えてしまう。 具体的には、以下のようにリダイレクトされる。 https://xxxxxxxxxx.cloudfront.net/test?id=test↓https://xxxxxxxxxx.cloudfront.net/test/ 原因 以下…

Nuxtで暗号化した値をブラウザのJavaScriptで復号化して再度暗号化する

環境 Nuxt 名称 Version Node 14.5.0 Nuxt 2.13.3 Vue 2.6.11 TypeScript 3.8.3 Vuetify 2.3.3 nuxt-property-decorator 2.7.2 ブラウザのJavaScript 名称 Version jQuery 3.5.1 Bootstrap 4.5.2 使用する拡張機能 Nuxt crypto Nuxtで暗号化する方法 const S…

Nuxtでハッシュ化・暗号化・復号化する

環境 名称 Version Node 14.5.0 Nuxt 2.13.3 Vue 2.6.11 TypeScript 3.8.3 Vuetify 2.3.3 nuxt-property-decorator 2.7.2 使用する拡張機能 crypto ハッシュ化と暗号化 ハッシュ化 元となるデータをハッシュアルゴリズムによって、固定長の値に不可逆変換を…

Amazon Cognitoで、サインアップ時などにメールが送信される機能をOFFにする

AWS

概要 AWS AmplifyフレームワークのAuth.signUpを使用してCognitoのユーザープールにアカウントを作成する時などに送信されるメールを送信しないようにする設定。 設定方法 ユーザープールの「MFAそして確認」にある「どの属性を確認しますか?」の部分を「検…

CloudFront + S3の構成で、Nuxtで静的化したコンテンツのページをリロードすると404エラーが発生する

事象 Amazon S3 + Amazon CloudFrontの構成で、Nuxtで静的化したコンテンツをS3に配置した際に、 ルート(/index.html)以外のページで、更新すると404エラー「NoSuchKey」が発生する。 構成 前提 Nuxtで静的化を行うと、以下のようなフォルダ構成となる。 /pa…