プログラミング学習やフリーランスエンジニア情報を発信していきます。現役フリーランスエンジニア2人で運営してます!

  1. フロントエンド

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

最終更新日:2018/12/19

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 コマンドを実行すると、プロジェクト ディレクトリのルートに 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.

ぞえ

実務未経験から1年でフリーランスエンジニアになって給料が6倍になった男/アル中の記憶ない系/しかも190cmの巨人。今は週3勤務しながら@ryudoi1と当メディア運営中 詳細なプロフ ぞえのプロフィール!! Twitterアカウント Twitter 技術系の雑談や、質問の行える無料サロンもやっています。 windii social

関連記事

コメント

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

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

PAGE TOP