他のチュートリアルとか、やってみた！だと早速認証周りだとかElement UIとかに手を出してて難しすぎる。
本質的に、一番シンプルな感じで
- Qiita API v2 認証不要を叩いて
- リスト表示するだけのアプリをNuxt.jsで作って
- firebaseに無料デプロイ！
までやる。
環境
- Nodejs v10
- Nuxtjs v2.5.0
インストール
まずはひな壇を生成する。最近では公式のnuxt/create-nuxt-appを使うのが定石らしい。
ってことで実行 本当はyarnでやりたかったのだが、なぜかパッケージの一部が４０４でインストールできなかったので今回は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の記事取得
今回は１ファイルのみ編集する。 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
するとできてる すごい
ソースコード
要らんだろうけど、念の為ソースコードをアップした
