システム開発

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

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では、5年ほど前から、ベトナムオフショア開発を行っています。

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

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

Mai Tran

Recent Posts

請求システム導入で業務効率化を実施|開発の費用相場

請求システムを導入することで請求書作成の人的ミスを防ぎ、管理も楽に行うことができます。 この記事ではそんな請求システムの導入について具体的なメリットや開発費用などについて徹底解説していきます。 請求システムを導入したい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば請求システムについてわかるのはもちろん、開発にかかるコストまで丸わかりですよ。 (more…)

2 weeks ago

見積作成システム導入メリットや相場費用 |オフショア開発

見積作成は多くの企業で重要なプロセスですが、手作業やエクセル管理では多くのミスの恐れがあり、人的負担も懸念されます。  そこでおすすめなのが見積作成システムの導入です。見積作成システムを導入することで業務の効率化を図ることができます。  この記事ではそんな見積作成システムについて導入メリットや費用などについて徹底解説していきます。  見積作成システムが気になる方  見積作成に多くの時間を費やしている方  社内のIT人材が不足している方  これらに当てはまる方におすすめの記事となっています。これを読めば見積作成システムの導入メリットや必要性がわかるのはもちろん、DEHAソリューションズでの具体的コストなどについても丸わかりですよ。  (more…)

2 weeks ago

CRMの必要性は?基本機能やシステム導入の相場費用を解説

顧客データの一括管理ができるCRMは仕事の効率化や顧客満足度向上のための有用なツールです。 近年導入する企業が増えているCRMですが、導入には一定の費用がかかります。 本日はそんなCRMについてシステム導入には具体的にいくらかかるのかや、導入の基本機能などについて紹介していきたいと思います。 CRMの必要性が気になる方 CRMについて詳しく知りたい方 CRMの導入費用が知りたい方 これらに当てはまる方におすすめの記事となっています。これを読めばCRMについて具体的にいくらかかるのかや、CRMの導入方法まで丸わかりですよ。 (more…)

3 weeks ago

【スクラム開発の肝】プロダクトオーナー(PO)とは?プロジェクトマネージャー(PM)との違いを解説

スクラム開発ではプロダクトオーナー(PO)がなくてはならない存在です。 しかし、初めてスクラム開発を行う企業では、従来のプロジェクトマネージャー(PM)との違いがわからず、チーム作りや各自の役割に困惑してしまうことがあります。 そこでこの記事ではスクラム開発に重要なプロダクトオーナー(PO)に関して、プロジェクトマネージャー(PM)との違いや共通点などを通して徹底解説していきたいと思います。 プロダクトオーナー(PO)について知りたい方 スクラム開発に興味がある方 システム開発を行いたい方 これらに当てはまる方におすすめの記事となっています。これを読めばプロダクトオーナー(PO)とは何か、その違いは何なのかなど丸わかりですよ。 (more…)

3 weeks ago

【外注前に知っておくべきこと】アプリ開発の企画から公開まで一から説明

オフショア開発を検討する際、成功するためにはいくつかの重要な要素を把握しておくことが重要です。アプリ開発のプロセスは、企画から公開まで多くの段階があります。 そこでこの記事ではそんなアプリ開発の企画から公開までの流れを解説していきたいと思います。 アプリ開発を行いたい方 アプリ開発を外注しようとしている方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばアプリ開発の手順がわかるのはもちろん、外注前に知っておくべきポイントも丸わかりですよ。 (more…)

4 weeks ago

CRMのタイプ別?特徴や基本機能を紹介

企業が顧客関係を管理し、ビジネスの成長を促進するために欠かせないツールのひとつがCRM(Customer Relationship Management)です。 CRMは単なる顧客管理システムではなく、営業、マーケティング、カスタマーサポートなど多岐にわたる機能を提供します。 CRMにはいくつかのタイプがあり、それぞれの目的や特徴が異なります。 そこで記事では、クラウド型CRM、オンプレミス型CRM、自社向け開発型CRMの種類と特徴、基本機能について詳しく解説します。 CRMの導入を検討されている方 業務の効率化を図りたい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばそれぞれのCRMの特徴がわかるのはもちろん、導入のメリットなども丸わかりですよ。 (more…)

4 weeks ago