2020-01-01から1年間の記事一覧
概要 AWS AppSyncのmutation(データ登録など)の通信内容をChromeのデベロッパーツール(F12)を利用することで、どのようなデータを登録したかを確認することが出来る。 通信内容を見る方法 Chromeのデベロッパーツール(F12)のNetworkタブを開いた状態で、muta…
概要 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 {…
概要 Vuexのデータは、永続化対応をしないとページ更新などをするとデータがなくなってしまう。そのため、「vuex-persistedstate」を使用して永続化の対応をする。 Nuxt + TypeScriptで、Vuexを扱う方法はこちら 環境 名称 Version Node 14.10.1 Nuxt 2.14.5…
概要 公式に記載がある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-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での設定 Object Cachingで、Use Origin Cache Headersを設定する。 S3での設定 AWS コンソールで設定する場合 キャッシュさせたくないページのhtmlファイルを選択して、プロパティのメタデータから…
環境 macOS Catalina 10.15.6 前提 Docker for Macをインストール済みであること。 インストールをしていない場合は、こちらからインストール。 ディレクトリ構成 |-- src |-- docker-compose.yml |-- Dockerfile Dockerコンテナの作成 必要なファイルを準備…
事象 クエリパラメータを付与した状態のURLに直打ちでアクセスするとクエリパラメータが消えてしまう。 具体的には、以下のようにリダイレクトされる。 https://xxxxxxxxxx.cloudfront.net/test?id=test↓https://xxxxxxxxxx.cloudfront.net/test/ 原因 以下…
環境 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…
環境 名称 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 ハッシュ化と暗号化 ハッシュ化 元となるデータをハッシュアルゴリズムによって、固定長の値に不可逆変換を…
概要 AWS AmplifyフレームワークのAuth.signUpを使用してCognitoのユーザープールにアカウントを作成する時などに送信されるメールを送信しないようにする設定。 設定方法 ユーザープールの「MFAそして確認」にある「どの属性を確認しますか？」の部分を「検…
事象 Amazon S3 + Amazon CloudFrontの構成で、Nuxtで静的化したコンテンツをS3に配置した際に、 ルート(/index.html)以外のページで、更新すると404エラー「NoSuchKey」が発生する。 構成 前提 Nuxtで静的化を行うと、以下のようなフォルダ構成となる。 /pa…
