システム開発

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

IFSクラウドへ移行すべき4つの理由

製造業や建設業、航空・防衛、エネルギー、サービス業など、複雑な業務を抱える企業にとって、ERPシステムは単なる基幹システムではなく、経営そのものを支えるインフラとなっています。 しかし近年、多くの企業で従来型ERPの限界が顕在化しています。そのような中で注目されているのが、クラウド型ERPへの移行です。 この記事では、「IFSクラウドへ移行すべき4つの理由」というテーマで、IFS Cloudがなぜ多くの企業に選ばれているのかを詳しく解説します。 IFSクラウドに興味がある方 製造業や建設業の方 従来型ERPをお使いの方 これらに当てはまる方におすすめの記事となっています。これを読めばIFSクラウドへ移行すべき理由がわかるだけでなく、経営改革の視点からIFS Cloudの価値を整理することができますよ。 従来型ERPの限界とIFS Cloud 製造業や建設業、航空・防衛、エネルギー、サービス業など、複雑な業務を抱える企業にとって、ERPシステムは単なる基幹システムではなく、経営そのものを支えるインフラとなっています。 しかし近年、多くの企業で従来型ERPの限界が顕在化しています。 オンプレミス環境の維持コスト増大、システム老朽化、カスタマイズ肥大化による運用負荷、グローバル対応の難しさ、そしてDX推進への対応不足など、企業を取り巻く課題は年々深刻化しています。 そのような中で注目されているのが、クラウド型ERPへの移行です。そして、その中でも特に製造業やプロジェクト型ビジネスを展開する企業から高い評価を受けているのがIFS…

1 day ago

【2026年最新】IFS CloudとSAPを徹底比較|製造業に強いのはどっち?選定のポイントを解説

製造業を取り巻く環境は、ここ数年で大きく変化しています。原材料価格の高騰、サプライチェーンの不安定化、人手不足の深刻化、さらにはDXの加速など、企業にはこれまで以上に迅速かつ柔軟な意思決定が求められています。 こうした中で注目されているのが、企業の基幹業務を統合・最適化するERP(基幹業務システム)の再構築です。 その中で、多くの製造業が比較検討しているのが「IFS Cloud」と「SAP」です。いずれもグローバルで高い評価を受けているERPでありながら、その強みや設計思想は大きく異なります。 そのため、「どちらを選ぶべきか分からない」「自社に合うのはどちらなのか判断できない」といった悩みを抱える企業も少なくありません。 この記事では、そんなIFS CloudとSAPを「製造業」という視点から徹底比較し、それぞれの特徴や強み、導入時のポイントを分かりやすく解説します。 製造業の方 IFS CloudとSAPに興味がある方 グローバルERPの導入を検討している方 これらに当てはまる方におすすめの記事となっています。これを読めばIFS CloudとSAPの違いがわかるだけでなく、「どのような企業にどちらが適しているのか」がわかりますよ。 (more…)

2 weeks ago

【2026年最新】IFS CloudとDynamics 365の違いとは?機能・強みを比較解説

企業の基幹システムとして導入が進むクラウドERPの中でも、IFS CloudとMicrosoft Dynamics 365は世界的に高い評価を受けている代表的なソリューションです。 しかし、両者は同じERPでありながら設計思想や強みが大きく異なります。 この記事では、2026年時点の最新情報をもとに、IFS CloudとDynamics 365の違いを「機能」「強み」「向いている企業」という観点から徹底的に比較解説します。 IFS CloudやDynamics 365の導入を検討している方 社内のIT人材が不足している方 クラウドERPに興味がある方 これらに当てはまる方におすすめの記事となっています。これを読めばIFS CloudとMicrosoft…

2 weeks ago

【2026年版】製造業向けAI搭載グローバルERP:注目の次世代ソリューション6選

製造業におけるERPは、単なる基幹システムから「意思決定の中枢」へと進化しています。 特に2026年現在、AIの統合はもはやオプションではなく、競争力を左右する重要な要素となっています。 AIを搭載したERPは、従来の「可視化」から一歩進み、「予測」「最適化」「自動化」を実現し、企業の意思決定スピードと精度を飛躍的に向上させています。 この記事では、製造業向けに特化したAI搭載グローバルERPの中から、特に注目すべき6つのソリューションを徹底解説します。 AI搭載グローバルERPに興味がある方 製造業の方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば最新版のAI搭載グローバルERPがわかるのはもちろん、製造業におけるERPの選び方まで丸わかりですよ。 (more…)

2 weeks ago

【2026年最新】製造業向けグローバルERPシステムおすすめ10選

製造業を取り巻く環境は、グローバル競争の激化、サプライチェーンの複雑化、そしてデジタル化の加速により大きく変化しています。 その中でERP(統合基幹業務システム)は、単なる業務管理ツールではなく、経営の意思決定を支える中核システムへと進化しています。 特に2026年においては、「クラウド化」「AI活用」「グローバル対応」「生産現場との連携」が重要な選定ポイントとなっています。 ERPは企業の成長戦略そのものに直結するため、自社の規模・業種・将来展望に適したシステム選びが不可欠です。 この記事では、製造業向けの代表的なグローバルERPを10製品厳選し、それぞれの特徴を解説します。 グローバルERPシステムが気になる方 製造業の方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば主要なグローバルERPシステムが丸わかりですよ。 IFS ERP(IFS Cloud) IFS Cloudは、製造業に加えて設備管理やサービス業務まで一体的に管理できる統合ERPです。 特に「アセット集約型製造業」や「プロジェクト型製造」に強みを持っています。…

3 weeks ago

SQA(ソフトウェア品質保証)とは? 顧客満足度を高める品質維持の役割と重要性

ソフトウェア開発において品質の確保は単なる技術的課題ではなく、企業の信頼性や顧客満足度に直結する重要な要素です。 その中核を担うのがSQA(Software Quality Assurance:ソフトウェア品質保証)です。 SQAとは、開発プロセス全体を通じて品質を計画的に作り込み、維持・向上させるための活動を指します。 この記事ではそんなSQA(ソフトウェア品質保証)について、その概要や役割などを紹介していきます。 SQA(ソフトウェア品質保証)が気になる方 品質管理に興味がある方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばSQA(ソフトウェア品質保証)の特徴がわかるだけでなく、その重要性が丸わかりですよ。 SQA(ソフトウェア品質保証)とは SQA(ソフトウェア品質保証)とは、ソフトウェア開発において品質を計画的かつ継続的に確保するための活動全般を指します。 単に完成した製品の不具合を検出するテスト工程だけでなく、開発プロセス全体に関与し、品質を作り込む仕組みを整えることが重要な役割です。 具体的には、開発標準の策定や遵守状況の確認、レビューや監査の実施、品質指標の設定と分析、リスクの早期発見と対策などが含まれます。 これにより、開発の初期段階から問題の発生を未然に防ぎ、手戻りやコスト増大を抑えることが可能になります。…

3 weeks ago