0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Vue.js初心者お勉強-その2- firebase編

Posted at

前回までのおさらい

Vue.js初心者お勉強-その1- - Qiita

firebaseのHelloWorldと、Vue.jsのHelloWorld + 構成を軽く勉強しました。今回はVue.jsをfirebaseにデプロイします。

写経する記事

こちらです。

【Firebase】Vue.jsで作ったWebアプリを公開する方法を解説【初心者向け】 | Public Constructor

手順と図解

…といっても本当に簡単であった。

1. Firebaseコンソールにログインし、画面の指示に従ってプロジェクトを作成。

image.png

2. 作成されたプロジェクトのSDKを、vue.jsのルートのindex.htmlに張り付け

image.png

image.png

3. firebase initコマンドで、vue.jsのプロジェクトをfirebase化

注意点として、ここで指定するfirebaseの公開ディレクトリ名は、次でビルドするvue.jsの公開ディレクトリ名と一致させる必要がある。規定だとpublicとなるが、変更する場合は別の名前を入力する。

4. npm run buildでvue.jsのプロジェクトをビルド

前回のエントリで実施した通り&言及した通りだが、config/index.jsの設定を変更することで、公開ディレクトリ名を設定することができる。今回はpublicに設定する

image.png

5. firebase deployコマンドで、firebase化されたvue.jsのプロジェクトをfirebaseにデプロイ

終わり。

正直、非常に簡単にWebアプリがデプロイ出来て驚いている。これなら、簡単なアプリを手元でサクッと開発して、サクっとWebに公開できるなと思った(もちろん、深堀するとお作法などあるかもしれないが)

今後の計画

vue.js と firebaseの関係はこれまでとして、次はいよいよvue.jsでやりたいことをやっていくことにします。

0
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?