現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

Nuxt.js + Firebaseを利用すると、簡単にFirebaseホスティングでWEBアプリケーションを公開することが出来ます。

この記事では、Nuxt.js+Firebaseでアプリケーションを公開するまでの流れを解説します。

Nuxt.jsとは？

Vue.jsをベースとしたSPA（シングルページアプリケーション）フレームワークです。
ルーティング不要、デフォルトでSSR（サーバーサイドレンダリング）対応。

使いやすくて、高機能なので、サクッとSPAを実装する事ができます！

公式の自己紹介。

Nuxt.js はサーバーサイドレンダリングやコード分割、ホットリローディング、静的ファイル生成などを備えた Vue.js アプリケーションを構築するためのミニマルなフレームワークです！

Nuxt.js

Firebaseとは？

Firebaseとは、Googleの提供するmBaaSです。
mBaasは、mobile backend as a service の略で、直訳するとモバイル用バックエンドサービスです。
その名の通り、モバイル用のバックエンド機能を包括的にサポートしてくれています。

バックエンド機能の例としては、以下のようなものがあります。

• サーバーを管理せずに、モバイルのバックエンド コードを実行 Cloud Functions
• 認証 Google、Twitter、Facebook、GitHub のログインなどをサポート Firebase Authentication
• 簡単デプロイ　Firebase Hosting
• コンテンツを迅速かつ簡単に保管 Cloud Storage for Firebase
• リアルタイムデータベース Firebase Realtime Database
• iOS、Android、ウェブでメッセージや通知を送受信 Firebase Cloud Messaging

このような機能を使う事で、サーバーサイド側のフレームワーク、Rails、Laravel等でのバックエンド開発をせずにWebアプリを公開する事ができます。

Firebaseを始める

今回は、Firebaseのホスティング機能を利用して、Webアプリを公開しますのでFirebaseへの登録が必要です。

とは言っても、FirebaseはGoogleアカウントさえあれば、ログインしてすぐ使い始める事ができます。
以下のリンクより、Firebaseにアクセスし、右上のコンソールへ移動を選択してください。
Firebase

プロジェクトを追加から任意のプロジェクト名を追加し、プロジェクトを作成を選択してください。

次はターミナルでの作業に移ります。

Firebaseツールのインストール

ターミナルからFirebaseを操作する為には、firebase-toolsが必要です。

sudo npm install -g firebase-tools

以上でFirebase側の下準備は終了です。
というのも寂しいので、ログインして、firebase init コマンドを実行してみましょう。

firebase login
firebase init

はい、かっこいい！

次にNuxt.jsのプロジェクトを作成します。

Nuxt.jsプロジェクトの作成

//vue-cliのインストール
npm install -g vue-cli
//プロジェクトの作成 nuxt-projectの部分は任意のプロジェクト名
vue init nuxt-community/starter-template nuxt-project

Project name,Project description,Authorを聞かれますが、全部enter押して大丈夫です。

TypeScriptで作成したい場合は、以下の記事が参考になります。

TypeScriptでNuxt入門【5分で環境構築】

本記事では、NuxtをTypeScriptで開発できるテンプレートをサクッと入れて立ち上げる方法を解説します。タイトルの通り５分あればできます。Vue CliのインストールVue CliはVue開発をサポートしてくれるコマンドラインツールです。まだインストールしてない人は以下の...

ディレクトリ移動&起動

cd nuxt-project
npm install
npm run dev

http://localhost:3000にアクセスしてみましょう

このような画面が出たら成功です。

プロジェクトの公開

export default firebase次にfirrebase.jsonを作成します。
ターミナルで新規タブを開いて以下のコマンドを入力してください。

firebase init コマンドを実行すると、プロジェクト ディレクトリのルートに firebase.json 構成ファイルが作成されます。このファイルは、CLI を使用してサイトをデプロイするために必要です。

firebase init hosting

Select a default Firebase project for this directory:と聞かれますので、先ほどFirebaseで作成したnuxt-projectを選択してください。

What do you want to use as your public directory? にはdistと返答します。
publicのままにすると、project直下にpublicディレクトリが作成されます。

Configure as a single-page app (rewrite all urls to /index.html)?はnoを選択します。

Firebase initialization complete!

次にNuxtアプリをFirebaseのプロジェクトに公開します。

firebase use --add

先程作成したnuxt-projectを選択してください。

npm run generate
firebase deploy

HostingURLにアクセスすると先程と同じ画面が見られる事が確認できます。

サンプル

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！ また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

最新記事 by WINDII (全て見る)

• Nuxt.js + Contentful。HeadlessCMSでポータルサイトを作る - 2019年12月28日
• IOSアプリをAppStoreに公開する手順書（Ionic） - 2019年9月11日
• IonicAcademyでIonic＆Angularでのアプリ開発を学ぶ - 2019年8月30日