技術開発Vue.jsjavascriptJSNuxt.jsDockerFirebaseSPAPWAフロントエンドDocker×Nuxt×Firebaseを使ってSPAxPWAのWEBアプリ開発環境を構築する何番煎じだって感じの内容ですが、ちょっとVue周りの知見を得たかったのと、これらを使って試してみたい事があったのでやってみた。今回はNuxtでgenerateしたhtml,css,jsファイル類を置く所までの記事とするのでFirebaseはHostingのみ利用します。Functionsを利用してサーバーレスでSSR(サーバーサイドレンダリング)もやっている方が居ますが、そこら辺は必要になったら試していこうと思います。Dockerは個人的に開発機に直接コマンド類をインストールしていくのが嫌なので利用します。環境を作る適当な場所に作業用ディレクトリを作成しましょう。~/Documents/docker/nuxtそこにターミナルで移動してDockerfileを作成。DockerfileDockerfileを以下のように編集して保存。80Dockerイメージのビルド。66.3MBDockerイメージからコンテナを作成して実行。後でブラウザからアクセスする為Macの80番ポートとコンテナの80番ポートを繋げておきます。nuxt-imageコンテナ内に入る。#ここに諸々インストールしていき開発環境を作って行きます。プロジェクトを作るとりあえずサンプルとしてcreate-nuxt-appで適当にプロジェクトを作る。nuxt途中で幾つかの項目に入力を求められるので今回は以下のように答えました。yarnさっそくnuxtの組み込みサーバーを起動してみます。dev成功すると下記のような出力が出るはずです。ブラウザでDocker内で起動したNuxtプロジェクトにアクセスしてみる。HMRも効いているので編集内容が直ぐに反映されて捗ります。後はこれをFirebaseにデプロイして動けばとりあえず完了です。動かす事前準備としてFirebaseに必要なGoogleアカウントを用意してください。consoleにログインしておきましょう。toolをインストールします。firebase-toolsFirebaseにログインします。オプションを付けます。--no-localhostFirebaseに匿名情報を送信してよいか聞かれるので丁重にお断りする。Noターミナル上にURLが表示される。最後にコードをここに入力してと言われているのでブラウザで認証を行います。here:このURLをFirebaseにログインしているブラウザで開きましょう。最後に出てきたコードをコピーしてターミナルに貼り付け。taro.hoge.braver@gmail.comログイン完了です。Hosting上にファイルをアップロードする準備を行います。コマンドで静的ファイル化します。13.85s.生成されたファイルはdistというディレクトリ以下に作られています。Hostingにアップロードする事で世の中へ公開する事が出来ます。firebase-toolsを使ってデプロイして行きましょう。initすると幾つか質問されるので答えていきます。rules今回はHostingのみ。project]Firebase上にプロジェクトをまだ作っていなかったのでここで作ってしまいます。dist公開するディレクトリをどうするか聞かれています。Nuxtでgenerateされたファイル一式はdistディレクトリに展開されるのでそれを指定します。ySPAでいいのかって聞かれているのでYesと答える。n既にindex.htmlがあるけど上書きしていいかって聞かれるのでNoと答える。--add終わったようです。--addおや、エラー。勝手にFirebaseプロジェクトを作ってくれるわけじゃないらしいですね。Consoleから作ってねって出てますね...仕方ないのでブラウザ上で作ります。Firestoreは今回使用しないのでデフォルトのまま、Googleアナリティクスのデータ共有はとりあえずオフで。この辺も特に必要ないのでチェックなしで作成します。プロジェクトが作られました。nuxt-7e934ちゃんと候補に出てきているのでこれを選択します。staging)なんて別名つけんの?stagingとか?って聞かれたのでとりあえずstagingで。(nuxt-7e934)設定されたらしい。https://nuxt-7e934.firebaseapp.com上手く行ったようです。アクセスしてみましょう。゚∀)ノキ━━━!!PWAは?デフォルトではPWAに対応していないので対応をします。'@nuxtjs/pwa'nuxt.config.jsのmodules内に以下を追記。