Nuxt.jsで作成したWebサイトをFirebaseでホスティングする

2020/02/07

Nuxt.jsはモダンなWebアプリケーションを開発するための、 Vue.jsベースのフレームワークです。

そんなNuxt.jsですがWebアプリケーションはもちろん、静的なWebサイトを作成することも可能。

Nuxt.jsなら、フロントエンドに必要な骨組みが揃っており開発が高速化できるといったメリットがあります。

この記事ではNuxt.jsのサンプルアプリを静的ファイルに出力し、それをFirebase Hostingにホスティングするための手順を解説していきます。

• Webサイト制作を行いたい方
• 社内のIT人材が不足している方
• 効率よく開発業務を行いたい方

これらに当てはまる方におすすめの記事となっています。これを読めばWebサイト構築を効率化することができますよ。

Nuxtアプリを作成

まずは下記コマンドでNuxt.jsのアプリを作成します。

yarn create nuxt-app nuxt-app-firebase 

各フレームワークやLinterは必要になった時に自分で選んで入れたいので、
基本的にはNoneを選びます。

package managerはYarn、rendering modelはSSRを選択します。

開発用サーバーを起動して動作確認

アプリが作成できたら下記コマンドで開発用のサーバーを立ち上げます。

cd nuxt-app-firebase
yarn run dev 

以下のような画面が表示されればOKです。

静的ファイルの出力先のディレクトリを変更

Nuxt.jsの静的ファイル出力はデフォルトでdistディレクトリになっています。

Firebaseはpublicディレクトリがホスティングされるので、
nuxt.config.jsを以下のように修正して出力先を変更します。

build: { 
  ... 
}, 
generate: { 
  dir: 'public' 
} 

Vueファイルから静的ファイルを出力

ディレクトリが変更できたら下記コマンドで静的ファイルを出力します。

 yarn run generate

publicフォルダに以下のファイルが出力されていればOKです。

200.html 
README.md 
_nuxt/ 
favicon.ico 
index.html 

Firebaseプロジェクトを作成

次にホスティング先のFirebaseの設定を進めていきます。
まずはFirebaseのサイトでプロジェクトを作成します。

今回は本運用はしないのでGoogle Analyticsは無効にします。

Firebase CLIをインストール

次にFirebaseをコンソールから操作するためのツールを下記コマンドでインストールします。

npm install -g firebase-tools

Firebaseにログイン

インストールが完了したら下記コマンドでFirebaseにログインします。

firebase login

認証画面が自動で立ち上がるのでログインします。
ログインが完了すると以下のような画面が表示されます。

Firebaseの初期化

次に下記コマンドでFirebaseの初期化を行います。

firebase init

今回はWebサイトのホスティングに利用するのでHostingを選択します。
選択はエンターではなくスペースキーなので注意してください。

先ほど作成したプロジェクトを使いたいのでexisting projectを選択します。

先ほど作成したプロジェクトを選択します。

publicフォルダはそのままでOKです。

今回はSSRモードにしているためNoを選択します。

Nuxt.jsで出力したindex.htmlと重複するためNoを選択します。

Firebaseに静的ファイルをデプロイ

初期化が完了したら下記コマンドでFirebaseにデプロイします。

firebase deploy

下記のような画面が表示されればOKです。

Firebase Hostingにホスティングされているか確認

先ほど表示されたHosting URLにアクセスします。
以下のような画面が表示されればOKです。

終わりに

これでNuxt.jsで作成したWebサイトをFirebaseでホスティングできるようになりました！

Nuxt.jsでWebサイトを作ることによって、開発が効率的にスピーディーに行えるようになります。

dehaでは、５年ほど前から、ベトナムオフショア開発を行っています。

ベトナムオフショアに興味がある方や、本日紹介したNuxt.jsのようなフレームワークでのWeb開発を行いたい方は、ぜひお気軽にお問い合わせください。

お問い合わせはこちらから