この内容について
この内容は、Vue.jsを使ったプロジェクトを作成して、
Firebaseにデプロイするまでをまとめた記事になります。
Vue.jsとは
Vue.jsはUI構築のためのJavaScriptプログレッシブフレームワークのこと
Vue.js公式サイト
Firebaseとは
Googleが提供しているモバイルおよびWebアプリケーションのバックエンドサービスのこと
Firebase
手順
Node.jsのインストール
Node.jsの公式サイトにアクセスし、推奨版をインストールします。
(Node.js公式)[https://nodejs.org/ja/]
VueCLIのインストール
ターミナルを開き、VueCLIをグローバルインストールします。
npm install -g @vue/cli
パスを通す
.bash_profileを開き、node_moduleにパスを通します。
なお、Users/usernameのusernameを自分のユーザ名に変更してください。
open ~/.bash_profile
export PATH="$PATH:/Users/username/.npm-global/bin"
source ~/.bash_profile
Vue.jsプロジェクトの作成
vue createコマンドでVue.jsプロジェクトを作成します。
vue create vueapps
下記のような表示が出るので、defaultを選択してEnterを押下。
Vue CLI v4.4.1
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
Manually select features
Vue.jsプロジェクトをローカルで確認
npm run serveでVue.jsプロジェクトをローカルで起動します。
npm run serve
ローカル環境でアプリが起動されます。http://localhost:8080/
今後の開発もこちらのコマンドを使用しながらやっていきます。
このコマンドは常に実行されているので、開発を中断する時は、
「control」+「C」で実行をキャンセルしておきましょう。
Firebaseプロジェクトの作成
1. Googleのアカウントを作成し、Firebaseのサイトへアクセスします。
2. コンソールへ移動
3. コンソール画面で新規プロジェクトを作成
4. プロジェクト名を入力
5. アナリティクスの有効有無を選択する
6. プロジェクトの作成が完了
詳しいやり方は、こちら を参考にしてください。
FirebaseCLIのインストール
ターミナルを開き、FirebaseCLIをグローバルインストールします。
npm install -g firebase-tools
Firebaseにデプロイ
1. コマンドでFirebaseにログインする
firebase login
2. Allow Firebase ~ と表示されるので、Yを入力し、Enter
3. ブラウザが開かれるので、使用するアカウントを選択する
4. FirebaseへのGoogleアカウントのアクセスを許可する
5. Firebaseへのログインが完了する
6. 作成したプログラムのフォルダ配下でプログラムを初期化
firebase init
7. サービスの選択 Hostingを選択する
8. デプロイ先のプロジェクトを選択する
9. 使用するパプリックディレクトリの指定
What do you want to use as your public directory?と聞かれるので、「dist」と入力し、Enter。
その後の質問は全てEnter。
10. Vue.jsプロジェクトをビルドする
npm runコマンドでVue.jsプロジェクトをビルドします。
npm run build
11. Firebaseにデプロイ
firebase deployコマンドでFirebaseにデプロイする。
firebase deploy
詳しいやり方は、こちら を参考にしてください。
まとめ
Vue.jsとFirebaseを駆使すれば、比較的簡単にシステムを
構築していけるのでこの技術スタックはオススメです(^^)
Vue.jsの需要はかなり高まっている印象もありますので、
この記事を見ながら一度触ってみると良いでしょう。
この記事が良いと思った方は、LGTMをしていただければ嬉しいです！
フォローも是非お願い致します(^^)