Nuxt

Nuxt & JAMstack & AWS

やりたいこと Nuxtで作ったサイトを、JAMstackと呼ばれる方法を利用して、AWSにデプロイする。 JAMstackについて下記の記事がわかりやすく大変参考になりました! https://qiita.com/miyaoka/items/9774f0250953da419a58 調べた感じのメリット SPA modeと比…

Nuxtで、簡単なDapps作った

やったこと ethereumの送金をできるだけのシンプルなDappsを作ってみた 慣れてるNuxtを使った。 アプリケーション側 初期設定 nuxtをinstallするとかの部分は割愛。 インストール - NuxtJS プラグイン作成 /plugin/web3.js を作成。 初期時に、web3 objectの…

サイトリニューアルでしたこと

概要 現在、サイトリニューアルを行なっている。 忘れないうちに、思ったこととかやったことをメモ。 はじめ WEBサイトリニューアルをするということで、入社した。 入社時点で、PHPのCodeIgniterから、Railsに移行するということは決まっていた。 また、Rea…

Circle CI から、S3 へ Nuxt Assets をアップロード

やりたかったこと デプロイ時に、NuxtのAssetsファイルをS3にアップロードしたかった。 下の記事でやったようにしたらできたが、buildspec.yml がdockerのbuildとs3のuploadという二つの役割を持っているのはあんま良くない。 okadak1990.hatenablog.com で…

Nuxt + Express + Nginx with Docker 作成

目的 Nginx, Nuxt, Express を用いたDocker環境を作成した。 Nginxを用いる理由は、アクセスログをnginxにやらせたかったからで必須ではないです。 envoy?的なイメージ。 設定関連 Nginx unix socketでExpressと通信をするようにする。 ポートでも問題ないけ…

Nuxt & Docker 開発環境構築

目的 Nuxt(SSR)をDockerで開発をスムーズにできるように、雛形作ったのでメモ レポジトリ https://github.com/okadak/nuxt_buildergithub.com 説明 READMEに書いたけど、いつか消すかもなので、こちらにもメモ 初期手順 terminalから、以下を実行すると、d…

Nuxt 2.4.0 へ移行した

Nuxt 2.4.0 がリリースされたので、会社のWEBサイトで、本番に反映してみた。 ja.nuxtjs.org やったこと storeをモジュールモードへ https://ja.nuxtjs.org/guide/vuex-store/ クラシックモード使ってると、警告が出たので、モジュールモードに変更。 プラグ…

Nuxt&SSRでsetIntervalを使う時の注意点

ssr.vuejs.org 上記にあるように beforeCreate と created でsetInerval を使うと、SSR中に呼び出されるので、サーバでsetIntervalが実行されて、clearIntervalをしない限り永遠に続いて行く... 気づかず実装してしまって、焦ったのでメモ。 怖いので、mixin…

NuxtにLazyLoadを入れてみた

2019/3/5 追記 LazyLoadを導入しましたが、サイト速度が向上したかに関して、現状測定していません。 Page Speed Insight の点数が向上したという結果のみ得ています。 そのため、実際にパフォーマンス向上に貢献できているかは不明です。 Webパフォーマンス…

Nuxtで画像ファイル名に変数を入れたい場合

地味に、変数を画像ファイル名に入れて、かつsrcsetを使いたい時悩んだので、備忘録も兼ねてメモ 画像を呼び出す時 <template lang="pug"> img(src="~assets/images/hogehoge.jpg" srcset="~assets/images/hogehoge@2x.jpg 2x") </template> アセット - Nuxt.js にあるように、 ~/assets とせ…

Nuxt + Rails の開発構成考えてみた

考えたきっかけ 新規サービス作るにあたって、構成考えてみた。 将来的にはアプリ化するということで、それを見越して、API + SPA の形にしてみた。 下の画像のイメージ。 正直、静的ファイルはCDNに置いた方がよくない?って感じだけど、Dockerの勉強も兼ね…

textareaに、入力した文字に色をつけたい。

jquery.mentionsInput という機能で現在、実装されているものをVueで書き換えたかった。 何をやりたいかというと、コメント欄にメンション機能をつけて、そのメンションに対して、色付けしたいという要望。 色付けする = HTMLなので、textareaを普通に使った…

Nuxt Meetup #6 でLTした

他の方が発表されてた内容が参考になったので、メモ - appolo というGraphQLクライアントライブラリが良いらしい。 - k8s 使ってる人に話聞くと、自分たちに本当に必要なのかって感じだったらしい。 - Blue Green したいだけなら、Code deploy とかでもでき…