AWSからFirebaseにサイトを移行した

タイトルの通り
前回AWSでサーバレスと称し自分のサイトを公開したがRoute53で月50円取られていたので勉強がてらに無料で話題のFirebaseを利用してサイトを移行した備忘録

準備

• Firebaseで 『プロジェクトを追加』から適当なプロジェクトを作成する
  • ロケーションを設定しておく （ロケーションがどこが良いかは各自調べる、大体は東京で良い）
• npmを使うのでnodeを入れておく

firebase-tools を入れる

npm install -g firebase-tools

（記憶があっていれば）Webで認証するのでFirebaseにログイン

初期設定

firebase init を実行すると歓迎される

~/project ❯❯❯ firebase init

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

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

....

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to tog
gle all, <i> to invert selection)
❯◯ 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

最初にいるもの聞かれるので選択する（スペースで選択）
いるもの全部選択したらEnter押して決定
今回はHostingだけしてほしいのでHostingのみを選択した

で、多分既存のプロジェクト使うかどうか聞かれるのでそこで最初に準備したものを選ぶ

あとはなんか色々聞かれるが、デフォルトのままで大丈夫。
最後に公開するディレクトリを聞かれるのでちゃんと教えてあげる。
（適当にEnter押してて公開されずに一回悩んだ）

? What do you want to use as your public directory? src
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File src/index.html already exists. Overwrite? No

上でやってんのは srcディレクトリにあるindex.htmlみてねって言ってる

余談： Error: Error fetching Firestore indexes

このエラーが出た人は多分Firestoreを選択したと思う。
Firestoreをネイティブモードにしておくと解決する。

Deployする

firebase deployを実行する

~/project ❯❯❯ firebase deploy

=== Deploying to 'your-project'...

i  deploying hosting
i  hosting[your-project]: beginning deploy...
i  hosting[your-project]: found 10 files in src
✔  hosting[your-project]: file upload complete
i  hosting[your-project]: finalizing version...
✔  hosting[your-project]: version finalized
i  hosting[your-project]: releasing new version...
✔  hosting[your-project]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/your-project
Hosting URL: https://your-project.web.app

実際にHosting URLを覗いてみると公開されている。すごい、はやい。

Hosting設定する

FirebaseのコンソールでHostingに行く
するとドメインを追加ってあるので追加する。

GoogleDomains勢はこちらを参考にする。
Firebase Hostingに Google Domains でサブドメインを設定する

終わり

爆速デプロイでびっくりした。
最近webサービスの個人開発にハマってるのでとりあえずFirebase使っていこうと思う。
この記事も爆速で書いたのでわりと適当。