テックブログ

  1. Nuxt
  2. 31 view

Nuxt.js+Firebaseでデプロイまでの流れ【簡単5分】

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

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

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

Firebaseツールのインストール

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

sudo npm install -g firebase-tools

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

firebase login
firebase init

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で作成したい場合は、以下の記事が参考になります。

ディレクトリ移動&起動

cd nuxt-project
npm install
npm run dev

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

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

プロジェクトの公開

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

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.

zoe

1994年、京都生まれ。麻布高校卒業後、2年間FPSのクランマスターとして活躍し、駒澤大学の経営学部に進学 → 中退→ とんかつ屋→ WINDII→ Sier→ ベンチャー→ WINDII

Nuxtの最近記事

  1. Nuxt.js+Firebaseでデプロイまでの流れ【簡単5分】

  2. NuxtでOAuth認証を導入する

  3. Vuetifyチュートリアル。CSSを書かないマテリアルデザイン

  4. Nuxt入門〜create-nuxt-appでお手軽開発

  5. NuxtでJWT認証を導入する

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。