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開発を行いたい方は、ぜひお気軽にお問い合わせください。
現代のビジネス環境では、迅速な意思決定と効率的な業務運営が求められます。その中で、企業の業務プロセスをデジタル化するために、カスタムアプリの開発が重要な役割を果たしています。 しかし、従来のアプリ開発は多くの時間とリソースを必要とし、専門的なプログラミングスキルを持つエンジニアが必要です。 この課題を解決する手段として注目されているのが、「ローコード」開発です。 この記事ではそんなローコード開発に関して、代表的なツールMicrosoft PowerAppsについて解説していきたいと思います。 Microsoft PowerAppsが気になっている方 ローコード開発を行いたい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばローコード開発で人気のMicrosoft PowerAppsについてその特徴が丸わかりですよ。 (more…)
近年、AI技術の進展とともに、企業のデジタルトランスフォーメーション（DX）推進が急務とされ、多くの企業がAIソリューションの開発を進めています。 オフショア開発におけるAIプロジェクトは、技術的な知見と効率的な体制が求められます。 この記事では、DEHAソリューションズでのAI開発事例について紹介し、それぞれのプロジェクトで実現されたユニークな機能や開発体制についてまとめます。 オフショア開発に興味がある方 AI開発を行いたい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばAI開発での具体的な事例が丸わかりですよ。 (more…)
2024年現在、米中摩擦や新型コロナウイルスによるサプライチェーン混乱の影響を受け、製造業の生産拠点としてASEAN地域の需要が急速に増加しています。 その中でも特に注目されるのが、安価な労働力と豊富な人材を持つベトナムです。日系企業はこうした環境を活用し、積極的にベトナムへの進出を進めています。 しかし同時に、ASEAN域内では人件費上昇や人材確保の難しさといった課題も浮上しており、それに対応するために製造現場の自動化やDX化への関心が高まっています。 そこでここではそんなベトナムのDX化について、現状をお伝えしていきたいと思います。 ベトナム進出をお考えの方 ベトナムのDX化に興味がある方 これらに当てはまる方におすすめの記事となっています。これを読めばベトナム進出の日系企業のDX化の現状がわかるのはもちろん、今後の予測も分かりますよ。 (more…)
近年、企業のデジタルトランスフォーメーション（DX）が進む中で、ITインフラの老朽化問題も無視できなくなってきました。 レガシーシステムから新しいプラットフォームへの移行、特に.NETなどの最新フレームワークを用いたマイグレーションは、ビジネスの成長に不可欠です。 しかし、こうしたマイグレーションにはコストやリソースの確保が難しいという課題も付きまといます。ここで注目されるのがオフショア開発の活用です。 この記事では、そんな.NETによるマイグレーション開発をオフショアで実施するメリットについて詳しく解説します。 オフショア開発に興味がある方 .NETでマイグレーション開発を行いたいとお考えの方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば.NETでのマイグレーション開発をオフショア開発で行うメリットはもちろん、注意点なども丸わかりですよ。 (more…)
近年、企業における生成AIの導入が進んでいますが、その中でも注目を集めるのがAIアシスタントです。 弊社のBIZASKは、OpenAIの技術を基盤にした法人向け生成AIチャットボットサービスで、企業の業務効率化を強力に支援します。 この記事では、BIZASKの特徴や料金プランについて詳しく解説します。 生成AIアシスタントサービスが気になる方 業務効率を上げたい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばBIZASKの特徴が丸わかりですよ。 (more…)
クラウド型販売管理システムは、企業の販売プロセスを効率的に管理・最適化するためのソリューションで、クラウド上で提供されるのが特徴です。 従来のオンプレミス型システムとは異なり、初期投資を抑え、運用コストを削減しながらも、常に最新の機能とセキュリティ対策を利用できる点が魅力です。 この記事では、クラウド型販売管理システムのメリットと導入のポイントについて詳しく解説します。 クラウド型販売管理システムに興味がある方 販売業務を行なっている方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばクラウド型販売管理システムに関して、そのメリットなども丸わかりですよ。 (more…)