【Vue.js】Vue.jsアプリをFirebase Hostingにデプロイしてみた

はじめに

こんにちは、がんがんです。

鹿児島の勉強会「かごもく」にて発表することになりました。

勉強会でお話しすることになりました。

かごもく #31 Firebase https://t.co/095xCluZwv

— GANGAN (@gangan_nikki) 2020年4月3日

発表の題材としてFirebase Hostingにしたのですが、何をデプロイするかを悩みました。
普段はReact.jsですが、気分を変えるためにVue.jsのアプリをデプロイしてみようと思いました。

今回はFirebase HostingにVue.jsアプリをデプロイする手順についてもまとめておきます。

目次

目的

• Vue.jsをFirebase Hostingにデプロイしてみる

コード

全体のコードはこちらに置いております。
github.com

環境構築

まずは環境構築を行います。いつもながらDockerを用いた環境を構築します。
環境構築については基本的にこちらを参照頂けると幸いです。
gangannikki.hatenadiary.jp

変更した部分はDockerfileのみです。

Dockerfile

FROM node:10.19.0-alpine

WORKDIR /usr/src

RUN npm i -g npm \
    npm i -g @vue/cli \
    npm i -g firebase-tools \
    && rm -rf /var/lib/apt/lists/*

Firebaseプロジェクトの設定は以前作成したものを使うので今回は省略します。

Create Vue.js App

次にDockerを起動し、vue createを行っていきます。
今回は起動用のShellを用意しています。

# on ホストOS
$ sh docker build
$ sh docker start

# on Docker
$ vue create .

今回は聞かれる質問には基本的にyesで回答しました。
しばらくすると作成が終了するので、npm run surveでlocalhostを確認します。下記画面が表示されていればOKです。

http://localhost:8080へのアクセス結果

firebaseのセットアップ

次にfirebaseサイドの設定を行います。

# on Docker

$ firebase login --no-localhost
$ firebase init hosting

firebaseにデプロイ

先ほど作ったvue create appをfirebaseにデプロイします。build先としてはdistに設定しています。

# on Docker

$ npm run build
$ firebase deploy

# npm使用
$ npm run deploy

デプロイ後、下記の画面が表示されたらOKです。

firebas hostingでの表示確認結果

おわりに

今回はVue.jsアプリをFirebase Hostingにデプロイしてみました。
最近はReact.jsやNext.jsを触っていることが多いですが、機会を見つけてVue.jsもちょこちょこ触っていきたいと思います。