yasutomogのブログ

Software Engineerの雑記

nuxt.js

Amplifyで発生したビルドエラーの原因と解決案（Jamstack＆Nuxt.js）

Amplify Nuxt.js Jamstack SSG aws-exports.js amplify-cli

概要 Nuxt.jsでSSGしたものをAmplify上でhostingするJamstack構成 GitHubにPushされるとAmplify上でSSGされる流れ Amplifyプロジェクトを新規に構築していく中で、3件連続ビルドエラーを経験したのでまとめる前提 node.js：v14.17.0 amplify-cli：4.51.1 nu…

Nuxt.jsでPAY.JPの初期化エラー（既にインスタンス化されています）対策

Nuxt.js PAY.JP Jamstack

概要 Nuxt.jsベースでJamstackなECサイトのサンプル実装しているときに、PAY.JPの初期化でエラーが出ることがあったのでメモ PAY.JPを実装するにあたり、payjp（2.0.5）のnode moduleを利用画面側ではpayjpのCardElementを生成し、トークンを作成して決済用…

JamstackなECサイトの考察

Firebase Jamstack Nuxt.js GitHub Actions Algolia Stripe microCMS EC

概要 Jamstack Advent Calendar 2020 - Qiita の22日目の記事です。株式会社トライビート｜ TRIBEAT CO., LTD. という会社でBtoCや業務システムのWebアプリケーション構築や運用・保守をしています。これまでJamstackという言葉が出てくる前から、社内独自…

Nuxt.js (generate)とNetlify Forms (recaptcha)の問題と一時的な解決案

Nuxt.js Netlify Netlify Forms nuxt generate recaptcha Jamstack

概要 Nuxt.jsのプロジェクトでNetlify Formsを利用して、簡単なForm画面とrecaptcha機能を試したときに、ハマった点をメモ docs.netlify.com 前提 nuxt.js (v2.11.0) 「npx create-nuxt-app」で生成したプロジェクトをNetlify上にデプロイ NetlifyでGitHubの…

Nuxt.jsの開発サーバでHot Module Reloading (HMR)のエラー対策

nuxt.js vue.js

概要 Nuxt.jsのテンプレートを使ったプロジェクト「yarn run dev」コマンドで開発サーバ起動（デフォルトの3000ポート）コンソールログに「hot-update.json timed out」というエラー出力ホットリローディングができないバージョン node：10.12.0 nuxt.js…

Nuxt.jsでPWAをGitHub Pagesにコマンドでデプロイする流れ

vue.js nuxt.js PWA GitHub

概要 Nuxt.jsのテンプレートとPWAモジュールを使用して作成したアプリをGitHub Pagesにコマンドラインでデプロイする方法のまとめバージョン node：10.12.0 nuxt.js：2.0.0 nuxtjs/pwa：2.6.0 push-dir：0.4.1 vue-cli：2.9.6 yarn：1.10.1 参考記事 https:…

GitHub Pagesでアンダーバーのディレクトリ対応

github GitHub Pages nuxt.js

概要 Nuxt.jsで構築したサイト（yarn run generateで生成したdist直下）をGitHub Pagesに上げると、_nuxtディレクトリ内のjsファイルなどが404になる GitHub PagesではJekyllで処理されるため、アンダーバー付きディレクトリなどが正常に読み込まれない対応…