Nuxt × TypeScript でTodoListとユーザ認証を実装してFirebase Hostingにデプロイ [Tutorial - Part 4/5 - Firebase Hostingにデプロイ]

概要

Nuxt×TypeScriptでTodoListを実装し、Firebase Hostingにデプロイするチュートリアルです。簡単なCRUD(Create, Read, Update, Delete)アプリを作成することで、NuxtとTypeScriptの概要を掴んでもらうことが目的です。

Part3までに、下記のようなTodoListアプリを実装しました。

ソースコードは下記です。

tkugimot/nuxt-ts-app-tkugimot

本Part4では、Firebase Hostingへのデプロイを行います。

と言っても、下記のチュートリアルに沿ってやるだけです。

サイトをデプロイする  |  Firebase

完成物は下記です。(しばらくしたら消すと思います。)

nuxt-ts-app-tkugimot

1. firebase-toolsのインストール

$ npm install -g firebase-tools

2. firebase login で認証

$ firebase login
? Allow Firebase to collect anonymous CLI usage and error reporting information? Yes

ブラウザに飛ばされてGoogleのアカウント選んだりなんだりすると下記の画面になります。

3. GUIからプロジェクトの追加

下記から任意の名前でプロジェクトを作成します。

Sign in - Google Accounts

4. firebase init でプロジェクトの作成

Firebase Hosting, 3で作成したプロジェクト, dist を選択/入力します。

$ firebase init

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

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

  /Users/********/workspace/nuxt/nuxt-ts-app-tkugimot

? 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

=== 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.
...

5. ソースコードのビルド

$ npm run build
$ npm run generate

distの中に色々作成されます。

6. デプロイ！

$ firebase deploy

以上で終わりです。めちゃ簡単。