こんにちは。
ITプロパートナーズでエンジニアの米川(@keiuwk0614)です。
普段は、自社プロダクトである中途向けの転職サービスGraspy(https://graspy.jp/)の開発をしています。フロントエンドはNuxt.js、サーバサイドはLaravelを使用し開発しています。
今回は、初学者向けにNuxtのプロジェクト作成から、外部APIを呼び出して簡単なWebアプリケーションを開発し、Firebaseのホスティングにデプロイするまでを紹介していきたいと思います。
実行環境
- node v10.3.0
- yarn 1.9.4
- nuxt 2.0.0
- firebase CLI 5.0.1
1. Nuxtプロジェクト作成
1-1. プロジェクト作成
プロジェクトを作成するディレクトリに移動し、公式ドキュメント(インストール - Nuxt.js)にならい下記コマンドを実行します。
※今回はyarnを使用
yarnが入っていない方は yarnを使ってみた - Qiita を参照してください。
$ yarn create nuxt-app <my-project>
いくつか質問されます 。
※今回は、UI frameworkにbulma、rendering modeはUniversal、axios moduleを使用するのでyesで選択してください。
? Project name nuxt-firebase
? Project description My tiptop Nuxt.js project
? Use a custom server framework none
? Use a custom UI framework bulma
? Choose rendering mode Universal
? Use axios module yes
? Use eslint no
? Use prettier no
? Author name kei yonekawa
? Choose a package manager yarn
選択後、全ての依存関係がインストールされプロジェクトが作成されます。
1-2. 起動
作成したプロジェクトのディレクトリに移動し、下記コマンドを実行します。
$ yarn run dev
デフォルトで3000番ポートが開きます。 http://localhost:3000 でアクセスし下記画面が表示されれば成功です。
デフォルトのポート番号を変更したい場合は、package.jsonのdevの引数にポートを指定するか、
"scripts": {
"dev": "nuxt --port 3333",
}
nuxt.confing.js内に設定することで変更できます。
module.exports = {
server: {
port: 8888,
},
// その他設定
}
2. axiosでQiita APIを呼び出す
2-1. 使用するQiita API
今回使用するのは、GET /api/v2/items という記事の一覧を作成日時の降順で返却するAPIを使用します。詳細は下記のAPI仕様書をご確認ください。
2-2. ayncData内でqiita apiを呼び出す
その前にasyncDataには次のような機能があります。
・ページコンポーネントがロードされる前に毎回呼び出される
・サーバサイドレンダリングや、ページ遷移前にも呼び出される
・contextを引数にとる
・asyncDataの結果は、dataとマージされる
asyncDataと似たようなメソッドに、fetchというメソッドもあります。
fetchもasyncDataもほぼほぼ機能は同じですが、asyncDataの場合はdataとマージされるため、必ずプロパティをreturnする必要があります。取得したデータをvuexに入れて使用する場合はfetchを使用し、ページコンポーネント内で使用する場合はasyncDataを使用するのが良さそうです。
それでは、プロジェクト作成時にデフォルトで生成されたpages/index.vueを編集します。今回は、apiで取得した結果をそのままページコンポーネント内で使用するため、asyncData内でapiを呼び出します。
<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>
/api/v2/itemsのAPIには次のパラメータが設定できます。
- page ページ番号 (1から100まで)
- per_page 1ページあたりに含まれる要素数 (1から100まで)
- query 検索クエリ
今回は、10件のデータを取得してくるように固定で設定します。
何かキーワード検索したい場合は、queryというパラメータに検索したいキーワードを設定することも可能です。
params: {
page: 1,
per_page: 10,
query: 'Nuxt.js',
}
2-3. apiのレスポンス結果を画面に表示
2-2ではasyncData内でapiを呼び、レスポンス結果をarticleListに設定してreturnしています。先ほども述べたように、asyncDataの結果はdataとマージされるため、pages/index.vueでarticleListを展開していきます。
articleListをv-forでループし、記事のタイトル、記事URL、アイコン画像、ユーザーID、いいね数を表示します。
レスポンスには他にも本文、タグ、更新日など様々あります。必要に応じカスタマイズしてください。
まずは、下記のコードをコピペでOKです。
<template>
<section>
<article
v-for="(article, index) in articleList"
:key="index"
class="box media">
<figure class="media-left">
<p class="image is-64x64">
<img :src="article.user.profile_image_url">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong><nuxt-link :to="article.url">{{ article.title}}</nuxt-link></strong> <br>
{{ article.user.id }}<br>
<small>Like · {{ article.likes_count }}</small>
</p>
</div>
</div>
</article>
</section>
</template>
ブラウザに戻り、上記コードコピペしていれば次のような画面が表示されていると思います。
これで一旦、Qiita APIを呼び出し記事の一覧を表示するところまでは完了になります。
コンポーネントの切り出し、デザイン等は各自でカスタマイズして貰えればと思います。
3. Firebase Hostingにデプロイ
3-1. Firebaseの準備
Firebase Console(https://console.firebase.google.com/?hl=ja)にアクセスし、googleアカウントでログインします。
プロジェクト、ロケーションの設定、規約に同意しプロジェクトを作成を押下します。
自動でFirebaseの管理画面に遷移します。
3-2. Firebase Hostingにデプロイ
3-2-1. Firebase CLIをインストール
先ほど作成したプロジェクトのディレクトリで、Firebase CLIをインストールしFirebaseコマンドを使用できるようにします。
$ yarn global add firebase-tools
3-2-2. firebaseにログイン
下記のコマンドを実行し、firebaseにログインします。
このコマンドを実行するとローカルコンピュータがFirebaseアカウントに接続され、プロジェクトへのアクセス権が付与されます。
$ firebase login
3-2-3. firebaseのホスティングの初期設定
下記コマンドを実行し、ホスティングの初期設定を行います。
$ firebase init hosting
先ほど作成したfirebaseプロジェクトを選択します。
? Select a default Firebase Project for this directory: nuxt-tutorial(nuxt-tutorial-491c1)
公開ディレクトリはdistにします。
? What do you want to use as your public directory ? dist
SPAとして公開するか聞かれますが、今回はasyncDataを使用しSSRしているのでNoを入力します。
? Configure as a single-page app (rewrite all urls to /index.html)? No
プロジェクト直下にfirebase.jsonと.firebasercというファイルが自動で作られます。
3-2-4. firebase デプロイ
下記コマンドを実行します。
dist/ 配下に静的ファイルが生成されます。
$ yarn build
本番環境に公開します。
$ firebase deploy
無事にデプロイできましたでしょうか。
firebase Hostingのダッシュボードでデプロイが成功したか、デプロイ先のドメインが分かります。
筆者がデプロイしたものは下記のURLからご確認頂けます。
https://nuxt-tutorial-491c1.firebaseapp.com/
今回作成したコードは、githubに公開していますので全体を見たい人はこちらを参考にしてください。
GitHub - keiyonekawa0614/nuxt-firebase: nuxt + qiita API + firebase hosting sample
ちょっと応用してキーワード検索できるものも作ってみました。
こちらもgithubにソースコードを公開しておりますので、参考にしてみてください。
GitHub - keiyonekawa0614/nuxt-tutorial: Web service to search qiita articles.
最後に
ITプロパートナーズでは、Laravel、vue.js、Nuxt.jsで開発に挑戦したいエンジニア・デザイナーを絶賛募集中です。少しでも興味のある方は、DMでもGraspy、Wantedlyでもお気軽にご連絡頂けますと嬉しいです。お待ちしております。
