動かざることバグの如し

近づきたいよ 君の理想に

Nuxt.jsでQiita API取得して一覧表示するアプリをFirebaseへデプロイするチュートリアル

他のチュートリアルとか、やってみた!だと早速認証周りだとかElement UIとかに手を出してて難しすぎる。

本質的に、一番シンプルな感じで

  • Qiita API v2 認証不要を叩いて
  • リスト表示するだけのアプリをNuxt.jsで作って
  • firebaseに無料デプロイ!

までやる。

環境

  • Nodejs v10
  • Nuxtjs v2.5.0

インストール

まずはひな壇を生成する。最近では公式のnuxt/create-nuxt-appを使うのが定石らしい。

ってことで実行 本当はyarnでやりたかったのだが、なぜかパッケージの一部が404でインストールできなかったので今回はnpmで実行

npm init nuxt-app

すると質問が何個か対話的に行われる。今回は以下のようにした

> Generating Nuxt.js project in /private/tmp/hogehoge
? Project name hogehoge
? Project description My stylish Nuxt.js project
? Use a custom server framework none
? Choose features to install Axios
? Use a custom UI framework bootstrap
? Use a custom test framework none
? Choose rendering mode Universal
? Author name thr3a
? Choose a package manager npm

するとひな壇が完成している。こんな感じ

.
├── README.md
├── assets
├── components
├── layouts
├── middleware
├── node_modules
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
├── plugins
├── static
└── store

実行

終了時にも案内があるが、作成されたそのディレクトリに入って、以下を実行するとサーバーが起動する。

npm run dev

でブラウザでURLを開くとVueの画面が表示されるはず。

カスタマイズ Qiitaの記事取得

今回は1ファイルのみ編集する。 pages/index.vueのScript部分を以下にする。

<script>
// axios
import axios from 'axios';
// qiita api URL
const BASE_URL = 'https://qiita.com/api/v2/';

export default {
  async asyncData(context) {
    try {
      const response = await axios.get(BASE_URL + 'items', {
        params: {
          page: 1,
          per_page: 10,
        }
      });
      return {
        articleList: response.data,
      };
    } catch (error) {
      console.log(error);
    }
  }
}
</script>

次に、template部分を書き換える。styleは要らないので完全に削除してよい。

<template>
  <section>
    <h1>Qiita 新着記事一覧</h1>
    <div
      v-for="(article, index) in articleList"
      :key="index"
    >
    <ul class="list-group">
      <li class="list-group-item">
        <a :href="article.url">{{ article.title }}</a>
      </li>
    </ul>
    </div>
  </section>
</template>

するとさっきのブラウザのページが自動で変わって新着記事一覧が表示されるようになっているはず。

firebaseによるデプロイ

グローバルにfirebaseのクライアントをインストール

npm install -g firebase-tools

するとfirebaseコマンドが叩けるようになったので、ログイン

firebase login

firebaseデプロイするための初期設定

firebase init hosting

ここでもいくつか質問されるはず

  • public directoryをdistに
  • single-page app(SPA)の設定をしない
? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? No
✔  Wrote dist/404.html
✔  Wrote dist/index.html
i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

するとfirebase.jsonと.firebasercが生成されるようになるはず

いざデプロイ

生成

npm run generate

そしてデプロイ…の前にローカルでデプロイ時の動作テストができる

firebase serve --only hosting,functions

よさげならいざデプロイ

firebase deploy

するとできてる すごい

ソースコード

要らんだろうけど、念の為ソースコードをアップした

参考リンク