deha magazine / システム開発 / Nuxt.jsで作成したWebサイトをFirebaseでホスティングする
Nuxt.jsで作成したWebサイトをFirebaseでホスティングする
2020/02/07
![](https://deha.co.jp/magazine/wp-content/uploads/2020/01/web-hosting-min.jpg)
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を選択します。
![](https://deha.co.jp/magazine/wp-content/uploads/2020/01/create-nuxt-app.png)
開発用サーバーを起動して動作確認
アプリが作成できたら下記コマンドで開発用のサーバーを立ち上げます。
cd nuxt-app-firebase yarn run dev
以下のような画面が表示されればOKです。
![](https://deha.co.jp/magazine/wp-content/uploads/2020/01/nuxt-app-top.png)
静的ファイルの出力先のディレクトリを変更
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のサイトでプロジェクトを作成します。
![](https://deha.co.jp/magazine/wp-content/uploads/2020/01/firebase-project-first.png)
今回は本運用はしないのでGoogle Analyticsは無効にします。
![](https://deha.co.jp/magazine/wp-content/uploads/2020/01/firebase-app-ga.png)
Firebase CLIをインストール
次にFirebaseをコンソールから操作するためのツールを下記コマンドでインストールします。
npm install -g firebase-tools
Firebaseにログイン
インストールが完了したら下記コマンドでFirebaseにログインします。
firebase login
認証画面が自動で立ち上がるのでログインします。
ログインが完了すると以下のような画面が表示されます。
![](https://deha.co.jp/magazine/wp-content/uploads/2020/01/firebase-login-successful.png)
Firebaseの初期化
次に下記コマンドでFirebaseの初期化を行います。
firebase init
今回はWebサイトのホスティングに利用するのでHostingを選択します。
選択はエンターではなくスペースキーなので注意してください。
![](https://deha.co.jp/magazine/wp-content/uploads/2020/01/firebase-feature.png)
先ほど作成したプロジェクトを使いたいのでexisting projectを選択します。
![](https://deha.co.jp/magazine/wp-content/uploads/2020/01/firebase-project-option.png)
先ほど作成したプロジェクトを選択します。
![](https://deha.co.jp/magazine/wp-content/uploads/2020/01/firebase-project-type.png)
publicフォルダはそのままでOKです。
![](https://deha.co.jp/magazine/wp-content/uploads/2020/01/firebase-public.png)
今回はSSRモードにしているためNoを選択します。
![](https://deha.co.jp/magazine/wp-content/uploads/2020/01/firebase-spa.png)
Nuxt.jsで出力したindex.htmlと重複するためNoを選択します。
![](https://deha.co.jp/magazine/wp-content/uploads/2020/01/firebase-index-no.png)
Firebaseに静的ファイルをデプロイ
初期化が完了したら下記コマンドでFirebaseにデプロイします。
firebase deploy
下記のような画面が表示されればOKです。
![](https://deha.co.jp/magazine/wp-content/uploads/2020/01/firebase-deploy-complete.png)
Firebase Hostingにホスティングされているか確認
先ほど表示されたHosting URLにアクセスします。
以下のような画面が表示されればOKです。
![](https://deha.co.jp/magazine/wp-content/uploads/2020/01/nuxt-app-top.png)
終わりに
これでNuxt.jsで作成したWebサイトをFirebaseでホスティングできるようになりました!
Nuxt.jsでWebサイトを作ることによって、開発が効率的にスピーディーに行えるようになります。
dehaでは、5年ほど前から、ベトナムオフショア開発を行っています。
ベトナムオフショアに興味がある方や、本日紹介したNuxt.jsのようなフレームワークでのWeb開発を行いたい方は、ぜひお気軽にお問い合わせください。