AWSとCircleCIの力を借りて、Nuxt.jsで作った静的サイトの運用をできるかぎり自動化した話です。 3ヶ月ほど前からCIのサービスを使うようになり、入門記事はたくさんあって助かったのですが、具体的にどんな感じで使っているかの情報が少なかったので記事にしました。 もしかしたら、CIの使い方が間違っているかもしれないので、そのときは優しくコメントをいただけたら嬉しいです。 できあがった流れ 毎朝10時にLambdaを起こしてデータの更新を行い、静的ファイルを再生成してからデプロイする流れになっています。 対象のサイト ざっくりAWSという、AWSの料金を日本円でざっくり計算できるサイトです。 Nuxt.jsで作成したものを、静的サイトとして生成して、AWSのS3にホスティングしています。 計算に必要なAWSの価格や為替は、毎朝10時に取得したものをS3にJSONで保存し、そのJSON
はじめに Nuxt.jsとContentfulとNetlifyでモダンな（？）SPAブログを作りました。こちら 何回かにわけて構築の記録を残しているシリーズの第３回です。 前回つくったSPAブログを、APIベースのCMS「Contentful」に対応させていきます。 【シリーズの予定】 まえがき編 Nuxt.js編 Contentful編 ← この記事 Netlify編 事前情報 Contentfulの構造 ContentfulはユーザーごとにSpace、Content Model、Entryという構造を持っていて、それぞれにIDが割り振られています。 Space以下を複数のユーザーで共有することもできるみたいですが、一人で使用する場合は、以下のような階層構造だと思ってもらえればいいかと。 セットアップ ユーザー登録 まずはこちらからユーザー登録をしましょう。GitHubアカウントも使えま
nuxt generateの機能は、静的サイト生成とか、単に静的生成といわれることが多いですが、文中で多用するのがツラいので、より短く「SSG(Static Site Generation)」で統一しています。 Nuxt.jsにおけるビルドの選択肢 Nuxt.jsでは、SPA・SSR・SSGの中から、好きなものを選んで開発できます。 初期設定ではSSRで動作するようになっていますが、流れとして自然なのでSPAから順に利点と欠点をまとめました。それぞれのビルドを行うため設定は、ドキュメントにわかりやすく書いてあるので、そちらでご確認ください。 サーバーサイドレンダリング - Nuxt.js SPA（Single Page Application） 利点 実装しやすい サーバーの準備が楽 欠点 初期表示が遅い SEOに不安がある OGをページごとに設定できない SPAは、最もシンプルに実装でき
この記事はVue.js #2 Advent Calendar 2017の21日目の記事です。 去年も参加させていただいたのですが、今年は４つもカレンダーが作成されてVue.jsの勢いすごいですね。 今回、自分がこの記事で書く内容は特にテック的なことではなく、Nuxt.jsへの感想記事や思い出記事みたいなのになりますので、Nuxt.jsの技術的な内容を期待していた方はすみません。こういった人間もいるのか程度にご覧いただけたら、という感じです。 テンプレートエンジン・プリプロセッサの多様化 いきなりVue.js、Nuxt.jsという主題から脱線してしますがご了承ください。 Node.jsというものが世に出てから、おそらく、宗教上の理由などを抜きにすれば、HTMLやCSSを素で書くことはなくなったと思います。いわゆるテンプレートエンジン・プリプロセッサの時代。 人々はHTMLをPug(Jade)
Vue.jsでSPAを作ったものの、検索エンジンのクローラーやSNSのOGP取得といった問題で困ったことはありませんか？ サーバーサイドレンダリングを簡単に構築できるNuxt.jsの活用方法を解説します。 ユニバーサル（Isomorphic）JavaScriptはJavaScriptコミュニティで一般的な用語になりました。ユニバーサルJavaScriptとは、クライアントとサーバーの両方で実行できるJavaScriptコードのことです。 Vue.jsを含むモダンJavaScriptフレームワークの多くは、シングルページアプリケーション（Single Page Application : SPA）の構築を目的に作られています。シングルページアプリケーションはページがリアルタイムで更新されるので、アプリの動きが軽快でユーザーエクスペリエンスが向上します。さまざまな利点がありますが、欠点もありま
概要 Nuxt.jsを使って色々作っていると、generate(静的出力)時の初期表示内容にJSONファイルの内容を取り込んで表示したい、という場面に出くわします(多分)。 そんなときにどうやって取り込めばいいのかという方法を書き残しておきます。 方法 asyncDataメソッドを使います。 また、ページが動的ルーティングの場合はroutesオプションも使う必要がでてきます。 これら2つで要件は満たせるのですが、その中でどうやって読み込まれるかによって出力されるJS(ランタイム=初期表示以降に読み込まれる内容)が変わってくるので使い分ける必要があります。 サンプルケース 説明/理解しやすいように、以下のサンプルケースを用いて説明をしていきます。 Nuxt.jsを使ってブログシステムを作成する 記事はMarkdownで書き、それらを変換した個別のJSONファイルがあるものとする 初期表示時に
これは Vue.js #3 Advent Calendar 2017 – Qiita 21日目の記事です。 デモ：https://hisako135.github.io/nuxt_blog/ リポジトリ：https://github.com/hisako135/nuxt_blog Nuxt.js 使ってみたいけど何をつくろうかな〜と思案していたらば、『SEO、OGP……Vue.js製SPAの「困った」を解決できる「Nuxt.js」が便利だ！』という記事でブログを作っていたので、なんだかちょうどよさそうと思い以下を追加してやってみることにしました。 Contentful から記事を取得する トップページに配置するコンポーネント（ components/PostPreview.vue ）をつくる 記事一覧ページと個別記事ページをつくる nuxt generate で静的ファイルを生成する Gi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く