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

概要

AWS API Gateway + Lambda構成のペイロード制限での注意点。

注意点

前提

API Gatewayのペイロードサイズ上限は、10MB。
Amazon API Gateway のクォータと重要な注意点 - Amazon API Gateway

Lambdaのペイロードサイズ上限は、6MB。
Lambda クォータ - AWS Lambda

クォータの引き上げをリクエストすることは、不可能。

結論

API Gateway + Lambda構成の場合のペイロードサイズ上限は、6MBとなる。

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 default class extends Vue {
  private axiosGetTestData: string = '';
  private axiosPostTestData: string = '';

  private async axiosGetTest(): Promise<any> {
    const response = await this.$axios.get('エンドポイント');
    this.axiosGetTestData = response.data.status;
  }

  private async axiosPostTestData(): Promise<any> {
    const response = await this.$axios.post('エンドポイント');
    this.axiosPostTestData = response.data.status;
  }
}
</script>

テストコード

import 任意の名前1 '@/pages/ファイル名';

describe('任意の名前2', () => {
  it('任意の名前3', () => {
    const thisVal = {
      $axios: {
        get(): Promise<any> {
          return new Promise((resolve, reject) => {
            resolve({
              data: {
                status: 'getOk'
              }
            });
          });
        }
      },
      axiosGetTestData: ''
    };
    await 任意の名前1.options.methods.axiosGetTest.call(thisVal);
    expect(thisVal.axiosGetTestData).toEqual('getOk');
  });

  it('任意の名前4', () => {
    const thisVal = {
      $axios: {
        post(): Promise<any> {
          return new Promise((resolve, reject) => {
            resolve({
              data: {
                status: 'postOk'
              }
            });
          });
        }
      },
      axiosPostTestData: ''
    };
    await 任意の名前1.options.methods.axiosPostTestData.call(thisVal);
    expect(thisVal.axiosPostTestData).toEqual('postOk');
  });
});

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 class extends Vue {
  private vuexTestData: string = '';

  private vuexTest(): void {
    this.vuexTestData = clientStore.getTest;
  }
}
</script>

テストコード

import 任意の名前1 '@/pages/ファイル名';

jest.mock('~/store', () => ({
  clientStore: {
    getTest: 'vuexTest'
  }
}));

describe('任意の名前2', () => {
  it('任意の名前3', () => {
    const thisVal = {
      vuexTestData: ''
    };
    任意の名前1.options.methods.vuexTest.call(thisVal);
    expect(thisVal.vuexTestData).toEqual('vuexTest');
  });
});

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

概要

Jestでマウントせずに、関数のみ実行してテストする方法。

方法

基本形

import 任意の名前1 "@/pages/ファイル名";

describe("任意の名前2", () => {
  it("任意の名前3", () => {
    const thisVal = {};
    任意の名前1.options.methods.テスト対象の関数名.call(thisVal);
  })
})

テスト対象の関数に引数がある場合

import 任意の名前1 "@/pages/ファイル名";

describe("任意の名前2", () => {
  it("任意の名前3", () => {
    const thisVal = {};
    任意の名前1.options.methods.テスト対象の関数名.call(thisVal, テスト対象の関数の引数1, テスト対象の関数の引数2...);
  })
})

関数の処理を変更したい場合

下記の例は、何も処理しないように変更する方法。

import 任意の名前1 "@/pages/ファイル名";

describe("任意の名前2", () => {
  it("任意の名前3", () => {
    const thisVal = {
      処理を変更したい関数名(): void { }
    };
    任意の名前1.options.methods.テスト対象の関数名.call(thisVal);
  })
})

Dataの定義を変更する場合

import 任意の名前1 "@/pages/ファイル名";

describe("任意の名前2", () => {
  it("任意の名前3", () => {
    const thisVal = {
       Dataの定義名 = 変更したい値
    };
    任意の名前1.options.methods.テスト対象の関数名.call(thisVal);
  })
})

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

概要

AWS AppSyncのmutation(データ登録など)の通信内容をChromeのデベロッパーツール(F12)を利用することで、どのようなデータを登録したかを確認することが出来る。

通信内容を見る方法

Chromeのデベロッパーツール(F12)のNetworkタブを開いた状態で、mutationを実行することで、その通信内容を見ることが出来る。

Headersタブ内

Nameのgraphqlを選択して、Request Payload>variables>inputでmutationに渡している引数(登録するデータ)を見ることがきでる。

Previewタブ内

Previewタブ内では、mutationに渡している引数以外にもidやcreatedAtなどの自動で登録される内容も見ることが出来る。

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 { Plugin } from "@nuxt/types";

declare module "vue/types/vue" {
  interface Vue {
    $testInject(testBool: boolean): string;
  }
}

const testInject = (testBool: boolean): string => {
  return testBool ? "○" : "☓"
}

const utilsPlugin: Plugin = (context, inject) => {
  inject("testInject", testInject);
}

export default utilsPlugin;

nuxt.config.tsに読み込みを追加する

plugins: [
  { src: '~/plugins/utils.ts' }
]

使い方

this.$関数名で、実行する事が出来る。

this.$testInject(true);

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

概要

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

環境

名称	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
vuex-module-decorators	1.0.1
vuex-persistedstate	4.0.0-beta.1

手順

npmのインストール

npm i vuex-persistedstate

ファイルの作成

~/plugins/localStorage.ts

import { Context } from "@nuxt/types";
import createPersistedState from "vuex-persistedstate";

export default ({ store }: Context) => {
  createPersistedState({
    paths: [
      "client.test"
    ]
  })(store)
}

nuxt.config.tsにファイルの読み込みを追加

  plugins: [
    { src: '~/plugins/localStorage.ts', mode: 'client' }
  ]