Help us understand the problem. What is going on with this article?

Vue.jsのプロジェクトをFirebaseでデプロイする

この記事はラクス Advent Calendar 2019の7日目の記事です。

はじめに

今まで、CDNを用いたVue.jsの実装しか行ったことがなく、プロジェクトを作成して実装したことがありませんでした。
今回はVue.jsのプロジェクトを作成し、Firebaseを用いてデプロイする方法について学習したのでご紹介します。
こちらの書籍を用いて学習を行いました。

Vue.jsとFirebaseで作るミニWebサービス

Vue.js, Firebaseについての説明は割愛します。

開発環境のセットアップ

npm

npm:Node.jsのパッケージ管理ツール
npmコマンドを使用するため、事前にNode.jsをインストールしておいてください。

vue-templateのダウンロード、セットアップ

今回はWebpack-simpleテンプレート(Vue.jsのプロジェクトを始めるうえでシンプルな設定にまとめてあるテンプレート)を使用するためにvue-cliをインストールします。

> npm install -g vue-cli

インストールが完了したらvueコマンドが使えるかヘルプコマンドで確認してみてください。

> vue -h

作業するフォルダに移動した後、次のコマンドを実行してプロジェクトを作成します。

> vue init webpack-simple mymarkdown(プロジェクト名)

この後、いくつか質問が表示されますが、「User sass?」以外は無記入で大丈夫です。

次にこちらを実行してください。

> cd mymarkdown
> npm install
> npm run dev

すると、こちらの画面がブラウザ上で表示されます。

12.PNG

これでVue.jsを用いてWebサイトを表示することができます。

Firebase

Firebaseを使用するために、事前にFirebaseのアカウントを作成しておいてください。
Firebase

まずはFirebase上でプロジェクトを作成します。
プロジェクト名を入力し、続行をクリックします。
Googleアナリティクスのアカウント名を入力し、「プロジェクトを作成」をクリックします。

1.PNG
13.PNG

2.PNG

続いて、FirebaseをWebサイトで使用するために3つあるアイコンの右のボタンをクリックしてください。

3.PNG

すると、モーダルが表示されるので、そこに表示されるコードをコピーしてindex.htmlにペーストしてください。

4.PNG

こちらはWebサイト上でFirebase上のデータを扱うための設定になっています。
firebaseConfig の内容は伏せさせていただきます。

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>mymarkdown</title>
    </head>
    <body>
      <div id="app"></div>
      <script src="https://www.gstatic.com/firebasejs/4.8.2/firebase.js"></script>
      <script>
        // Your web app's Firebase configuration
        var firebaseConfig = {
          apiKey: ○○,
          authDomain: ○○,
          databaseURL: ○○,
          projectId: ○○,
          storageBucket: ○○,
          messagingSenderId: ○○,
        };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
      </script>
      <script src="/dist/build.js"></script>
    </body>
  </html>

続いて、firebase-toolsをインストールします。
「npm run dev」で動いているプロジェクトを「Ctrl + c」で停止してから実行してください。

> npm install -g firebase-tools 

インストールが完了したらログインを行います。

> firebase login

実行するとブラウザが開き、次のような画面が表示されます。

7.PNG
8.PNG

OKをクリックして、こちらの画面が表示されたら完了です。

9.PNG

コンソールに戻り、initを実行します。
どの機能を使用するか聞かれるので、スペースキー、方向キーを使用して質問の回答を選択します。

> firebase init

「Are you ready to proceed?」 yes
「Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.」 Hosting:...
「Please select an option」 Use an existing project
「Select a default Firebase project for this directory」 該当するプロジェクト名
「What do you want to use as your public directory?」 dist
「Configure as a single-page app (rewrite all urls to /index.html)?」 No

デフォルトのままだと、各種パスが開発用の状態のままなので、webpack.config.jsの変更を行い、ホスティングの準備を行います。

8: publicPath: '/'
~~~
78: devServer: {
79: contentBase: 'dist', //追加
80: historyApiFallback: true,
~~~
100:sourceMap: false,

/dist/index.htmlがfirebase-cliによって作成されているので削除してください。
そして、/index.htmlをdistディレクトリに移動して、index.htmlを次のように変更してください。

        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
      </script>
      <script src="./build.js"></script>
    </body>

デプロイ

各種設定変更後、デプロイするファイルを作成するために次のコマンドを実行します。

> npm run build

ビルドが成功したらデプロイをするために次のコマンドを実行してください。

> firebase deploy

成功した場合、「Deploy complete!」というメッセージと公開URLが表示されます。
公開されたURLにアクセスすると、次のような画面が表示されます。

10.PNG

今回はここまでです。

おわりに

今回はVue.jsで作成したプロジェクトをFirebaseでデプロイするところまで紹介しました。
FireBaseをほとんど触ったことがなかったので、少し時間がかかってしまいましたが、何とかデプロイまで完了しました。
プロジェクトを作成したので、紹介した書籍の続きのGoogleアカウントを用いたログイン機能やメモ機能の実装を行い、それについて記事を作成したいと思います。

y_kwmt
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした