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

Vue.js + Firebaseで自己紹介用の静的サイトを作ってみた 第1弾 環境構築編

More than 1 year has passed since last update.

はじめに

Vue.jsとFirebaseで自己紹介用の静的サイトをポートフォリオで作っていたのですが備忘録を残そうと思って2ヶ月が経過してしまって細かいところがうろ覚えになってしまったため、再度復習のためと環境を最新の状態で実践して他の人でも簡単に静的サイトを作れるようにしようかなあと思ったのがキッカケで記事にしました。
ポートフォリオとして何を作るか悩んでる際、参考にしていただけると幸いです。

2か月前に実際作ったのが以下です。
〇ポートフォリオ
https://vue-project-16285.firebaseapp.com/
〇GitHubリポジトリ
https://github.com/stkzk3110/portfolio

続きの記事はこちら・・・(作成中)
Vue.js + Firebaseで自己紹介用の静的サイトを作ってみた 第2弾 実装編(ルーティング)
Vue.js + Firebaseで自己紹介用の静的サイトを作ってみた 第3弾 実装編(ヘッダー、フッター、SNSリンク設置)

環境構築編

・バージョン

$ node -v
v12.1.0
$ npm -v
6.9.0

・VueCLIインストール

$ npm install -g @vue/cli
$ vue -V
3.7.0
$ vue create vue_firebase-project
$ cd vue_firebase-project
$ npm run serve

vue create実施時にdefaultかmanualか設定出来ますが特に指定無ければdefaultでそのままやりましょう。
http://localhost:8080/にアクセスすると以下が表示されます。

IMG_9955.PNG

参考
Vue-CLI(公式ドキュメント)

$ npm run build

今までは./publicフォルダ配下のindex.htmlが実際動いていたが、./distフォルダが作られ、./distフォルダ配下のindex.htmlが実際動くようになる。

・Firebase
https://console.firebase.google.com/u/0/?hl=ja
Firebaseコンソールを開いて、プロジェクトを追加。
ガイドも分かりやすいのでガイドに従って設定していきます。
設定が終わるとプロジェクトが作成されます。

Firebaseは、AuthenticationやDatabase,Storageなと複数機能を持ってますが今回は静的サイトの作成のため、Hostingを使います。

Firebase ツールをインストール:

$ npm install -g firebase-tools

Google にログインします:

$ firebase login

プロジェクトを開始:

$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /Users/KazukiSaito/vue_firebase-project

? Which Firebase CLI features do you want to set up for this folder? Press Space
 to select features, then Enter to confirm your choices. 
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules

=== Project Setup
? Select a default Firebase project for this directory: 
  [don't setup a default project] 
  nuxt-project-***** (nuxt-project) 
❯ vue-firebase-project-***** (vue-firebase-project) 
  vue-project-***** (vue-project) 
  [create a new project] 
=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? (public) dist
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) N
? File dist/index.html already exists. Overwrite? (y/N) N

使いたい機能をSpaceキーで選択。(複数選択可能)
今回は前述で言った通り、静的サイトの作成のため、Hostingのみとします。
その後、プロジェクトを選択。(先ほど作成したプロジェクトを選択)
公開に利用するディレクトリ名の入力が求められるので先ほどnpm run buildで作ったdistディレクトリを入力。
その後、公開するページはindex.htmlかどうかと聞かれるがそのままNoとします。
今あるdist/index.htmlを上書きするか聞かれたがこれもNoとします。

ここまででルートディレクトリに.firebaserc、firebase.jsonが出来ていることが確認できます。

ウェブサイトをデプロイ:

$ firebase deploy
=== Deploying to 'vue-firebase-project-*****'...

i  deploying hosting
i  hosting[vue-firebase-project-*****]: beginning deploy...
i  hosting[vue-firebase-project-*****]: found 9 files in dist
✔  hosting[vue-firebase-project-*****]: file upload complete
i  hosting[vue-firebase-project-*****]: finalizing version...
✔  hosting[vue-firebase-project-*****]: version finalized
i  hosting[vue-firebase-project-*****]: releasing new version...
✔  hosting[vue-firebase-project-*****]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/vue-firebase-project-*****/overview
Hosting URL: https://vue-firebase-project-*****.firebaseapp.com

https://vue-firebase-project-*****.firebaseapp.comにアクセスするとhttp://localhost:8080/にアクセスした時と同様の内容がブラウザに表示されていることが確認できるはずです。

まとめ

ここまでで環境構築は完了です。
以下に続く・・・
Vue.js + Firebaseで自己紹介用の静的サイトを作ってみた 第2弾 実装編(ルーティング)

○リポジトリ
https://github.com/stkzk3110/vue_firebase-project
今回のコミット部分
・Create project in Vue CLI
・Add Firebase

cube_3110
自動車大国である地元の愛知から脱却し、現在都内で働いているエンジニア。 エンジニア5年目に突入。 今は某SaaS開発会社でRails触ってます。 Twitterでも積極的に発信してるのでもし良かったら絡んでください。
https://vue-project-16285.firebaseapp.com
commew
ゆるく、つながる、たすけあう 困りごとの共有や相談、学習報告などを通して「ひとりで働いていても孤独ではない」空間へ
https://commew.net/
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
ユーザーは見つかりませんでした