Amplify Console の Preview は超便利 - アクトインディ開発者ブログ
morishitaです。 この記事は actindi Advent Calendar 2019 の15日目の記事です。 adventar.org Nuxt.js の SPAをAmplify Consoleで運用しているということは以前紹介しました。 tech.actindi.net これまで、ステージング環境の作成は Branch Autodetect 機能を利用してやっていたのですが、最近 Preview 機能に乗り換えたので紹介します。 CDKも便利ですが、今年出たAWSのサービスでおすすめは？ と聞かれたら、「S3で静的なSPAをホストしているならすぐに Amplify Console への乗り換えを検討すべき」と思うくらいワタシ的にはイチオシです。 Amplify Console の Preview機能って？ Githubと連携して、プルリクエスト（PR）が作られると、そのブランチ
Github Actions で Nuxt.js のSPAにJestとESLintを実行してみた - アクトインディ開発者ブログ
morishitaです。 毎月第3土曜日にお得クーポンを配布しているいこーよ こどもBIRTHDAYはいこーよの中にありながら、このコーナーだけ独立したNuxt.jsのSPAとなっています。 https://birthday.iko-yo.net/birthday.iko-yo.net 次の記事で紹介したようにJestでテストしており、ESLintを使ってチェックもしています。 tech.actindi.net これまでは実装していたのが主に私とデザイナーの二人だけだったのでCIを用意しておらず、ローカルでJestとESLintを実行してチェックしていました。 ちょうど Github Actions が使えるようになったので、これを使ってCIをやってみました。 Jest まずはJestによるテストの実行。 次のような内容のYAMLファイルを .github/workflows/jest.y
NuxtアプリケーションをJestでテストする - アクトインディ開発者ブログ
morishitaです。 このところNuxtのSPAを作っていました。 次のエントリで紹介したものに手を入れていたのですが、このときにはテストを書いていませんでした。 tech.actindi.net 今回はちゃんとテストも書こうと思ってやってみました。 いくつかすんなり行かず試行錯誤した部分があるのでそれを書こうと思います。 Nuxt SPAのテスト SSRを含まないNuxt SPAアプリケーションの構成要素は大雑把に次を含んでいます。 コンポーネント ページコンポーネントから使われる構成要素を実装したVueのSFC1 ページコンポーネント ルーティングとひも付きページを構成するSFC Vuexストア クライアントサイドでデータを格納しデータフローを制御するモジュール PluginやMiddleware Nuxtからフックされるモジュール その他ユーティリティ的なモジュール 他のコンポー
Nuxt.jsのネストした動的ルーティングで困ったので調べてみた - アクトインディ開発者ブログ
morishitaです。 SPAモードで動作するNuxtアプリケーションでネストした動的ルーティングの動作が思ったのと違ったので調べてみました。 やりたかったこと Railsのノリで次のようなパス階層をNuxt.jsでやりたいと思いました。 パス 説明 / サイトトップ。 /groups/:group :groupに対応したグループの詳細。 実際には所属メンバーの一覧 /groups/:group/members/:member グループ:groupに所属する メンバー:memberの詳細。 ※ :group、:memberはそれぞれのID（自然数）です。 複数のグループが存在し、そのそれぞれに所属するメンバーがいるというよくあるアプリケーションです。 期待したこと 公式ドキュメントの動的でネストされたルートを参考に次のようなファイル群を作りました。 pages/ ├── index.vu
Nuxt SPAのPVを @nuxtjs/google-tag-manager を利用して計測する - アクトインディ開発者ブログ
morishitaです。 Nuxt の SPA を運用する際にページビューを計測しようと、@nuxtjs/google-tag-managerを導入しました。 ページがロードされるランディングは計測されるのですが、SPA 内でページ遷移したページビューが計測されなかったので調べたことを書きます。 利用バージョンは次のとおりです。 nuxt@2.2.0 @nuxtjs/google-tag-manager@2.1.0 @nuxtjs/google-tag-manager @nuxtjs/google-tag-managerは Nuxt アプリケーションに Google Tag Manager を簡単に組み込めるプラグインです。 npm や yarn でインストールして、次の設定をnuxt.config.js に追加すると使えるようになります。 modules: [ ['@nuxtjs/goo
NuxtのSPAを S3＋CloudFrontでホストする。デプロイはCodeBuildで自動化 - アクトインディ開発者ブログ
≪2019/06/20追記≫ この記事を公開したのは2018-10-19です。 2019-06-20時点でより簡単さ、運用の容易さを求めるならAWS Amplify Consoleもおすすめです。 tech.actindi.net morishitaです。 Nuxt で実装した SPA を S3 + CloudFront で配信する機会があったのでそれを書きます。 NuxtのSPA自体については、標準的な作りでTypescript、Pug、 Sassを使ってますよってことぐらいしか書くことがないのですっ飛ばして、 S3とCloudFrontでどのようにSPAをホストしたのか、そしてCodeBuildを使ったデプロイの自動化について書きます。 概要は次のとおりです。 NuxtのSPAをホストするための S3とCloudFrontを設定する CodeBuildを使ってS3にデプロイする GIt
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
