![見出し画像](https://assets.st-note.com/production/uploads/images/11412931/rectangle_large_type_2_12358d6551822f79093ff9b3c2b3e1b9.png?width=1200)
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アプリを実装しました。
ソースコードは下記です。
本Part4では、Firebase Hostingへのデプロイを行います。
と言っても、下記のチュートリアルに沿ってやるだけです。
完成物は下記です。(しばらくしたら消すと思います。)
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からプロジェクトの追加
下記から任意の名前でプロジェクトを作成します。
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
以上で終わりです。めちゃ簡単。
この記事が気に入ったらサポートをしてみませんか?