LoginSignup
1
1

More than 5 years have passed since last update.

Firebase Hosting出会って3分でDeploy

Posted at

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/

でアクセス!

表示されましたね!

1
1
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
1
1