Firebaseに静的サイトをデプロイする時やったこと

やること

Nuxt.jsで作成したフロントページをGitHub上にアップし、 CircleCIでソースをFirebaseに自動デプロイする仕組みを構築します。

やることは以下の４つです

• Nuxt.jsでアプリケーションを作成
• Firebaseにプロジェクトを作成
• firebase-toolsのインストール
• CircleCIにJobを作成

やったこと

Nuxt.jsでアプリケーションを作成

Nuxt.jsを使用し、アプリケーションを作成します。

www.storyblok.com

上記のリンクの
environment-setup
というセクションを参考に、Nuxt.jsのアプリケーションを作成する。

Firebaseにプロジェクトを作成

Firebase上に、デプロイ先となるプロジェクトを作成します。

firebase-toolsのインストール

こちらの記事を参考にローカルPC上のアプリケーションフォルダにfirebase-toolsをインストールし、デプロイを行います。 qiita.com

上記の記事では、terminal上でFirebaseアプリケーションを新規作成していますが、事前に作成したアプリケーションも選択が可能となっています。

CircleCIにJobを作成

同じく、上記の記事のセクション
CircleCIでプロジェクトをFirebase Hostingへビルド&デプロイする
に従い、CircleCI上にJobを作成します。

ここまでの手順に従えば、任意のブランチにpushすると、自動でFirebaseにデプロイする仕組みを構築が構築できるかと思います。

まとめ

Firebase上へのデプロイも、CircleCIとの連携も、ブログやQiita上に沢山情報がありましたので比較的に詰まらずに進められました。

最後までご覧いただきありがとうございました。