Firebaseを初めてすぐにデプロイできたので記録しておきます。
Vue.jsであらかじめ作成しておいたアプリのデプロイを
AWSのS3でホスティングするか迷っていましたが、せっかくなのでFirebaseを利用してみることにしました。
hostのPCに
npm install -g firebase-tools
※最初にDockerの中でやってしまって認証失敗とかしてたので、すっとホストマシンにインストールしました。時間3分しかないし!
CLIツールの認証を行います。これはfirebaseのプロジェクトを読み込んでいろいろしてくれるので最初に必要です。
firebase login
お使いのブラウザでログイン画面が立ち上がります。
利用したいアカウントをクリック!
CLIに戻ってプロジェクトを初期化します
firebase init
hostingを選択
もしくは firebase init hosting
とすると自動でhostingのinitフローに移ります
firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
/path/to/app
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. Hosting: Configure and deploy Firebase Hosting sites
=== 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.
? Select a default Firebase project for this directory: project-name (project-name-xxxxxxx)
=== 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 // Vuejsでビルドすると作成されるディレクトリを指定=dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes // VueがSPAなのでyes
? File dist/index.html already exists. Overwrite? No // 既存のプロジェクトなのでNo
i Skipping write of dist/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete!
デプロイします
firebase deploy
https://[プロジェクト名].firebaseapp.com/
でアクセス!
表示されましたね!