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開発を行いたい方は、ぜひお気軽にお問い合わせください。
ソフトウェア開発の世界において、「技術的負債（Technical Debt）」という言葉は数十年前から馴染みのある概念です。スピードを優先した不適切なコードや設計が、将来的に修正コストやバグの増大を招くことは、エンジニアやマネージャーにとって共通認識となっています。 しかし、AI活用が急速に進む現代において、技術的負債よりもはるかに深刻で、目に見えにくい新たなリスクが蓄積されつつあります。それが制約の負債（Constraint Debt）」です。 本記事では、最新テクノロジーの実装において見落とされがちなこの概念と、その対策について解説します。 (more…)
国内IT人材不足、円安の長期化、開発スピードへの要求高度化。 こうした環境変化の中で、オフショア開発は一時的な選択肢ではなく、日本企業の開発戦略における「前提条件」となりつつあります。 本記事では、2025年に実施された各種調査データを基にした『オフショア開発白書』の内容を整理しながら、2026年に向けたオフショア開発市場の動向を読み解いていきます。 オフショア開発に興味がある方 開発効率を上げたい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばオフショア開発の最新の動向が丸わかりですよ。キーワードは「拡大」「成熟」「戦略化」です。 関連記事： 【2025年】『オフショア開発白書』から見る市場動向 【2024年版】オフショア開発国のランキング｜委託先国の特徴とは？ 【2023年版】オフショア開発白書から読みとくオフショア開発の現状と最新の市場動向 (more…)
2026年のベトナムは、東南アジアの中でも特に「デジタル化が成熟段階に入りつつある国」として注目を集めています。 スマートフォンの普及、ソーシャルメディアの浸透、高速通信インフラの整備、そして若く人口ボーナス期にある社会構造が相まって、デジタル技術はすでに人々の日常生活、経済活動、情報収集の中核となっています。 この記事では、DataReportal「Digital 2026 Vietnam」レポートをもとに、2026年のベトナムにおけるデジタルデバイス、インターネット、ソーシャルメディア、主要プラットフォームの利用状況とその背景、そして今後の方向性について総合的に解説していきます。 ベトナムのデジタルの最新情報が気になる方 社内のIT人材が不足している方 ベトナムのIT人材が気になる方 これらに当てはまる方におすすめの記事となっています。これを読めばベトナムのデジタルの最新情報や動向が丸わかりですよ。 関連記事： 【2024年版】ベトナムのDX市場の状況と動向 2025年のベトナム デジタル状況、最新動向 (more…)
ソフトウェア開発の歴史において、エンジニアの核心的な能力は「コードを書く力」で測られてきました。しかし、AI技術が飛躍的に進歩し、人間よりも速く一貫性のあるコードを生成できるようになった今、その価値の軸が大きくシフトしています。 これからのエンジニアに求められるのは、単なるプログラミングスキルではなく、いかに高度なAI活用を行い、システムに何を許し、何を許さないかという「制約」を正しく設計できるかという点にあります。 (more…)
クラウドコンピューティングは、企業や政府のデジタルトランスフォーメーション（DX）を支える基盤です。 データ保存、アプリケーション実行、AI・データ分析など、あらゆるITインフラがクラウドを通じて提供されるようになった現代において、クラウド市場の動向は企業戦略の要です。 2026年は世界的に5G、AI、IoT（モノのインターネット）、機械学習などがクラウド活用を加速させ、市場全体が大きく成長すると予測されています。 この記事では、2026年のクラウド市場について世界市場の最新シェアや日本国内のクラウド市場シェアとその特徴などを紹介していきます。 企業の IT戦略・DX推進担当者の方 クラウド関連ビジネスに関わる方 これらに当てはまる方におすすめの記事となっています。これを読めば2026年のクラウド市場のシェアやトレンドが丸わかりですよ。 (more…)
2030年に向けて、日本のIT市場は単なる成長産業ではなく、社会全体を支える基盤（インフラ）としての性格を一層強めていくと考えられます。 背景には、世界規模で進行するデジタル化、AI技術の急速な発展、クラウドサービスの定着、そして日本固有の人口減少・地方分散という社会構造の変化があります。 この記事では、世界のICT市場動向を起点に、日本のソーシャルメディア、メタバース、クラウド、データセンター、情報セキュリティといった分野が、2030年に向けてどのように変化していくのかを多角的に整理していきます。 IT市場の未来が気になる方 AI技術がどのように発展していくか気になる方 これらに当てはまる方におすすめの記事となっています。これを読めば日本のIT市場の未来が丸わかりですよ。 (more…)