何番煎じだって感じの内容ですが、ちょっとVue周りの知見を得たかったのと、これらを使って試してみたい事があったのでやってみた。

今回はNuxtでgenerateしたhtml,css,jsファイル類を置く所までの記事とするのでFirebaseはHostingのみ利用します。
Cloud Functionsを利用してサーバーレスでSSR(サーバーサイドレンダリング)もやっている方が居ますが、そこら辺は必要になったら試していこうと思います。

Dockerは個人的に開発機に直接コマンド類をインストールしていくのが嫌なので利用します。

 

Docker で環境を作る

適当な場所に作業用ディレクトリを作成しましょう。

そこにターミナルで移動してDockerfileを作成。

Dockerfileを以下のように編集して保存。

Dockerイメージのビルド。

Dockerイメージからコンテナを作成して実行。
後でブラウザからアクセスする為Macの80番ポートとコンテナの80番ポートを繋げておきます。

コンテナ内に入る。

ここに諸々インストールしていき開発環境を作って行きます。

Nuxt プロジェクトを作る
とりあえずサンプルとしてcreate-nuxt-appで適当にプロジェクトを作る。

途中で幾つかの項目に入力を求められるので今回は以下のように答えました。

さっそくnuxtの組み込みサーバーを起動してみます。

成功すると下記のような出力が出るはずです。

ブラウザでDocker内で起動したNuxtプロジェクトにアクセスしてみる。

ちゃんとHMRも効いているので編集内容が直ぐに反映されて捗ります。
後はこれをFirebaseにデプロイして動けばとりあえず完了です。
非常に簡単ですね!

 

Firebase で動かす

事前準備としてFirebaseに必要なGoogleアカウントを用意してください。
そして予めFirebase consoleにログインしておきましょう。


コンテナ内にFirebase toolをインストールします。

Firebaseにログインします。
コンテナ内でログインする為に --no-localhost オプションを付けます。

Firebaseに匿名情報を送信してよいか聞かれるので丁重にお断りする。

ターミナル上にURLが表示される。
最後にコードをここに入力してと言われているのでブラウザで認証を行います。

このURLをFirebaseにログインしているブラウザで開きましょう。


最後に出てきたコードをコピーしてターミナルに貼り付け。

ログイン完了です。

そしたらFirebase Hosting上にファイルをアップロードする準備を行います。
まず先程作ったNuxtプロジェクトを generate コマンドで静的ファイル化します。

生成されたファイルはdistというディレクトリ以下に作られています。

このファイル一式をFirebase Hostingにアップロードする事で世の中へ公開する事が出来ます。
さっそくfirebase-toolsを使ってデプロイして行きましょう。
まずはセットアップから。

すると幾つか質問されるので答えていきます。

今回はHostingのみ。

Firebase上にプロジェクトをまだ作っていなかったのでここで作ってしまいます。

公開するディレクトリをどうするか聞かれています。
Nuxtでgenerateされたファイル一式はdistディレクトリに展開されるのでそれを指定します。

SPAでいいのかって聞かれているのでYesと答える。

既にindex.htmlがあるけど上書きしていいかって聞かれるのでNoと答える。

終わったようです。

いよいよデプロイします。

おや、エラー。
どうやら勝手にFirebaseプロジェクトを作ってくれるわけじゃないらしいですね。

よくよく見るとinitコマンドの最後にFirebase Consoleから作ってねって出てますね…
仕方ないのでブラウザ上で作ります。

プロジェクト名は適当に、地域は日本、Cloud Firestoreは今回使用しないのでデフォルトのまま、Googleアナリティクスのデータ共有はとりあえずオフで。

この辺も特に必要ないのでチェックなしで作成します。

プロジェクトが作られました。
プロジェクトIDは「nuxt-7e934」だったので firebase use --add でこれを設定します。

ちゃんと候補に出てきているのでこれを選択します。

なんて別名つけんの?stagingとか?って聞かれたのでとりあえずstagingで。

設定されたらしい。
もう一度デプロイ。

上手く行ったようです。
https://nuxt-7e934.firebaseapp.com にアクセスしてみましょう。

タ━━━ヽ(∀゚ )人(゚∀゚)人( ゚∀)ノキ━━━!!

PWAは?


デフォルトではPWAに対応していないので対応をします。

nuxt.config.jsのmodules内に以下を追記。

もう一度generate & deploy。


スマホでアクセスしてみる。

ちゃんとホーム画面に保存して開くとブラウザのバーが消えてます。
オフラインでも表示されますし、ちゃんとPWAしてますね。
素晴らしい!

ここまでで一通りやりたかった事が全て出来ました。

 

まとめ

FirebaseのRealtimeDatabaseにデータを保存して利用すればこれだけでSPA×PWAのWEBアプリケーションを開発出来そうです。
Nuxtを利用すると最先端のWEBアプリ開発環境が非常に簡単に作れるのは便利ですね。

FirebaseもHostingだけじゃなくてWEBプッシュやFunctionsでちょっとしたバックエンドの処理を書いてみたり出来るので今後の為にも利用しておいて損は無いでしょう。
サーバーレスも流行りですし。

またNuxtの代わりにionicとか使ってiOSやAndroidアプリを作ってみるのも面白そうです。
私はこれらを使ってJSON Schemaで画面やデータ等の設計をするだけで、管理画面、API、HTML5のスマホサイトが出来上がるようなプロトタイプ制作ツールを作ってみようかと思います。

長々と書いてきましたが、簡単なWEBアプリを作るのにこの構成は結構いいのでは?と思ったので今回記事にしてみました。
よかったらお試しください。

★会社紹介★

私達bravesoft(ブレイブソフト)は「最強のものづくり集団」を目指し、
新しいものへの果てしない挑戦を日々繰り広げております!
その中で一緒に働いてくれる仲間も積極採用中ですので、是非お問い合わせください!

<基本情報>
bravesoft オフィシャルホームページ
採用情報
受託開発紹介
UI/UXデザイン紹介

<自社事業>
eventos
Live!アンケート
Appvisor Push