2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Cloudflare PagesにNuxtのSPAアプリをデプロイする(Firebase Hostingから移行)

Last updated at Posted at 2021-04-30

###なぜFirebase Hostingから移行するのか
Firebase Hostingの無料枠がしょぼすぎるからです。Cloudflare Pages(以下CFP)は転送量無制限でビルド回数も無料枠で500回もあります。Firebase Hostingは無料枠じゃ大したアクセスじゃなくてもきつそうです。

###CFP側でやること
1:nuxt.config.jsにtarget:"static"と加える(SPAなら加えなくてもいい?)
2:Githubにプッシュ
3:CFPにサインアップ
4:Githubアカウントと連携(画面が自動で出てくる)
5:デプロイするリポジトリとブランチを選択しプロジェクト名を書く
6:フレームワークの選択を迫られるので「Nuxt」を選択。(あとは自動でやってくれるので基本はいじらなくていい。distにwebpackでコンパイル後のファイルをおいている設定なら←デフォルト)
7:デプロイボタンを押して数分待つ。
~終了~
初心者でも5分で終わります。体感的にはFirebase Hostingの難易度の半分もないですね

###Firebase Hosting側でやること
1:パワーシェルかコマンドプロンプトでプロジェクトに入る
2:プロジェクト名 > firebase hosting:disable(確認の英文が出たらyをEnter)
3:これで昔のFirebase HostingのURLは無効化されます(~web.appのやつ)(履歴は消えない)
4:firebase.jsonを削除(またHostingを使うときに自動作成される)
~終了~

###Firebase Authを使っていた場合
新しいCFPのドメインを登録しないとだめです。
コンソール > Auth > Sign-in-method(下の方にスクロール)> 承認済みドメイン
に新しいドメインを追加してください。
これを行わないとデプロイ後のCFPドメインではGoogle認証が使えませんので。

Cloudflare Pagesは今後に期待ですね

2
0
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
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?