Nuxt.jsとFirebaseとCloudFunctionsでWebアプリ開発 - 準備編

福岡から世界中の"むずかしい"を簡単にする株式会社[diffeasy](https://diffeasy.com)CTOの西[@_takeshi_24](https://twitter.com/_takeshi_24)です。

この記事はアドベントカレンダー「[diffeasyCTO西の24(にし)日連続投稿チャレンジ Advent Calendar 2019](https://qiita.com/advent-calendar/2019/diffeasy24)」の2日目の記事です。

この記事は「Nuxt.jsとFirebaseとCloudFunctionsでWebアプリ開発」シリーズとして、連載していきます。
Nuxt.jsとFirebaseなどを使ってWebアプリケーション開発にチャレンジしたい方、是非Qiitaアカウントか[twitterをフォロー](https://twitter.com/_takeshi_24)していただき、ツッコミやいいね！お願いします！

## Nuxt.js
一昨年のアドベントカレンダーで書いたこちらの記事「[Nuxt.js使ってみた](https://qiita.com/_takeshi_24/items/224d00e5a026dbb76716)」や去年のこちらの記事「[Nuxt v2とFirebase(CloudFirestore)でPWA対応Webアプリ開発](https://qiita.com/_takeshi_24/items/3ee051e1db1b3e8da106)」がありがたいことに今でもたくさん見られていてます。
非常に嬉しいのですが、ちょっと情報も古くなってきて、VuexFireなども最近メンテナンスされていないようので、改めてNuxt.jsのインストールとFirebaseを使った基本的な開発について説明します。

### Nuxt.jsをインストール
Nuxt.jsについてや、インストール手順など、[公式サイト](https://ja.nuxtjs.org/)にかなり詳細なドキュメントがあります。
「create-nuxt-app」スターターテンプレートを使ってインストールします。

前回の記事ではパッケージ管理ソフトとしてnpmを使っていましたが、今回はnpmよりインストールが速いと言われている[Yarn](https://yarnpkg.com/lang/ja/)を利用します。

node.jsやyarnのインストールはすでに完了している状態で説明をしていきますので、インストールがまだの方は、まずはそちらの手順もWeb上にありますので、そちらを参考にしてください。

1.nuxt-appでNuxt.jsのアプリを作成します。今回はnuxt-sampleという名前で作成します。
※後の手順でFirebaseをインストールするため、sampleディレクトリを作成し、sampleディレクトリの中で実行してください。

```terminal
yarn create nuxt-app nuxt-sample
```

2.必要なパッケージソフトがインストールされます。
3.完了したらプロジェクト名を聞かれます。先ほど入力した「sample」がデフォルトで表示されているので、そのままエンターして進みます。

```terminal
create-nuxt-app v2.12.0
✨  Generating Nuxt.js project in nuxt-sample
? Project name (nuxt-sample) 
```
4.プロジェクトの説明、開発者名など入力していきます。

```terminal
? Project name nuxt-sample
? Project description Nuxt sample project.
? Author name takeshi

```
5.利用するパッケージ管理ソフトを選択します。今回はYarnを利用します。

```terminal
? Choose the package manager Yarn
```

6.利用するUIフレームワークを選択します。

```terminal
? Choose UI framework 
  None 
  Ant Design Vue 
  Bootstrap Vue 
  Buefy 
  Bulma 
  Element 
  Framevuerk 
  iView 
  Tachyons 
  Tailwind CSS 
❯ Vuetify.js 
```
UIフレームワークは必須ではありませんが、必要に応じて利用してください。
今回は「[Vuetify](https://vuetifyjs.com/ja/)」を選択します。

7.利用するサーバーフレームワークを選択します。

```terminal
? Choose custom server framework 
❯ None (Recommended) 
  AdonisJs 
  Express 
  Fastify 
  Feathers 
  hapi 
  Koa 
  Micro 
```
今回サーバーサイドはCloudFunctionsやFirebaseを利用するので、サーバーフレームワークは利用しません。

8.必要なモジュールを選択します。スペースで複数選択可能です。

```terminal
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to inv
ert selection)
❯◯ Axios
 ◯ Progressive Web App (PWA) Support
 ◯ DotEnv
```
今回はPWAアプリとして作成するので、Progressive Web App (PWA) Supportを選択します。
環境変数の管理にDotEnvを使っても良いのですが、開発時と本番運用時に環境変数を変えたいので、今回はcross-envというパッケージを使います。
こちらの手順は次回の記事で説明します。

9.コードフォーマッターを選択します。

```terminal
? Choose linting tools 
❯◉ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint
```

必要に応じて選択してください。ここでは、ESLintとPrettierを選択します。

10.テストフレームワークを選択します。

```terminal
? Choose test framework 
  None 
❯ Jest 
  AVA 
```

Nuxt.jsではJestが利用されることが多いです。

11.SSR(サーバーサイドレンダリング)かSPA(Single Page App)を選択します。

```terminal
? Choose rendering mode 
  Universal (SSR) 
❯ Single Page App 
```

今回はSPAを選択します。
SSR、SPAなどについては、また後日改めて記事にしたいと思います。

12.今回私はVSCodeを利用して開発しているので、ES6で開発していることをVSCodeに認識させるためjsconfig.jsonを選択します。

```terminal
? Choose development tools 
❯◉ jsconfig.json (Recommended for VS Code)
```

13.ここまで選択すると、Yarnでパッケージがインストールされます。

```terminal
🎉  Successfully created project sample
```

14.作成されたプロジェクトに移動し、プロジェクトを起動します。

```terminal
$ cd nuxt-sample
$ yarn run dev

   ╭──────────────────────────────────────────╮
   │                                          │
   │   Nuxt.js v2.10.2                        │
   │   Running in development mode (spa)      │
   │                                          │
   │   Listening on: http://localhost:3000/   │
   │                                          │
   ╰──────────────────────────────────────────╯
```

15.http://localhost:3000 にアクセスすると、Nuxt.jsの画面が表示されます。
![Nuxt画面キャプチャ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003/44095b27-fefe-27be-86af-4d705280aa5b.png)

16.次のFirebaseHostingの準備のため、SPAをジェネレートします。

```terminal
yarn generate
```

17.distディレクトリにジェネレートしたNuxt.jsのアプリケーションが出力されます。

## Firebase
Fireabseとは何か、については以前の記事「[Nuxt v2とFirebase(CloudFirestore)でPWA対応Webアプリ開発](https://qiita.com/_takeshi_24/items/3ee051e1db1b3e8da106)」で紹介していますので、そちらをご覧ください。

### Firebaseの準備
以降のコマンドは、先ほどのnuxt-sampleの１つ上のsampleディレクトリで実行します。

1.[Firebaseコンソール](https://console.firebase.google.com/)から新規プロジェクトを作成します。
![Firebaseプロジェクト作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003/e4d621dd-8154-79a4-54b0-3c9b60114ec1.png)

2.プロジェクト名を入力します。今回はFirebaseプロジェクトもsampleという名前で作成します。名前を入力すると、プロジェクトのIDが発行されます。
<img width="1041" alt="Firebaseプロジェクト作成.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003/e8722fb0-bae1-9459-0384-6992890c65d1.png">

3.必要に応じてAnalyticsの設定をして、プロジェクト作成が完了します。
![FirebaseAnalytics.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003/8ae867c8-babf-b595-0aa3-d55b41f5a4fe.png)
![Firebaseプロジェクト作成完了.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003/1029f6f9-3073-4092-a7ae-1461e950b992.png)

4.FirebaseコンソールのProjectOverview→全般でGoogle Cloud Platform（GCP）リソースロケーションを選択します。
![スクリーンショット 2019-11-28 12.09.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003/0da9c2cf-fe28-be59-f66d-a4f62f2f59ea.png)
日本であれば、東京（asia-northeast1）または大阪（asia-northeast2）のリージョンを選ぶと良いでしょう。

5.FirebaseWebアプリを作成します。FirebaseHostingも利用するので、FirebaseHostingのチェックもします。
![FirebaseWebアプリ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003/cbf396c1-ace5-7557-aed3-0bfb6b4cbadf.png)
<img width="1042" alt="Firebaseアプリ登録.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003/42abfe98-e935-c900-1d63-bf4578637174.png">

6.次のステップでFirebaseSDKのコードが表示されますが、今回はNuxt.jsと連携するので、利用しません。

7.次のステップでFirebaseToolsのインストール手順が表示されますが、ここではパッケージ管理にYarnを利用していますので、以下のコマンドでインストールします。

```terminal
$ yarn global add firebase-tools
```

8.FirebaseToolsでログインします。

```terminal
$ firebase login
```

9.アクセス権限のページが表示されますので、内容を確認して「許可」します。
<img width="403" alt="Firebase許可.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003/39ebf5e2-b733-b022-cd22-17363417e157.png">

10.Firebaseアプリケーションを初期化します。

```terminal
$ firebase init
```

利用するサービスを選択します。

```terminal
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. 
 ◉ Database: Deploy Firebase Realtime Database Rules
 ◉ Firestore: Deploy rules and create indexes for Firestore
 ◉ Functions: Configure and deploy Cloud Functions
 ◉ Hosting: Configure and deploy Firebase Hosting sites
 ◉ Storage: Deploy Cloud Storage security rules
❯◉  Emulators: Set up local emulators for Firebase features
```

10.プロジェクトを選択します。先ほど作成したsampleプロジェクトを選択してください。

```terminal
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.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: sample-xxxxx (sample)
```

11.Database、Firestore、Functionsの設定を聞かれますので、そのままエンターで進んでいきます。CloudFunctionsはJavaScriptを利用します。

```terminal
=== Database Setup

Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.

? What file should be used for Database Rules? database.rules.json
✔  Database Rules for sample-xxxxx have been downloaded to database.rules.json.
Future modifications to database.rules.json will update Database Rules when you run
firebase deploy.

=== Firestore Setup

Firestore Security Rules allow you to define how and when to allow
requests. You can keep these rules in your project directory
and publish them with firebase deploy.

? What file should be used for Firestore Rules? firestore.rules

Firestore indexes allow you to perform complex queries while
maintaining performance that scales with the size of the result
set. You can keep index definitions in your project directory
and publish them with firebase deploy.

? What file should be used for Firestore indexes? firestore.indexes.json

=== Functions Setup

A functions directory will be created in your project with a Node.js
package pre-configured. Functions can be deployed with firebase deploy.

? What language would you like to use to write Cloud Functions? JavaScript
```

12.ESLintを利用するか聞かれるので、利用する場合は、Yesを選択します。
パッケージのインストールはyarnを利用しますので、npmインストールはNoで進みます。

```terminal
? Do you want to use ESLint to catch probable bugs and enforce style? Yes
✔  Wrote functions/package.json
✔  Wrote functions/.eslintrc.json
✔  Wrote functions/index.js
✔  Wrote functions/.gitignore
? Do you want to install dependencies with npm now? (Y/n) n
```
13.Hostingにデプロイするディレクトリを指定します。Nuxt.jsでジェネレートしたdistディレクトリを指定します。

```terminal
? What do you want to use as your public directory? nuxt-sample/dist
```
14.SPAなので、index.htmlを見に行くようにします。index.htmlは上書きしないので、Noです。

```terminal
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File nuxt-sample/dist/index.html already exists. Overwrite? No
```

15.StorageRulesについてはそのままエンターで進みます。

```terminal
? What file should be used for Storage Rules? storage.rules
```
16.エミュレータを設定します。Pubsub以外のサービスを選択します。

```terminal
=== Emulators Setup
? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices. 
 ◉ Functions
 ◉ Firestore
 ◉ Database
❯◉ Hosting
 ◯ Pubsub
```
17.エミュレーターのポートは特に問題なければデフォルトのまま次に進みます。

```terminal
? Which port do you want to use for the functions emulator? 5001
? Which port do you want to use for the firestore emulator? 8080
? Which port do you want to use for the database emulator? 9000
? Which port do you want to use for the hosting emulator? 5000
? Would you like to download the emulators now? Yes

18.作成されたfunctionsディレクトリに移動して、Yarnでパッケージをインストールします。

```terminal
$ cd functions
$ yarn install
```

19.Firebaseコンソールで、Database(Firestore, RealtimeDatabase)、Storageのページを開き、初期化します。
![Firestore初期化.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003/ccb7b60e-6410-7891-53ea-66ed2f01d520.png)
![CloudStorage初期化.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003/f5cb0dcc-4a98-5a23-21b5-3823e357c131.png)

20.firebaseにデプロイします。(firebase.jsonファイルのディレクトリで実行)

```terminal
$ firebase deploy
  functions: Finished running predeploy script.
i  database: checking rules syntax...
✔  database: rules syntax for database sample-xxxxx is valid
i  firebase.storage: checking storage.rules for compilation errors...
✔  firebase.storage: rules file storage.rules compiled successfully
i  firestore: reading indexes from firestore.indexes.json...
i  cloud.firestore: checking firestore.rules for compilation errors...
✔  cloud.firestore: rules file firestore.rules compiled successfully
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  storage: uploading rules storage.rules...
✔  firestore: deployed indexes in firestore.indexes.json successfully
i  firestore: uploading rules firestore.rules...
i  functions: preparing functions directory for uploading...
i  hosting[sample-xxxxx]: beginning deploy...
i  hosting[sample-xxxxx]: found 25 files in nuxt-sample/dist
✔  hosting[sample-xxxxx]: file upload complete
i  database: releasing rules...
✔  database: rules for database sample-xxxxx released successfully
✔  storage: released rules storage.rules to firebase.storage
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[sample-xxxxx]: finalizing version...
✔  hosting[sample-xxxxx]: version finalized
i  hosting[sample-xxxxx]: releasing new version...
✔  hosting[sample-xxxxx]: release complete

✔  Deploy complete!
```

21.最後にHostingのURLが表示されるので、ページを開いて、先ほどと同じNuxt.jsのページが表示されたら完了です。

## まとめ
長くなりましたが、以上でNuxt.jsとFirebaseのWebアプリ開発の準備完了です。

この記事は「Nuxt.jsとFirebaseとCloudFunctionsでWebアプリ開発」シリーズとして、連載していきます。
続きはアドベントカレンダー「[diffeasyCTO西の24(にし)日連続投稿チャレンジ Advent Calendar 2019](https://qiita.com/advent-calendar/2019/diffeasy24)」に掲載していきます。

今後は、以下のような記事を公開していく予定です。

- [Nuxt.jsとFirebaseAuthentication/FirebaseUIで認証](https://qiita.com/_takeshi_24/items/4ea05d5564a5d5ca9825)
- [Nuxt.jsとFirebase RealtimeDatabase CloudFirestore でBaas開発入門](https://qiita.com/_takeshi_24/items/0de95d0ff4a5337d6120)
- [Nuxt.jsとCloudFunctionsでサーバーレスアプリ開発入門編](https://qiita.com/_takeshi_24/items/5adc9b91bc7173dd5abb)
- [CloudFunctionsからCloudSQLに接続](https://qiita.com/_takeshi_24/items/c425d65916598b0242fb)
- [FirebaseRealtimeDatabaseとCloudFirestoreにおけるトランザクション処理](https://qiita.com/_takeshi_24/items/41b404d0eb0e5975ba5c)
- [Nuxt.jsアプリにFirebase Cloud Messagingでプッシュ通知](https://qiita.com/_takeshi_24/items/0545fabb4685c25c4d9c)
- FirebaseのRealtimeDatabase/FirestoreをトリガーにFunctions実行

Nuxt.jsとFirebaseなどを使ってWebアプリケーション開発にチャレンジしたい方、是非Qiitaアカウントか[twitterをフォロー](https://twitter.com/_takeshi_24)していただき、ツッコミやいいね！お願いします！

[#advent_24](https://twitter.com/hashtag/advent_24)のハッシュタグでフィードバックいただけると嬉しいです！