Nuxt.jsはモダンなWebアプリケーションを開発するための、 Vue.jsベースのフレームワークです。
そんなNuxt.jsですがWebアプリケーションはもちろん、静的なWebサイトを作成することも可能。
Nuxt.jsなら、フロントエンドに必要な骨組みが揃っており開発が高速化できるといったメリットがあります。
この記事ではNuxt.jsのサンプルアプリを静的ファイルに出力し、それをFirebase Hostingにホスティングするための手順を解説していきます。
これらに当てはまる方におすすめの記事となっています。これを読めばWebサイト構築を効率化することができますよ。
まずは下記コマンドで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'
} ディレクトリが変更できたら下記コマンドで静的ファイルを出力します。
yarn run generate
publicフォルダに以下のファイルが出力されていればOKです。
200.html README.md _nuxt/ favicon.ico index.html
次にホスティング先のFirebaseの設定を進めていきます。
まずはFirebaseのサイトでプロジェクトを作成します。
今回は本運用はしないのでGoogle Analyticsは無効にします。
次にFirebaseをコンソールから操作するためのツールを下記コマンドでインストールします。
npm install -g firebase-tools
インストールが完了したら下記コマンドでFirebaseにログインします。
firebase login
認証画面が自動で立ち上がるのでログインします。
ログインが完了すると以下のような画面が表示されます。
次に下記コマンドでFirebaseの初期化を行います。
firebase init
今回はWebサイトのホスティングに利用するのでHostingを選択します。
選択はエンターではなくスペースキーなので注意してください。
先ほど作成したプロジェクトを使いたいのでexisting projectを選択します。
先ほど作成したプロジェクトを選択します。
publicフォルダはそのままでOKです。
今回はSSRモードにしているためNoを選択します。
Nuxt.jsで出力したindex.htmlと重複するためNoを選択します。
初期化が完了したら下記コマンドでFirebaseにデプロイします。
firebase deploy
下記のような画面が表示されればOKです。
先ほど表示されたHosting URLにアクセスします。
以下のような画面が表示されればOKです。
これでNuxt.jsで作成したWebサイトをFirebaseでホスティングできるようになりました！
Nuxt.jsでWebサイトを作ることによって、開発が効率的にスピーディーに行えるようになります。
dehaでは、５年ほど前から、ベトナムオフショア開発を行っています。
ベトナムオフショアに興味がある方や、本日紹介したNuxt.jsのようなフレームワークでのWeb開発を行いたい方は、ぜひお気軽にお問い合わせください。
企業のITアウトソーシング戦略において、「ニアショア」と「オフショア」はよく比較される2つの選択肢です。 どちらも業務の効率化やコスト削減を目的に活用されますが、それぞれに特徴があり、自社にとって最適な選択をするには、コスト、品質、コミュニケーションといった観点からの比較が欠かせません。 この記事では、ニアショアとオフショアの違いを徹底解説し、目的に応じた最適なアウトソーシング先の選び方をご紹介します。 オフショア開発に興味がある方 開発コストを抑えたい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばニアショアとオフショアの違いがわかるのはもちろん、オフショア開発のメリットも丸わかりですよ。 1. ニアショアとオフショアの基本的な違いとは？ 業務の効率化やコスト削減を目的として、多くの企業がアウトソーシングを活用していますが、その手法には「ニアショア」と「オフショア」という2つの選択肢があります。 これらは委託先の地理的な位置によって分類され、それぞれに特徴とメリットがあります。 まず「ニアショア」とは、自国の他地域、あるいは地理的・文化的に近い国や地域へ業務を委託するアウトソーシング形態です。 たとえば、日本の企業が北海道、九州、沖縄といった地方都市や、時差や文化の差が比較的少ない韓国や台湾などの近隣アジア諸国に業務を外注するケースがこれに該当します。 ニアショアの主なメリットは、コミュニケーションのしやすさや、時差の少なさ、また国内経済の活性化に貢献できる点です。 特に言語や商習慣の壁が小さいため、業務のやり取りがスムーズに進みやすいのが特徴です。…
ビジネスのオンライン化が進む中、予約システムの導入はさまざまな業種で必須ともいえる存在になっています。 業務効率化や顧客満足度の向上に寄与する予約システムですが、その機能や開発費用はどのようなものなのでしょうか。 この記事では、予約システムの概要や導入メリット、具体的な機能、そして開発費用の相場を解説します。 予約システムを導入したいとお考えの方 予約システムの費用相場が知りたい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば予約システムの機能や費用の相場がわかるのはもちろん、オフショア開発によってコストを抑える方法も丸わかりですよ。 (more…)
ビジネスを効率的に運営するうえで欠かせないのが「在庫管理」です。 しかし、多くの企業がこの在庫管理においてさまざまな課題を抱えているのが現実です。 手作業での記録ミス、在庫過多や欠品、データの属人化など、管理の煩雑さが業務全体に影響を与えるケースも少なくありません。 そこで注目されているのが「在庫管理システム」の導入です。 この記事では、在庫管理における課題からシステム導入のメリット、機能、そして導入費用の相場までを解説します。 在庫管理システムを導入したいとお考えの方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば在庫管理システムの導入メリットがわかるのはもちろん、オフショア開発での導入事例も交えて、より現実的な選択肢についてもわかりますよ。 (more…)
2025年におけるベトナムのデジタル環境は、急速に進化を遂げています。 国民のインターネット利用率は約78.8%、SNS利用者数は約7,620万人に達し、デジタル領域は日常生活の中で欠かせない存在となっています。 特に、SNSはベトナム国内の若者を中心に急成長を遂げており、企業のマーケティングにおいても強力なツールとして活用されています。 この記事では、2025年のベトナムにおけるデジタルの現状の他、SNSの利用状況、広告リーチ、各プラットフォームの成長トレンドなどを具体的なデータとともに紹介します。 ベトナムデジタル事情が気になる方 ベトナムオフショアが気になる方 これらに当てはまる方におすすめの記事となっています。これを読めば企業がベトナム市場でデジタルマーケティング戦略を立てる際に重要となるインサイトを得ることができますよ。 (more…)
請求システムを導入することで請求書作成の人的ミスを防ぎ、管理も楽に行うことができます。 この記事ではそんな請求システムの導入について具体的なメリットや開発費用などについて徹底解説していきます。 請求システムを導入したい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば請求システムについてわかるのはもちろん、開発にかかるコストまで丸わかりですよ。 (more…)
見積作成は多くの企業で重要なプロセスですが、手作業やエクセル管理では多くのミスの恐れがあり、人的負担も懸念されます。 そこでおすすめなのが見積作成システムの導入です。見積作成システムを導入することで業務の効率化を図ることができます。 この記事ではそんな見積作成システムについて導入メリットや費用などについて徹底解説していきます。 見積作成システムが気になる方 見積作成に多くの時間を費やしている方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば見積作成システムの導入メリットや必要性がわかるのはもちろん、DEHAソリューションズでの具体的コストなどについても丸わかりですよ。 (more…)