この記事を見てすごく手軽に環境が作れそうだったのでやってみた。
準備
Node.jsのインストール
Chocolateyを使ってさくさくっと。
最新のLTSをインストール。
choco install nvm -y nvm install 10.16.3
Vue,jsのインストール
npm install -g @vue/cli
そのままプロジェクトの作成
vue create iine-firebase
Firebaseのアカウント作成
アプリのデプロイにHostingを利用するので、
アカウント作成後はHostingの初期設定まで行っておく。
手順は冒頭の記事を参考に。
Webアプリのデプロイ
C:\Users\hiyoriaya\Desktop\iine-firebase>npm run build
C:\Users\hiyoriaya\Desktop\iine-firebase>firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
C:\Users\hiyoriaya\Desktop\iine-firebase
Before we get started, keep in mind:
* You are initializing in an existing Firebase project directory
? 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: Configure and deploy Firebase Hosting sites ★Hostingを設定
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
i .firebaserc already has a default project, using iine-firebase.
=== 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? dist ★distを指定
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File dist/index.html already exists. Overwrite? Yes
+ Wrote dist/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
+ Firebase initialization complete!
C:\Users\hiyoriaya\Desktop\iine-firebase>firebase deploy
=== Deploying to 'iine-firebase'...
i deploying hosting
i hosting[iine-firebase]: beginning deploy...
i hosting[iine-firebase]: found 8 files in dist
+ hosting[iine-firebase]: file upload complete
i hosting[iine-firebase]: finalizing version...
+ hosting[iine-firebase]: version finalized
i hosting[iine-firebase]: releasing new version...
+ hosting[iine-firebase]: release complete
+ Deploy complete!
Project Console: https://console.firebase.google.com/project/iine-firebase/overview
Hosting URL: https://iine-firebase.firebaseapp.com
デプロイ後
Hostingで設定したドメインにアクセスするとちゃんとできていた。
Node,jsのインストールからデプロイまで10分くらいでできたのはなかなかすごい。
