ゼロから始めるCursor+Firebase｜Webサービスを作って公開する方法

Webサービス
2025.08.02
記事内に広告が含まれています。

結論

Cursor+Firebase でWebサービス開発・公開はできます！
実際に作成したサービス「今、何する？」は下記からアクセスできます。

今、何する？ | What should I do now?
今、何する？から始まる新しい自分
what-do-i-do-9d0ca.web.app

このように AI Code Editor の Cursor と Firebase Hosting を使えば、
誰でも「自分のサービス」を作り、公開することが可能です！

この記事を読むことで、誰でも自分のWebサービスを世界に公開できるので
ぜひハンズオンしてみてください！

事前準備

Node.js をインストール

Angular を動かすためには JavaScript の実行環境である Node.js が必要です。
Firebase Hosting に Webサービス をデプロイする際のコマンドも Node.js 上で動くので必須です！

  1. Node.js公式サイト で「Node.jsを入手」をクリック

  2. ご自身の OS を選択し、コマンドプロンプト/ターミナル でコマンド実行

MacOS の場合、ターミナルを再起動すると以下エラーになるため、
nvm.sh を 起動時に実行するように追加対応を実施します。

  • エラーメッセージ
zsh: command not found: nvm
  • 追加対応（％はプロンプト）
% vim ~/.zshrc   
source "$HOME/.nvm/nvm.sh"

% source ~/.zshrc

Angular CLI をインストール

Angular CLI はプロジェクト作成・ビルド・サーバー起動を自動化する公式ツール。
Cursor 使う時でも Angular CLI のコマンドを使っていきますので、入れていきましょう！

  1. Angular公式サイト を参考にコマンドプロンプト/ターミナル でコマンド実行

  2. Angular CLI の version を確認（執筆時点では “20.1.4” 以上であればOK）
% ng --version
20.1.4

Cursor をインストール

Cursor は AI 支援機能がついたコードエディターです。
詳細に説明してくださっている以下記事が参考になると思います！

Cursorとは？｜サクッと始めるAIコードエディタ【Cursor / VS Code / ChatGPT】
zenn.dev

Chat で指示を出すだけで Angular のプロジェクトも作成できますので、
早速 Cursor を入れていきましょう！

  1. Cursor公式サイト から Cursor をインストール

事前準備お疲れ様でした。
これで全ての準備は整いましたので、Cursor を使ったサービス開発を進めていきましょう！

Cursor で Hellow World !!

それでは Cursor を使って公開するサービスを作っていきます。
初めはやっぱり Hellow World ですよね！

  1. 任意のフォルダを Cursor で開く（私はデスクトップに適当なフォルダを作成しました。）

  2. 右のChat欄に「Angular で SPA を作成。ルーティングあり、SCSS使用。トップページに Hello World を表示。」を入力して実行

  3. コマンド実行途中の対応を実施（エラー対応については次の項に記載）
    ・実行許可を求められたら、内容を確認して Run を実行


    ・実行途中のコマンドを「Open in terminal」で開くと、Angular からアプリについて様々な質問がありますので、今回は全てデフォルト（Y/N の大文字の方）で回答してください


    ・「Packages installed successfully.」と表示されたら作成成功です


    ・もしネットワークエラーなどで途中で止まった場合は「続きを実行して」と指示すると再開できます

  4. ターミナルに記載されているローカルURL「http://localhost:4200/」を開いてみましょう！


    このようなページが開ければ成功です！




エラーが発生しても焦らず Cursor と解消していきましょう！（一発で成功することは稀です！）
以下参考にしてみてくださいね。

  • エラー対応
    ・ビルドエラー
    ターミナルに出力されているエラー箇所を範囲選択して「Add to Chat」を押下、その後 Chat に「修正して、ビルドが通るようにしてください。」と入力して実行


    ・機能エラー
    今回はボタンを押下してもルーティングされなかったので、Chat に「nav-btn 押下してもページにルーティングされないため、修正してください。」と入力して実行

Firebase Hosting でサービス公開

Firebase は Google が提供する BaaS です！
様々な機能が提供されていますが、今回は Firebase Hosting を使って
Angular アプリを世界に公開していきましょう！

Firebase プロジェクトを作成

Firebase Hosting を使うために、公開用のプロジェクトを作成していきましょう！

  1. Firebaseコンソール にアクセス
  2. 「プロジェクトを作成」をクリック
    • 名前を入力（例：cursor-angular-hello-app）

    • Gemini は有効で OK（今回は使いませんが、非常に便利なので触ってみることをオススメします！）

    • Google Analytics は後から設定可能なので、無効に設定

    • この画面が表示されていれば OK
  3. Cursor の Chat に「Firebase Hosting に公開したいので、Firebase CLI のインストールからデプロイまで実行してください。」と入力して実行
    • 入力例

    • firebase login が実行される際に Firebase からアプリについて質問がありますので、今回は全てデフォルト（Y/N の大文字の方）で回答してください。ログイン画面が開き、ご自身のアカウントでログインが成功するとこちらの画面に遷移されます

    • firebase init が実行される際に、使う機能を選択する必要があります！
      今回は Hosting で Space を押下して選択した後 Enter を押下


      プロジェクトについて聞かれるため、「Use an existing project」で Enter を押下


      作成したプロジェクト（例：cursor-angular-hello-app）で Enter 押下後、
      Hosting Setup の質問については以下で進めます
      　✔ What do you want to use as your public directory? public
      　✔ Configure as a single-page app (rewrite all urls to /index.html)? Yes
      　✔ Set up automatic builds and deploys with GitHub? No


      Deploy Complete! が出力されたら OK
  4. Firebaseコンソール にアクセスして、Webサービスが公開されていることを確認
    • すべてのプロダクトから Hosting をクリック

    • ドメイン欄からどちらかのドメインをクリック

    • localhost で確認した画面が、ドメインからアクセスしたページでも表示されることを確認

長かったですね！お疲れ様でした。
これで自分のサービスを世界に公開することができました！

私は作りたいサービスを ChatGPT と相談して設計し、
本記事の流れで Cursor + Firebase でサービス開発・公開をしました。

読者の皆様も、ぜひこの便利なツールを活用していただき、
気軽にサービスを開発・公開して世の中を楽しくしていただければと思います！

おまけ

本記事では Firebase Hosting がデフォルトで指定しているドメインを利用しましたが、
実際の本番運用だと独自ドメインを契約することがマストです。
独自ドメインとは？

私は Conoha Wing というサービスを利用して、無料で独自ドメインを取得できましたので
おまけとして記載します！ご参考になれば幸いです。

私は 長期利用割引プラン「Wing パック」で契約しているため、
独自ドメインが無料だったようです

手順（ドメイン情報なのでモザイクが多くなってしまいました。）

  1. 公式サイト にアクセスしてログイン（登録がまだの方は登録してログイン）
  2. 左欄のドメインを選択し、右側にある「ドメイン取得」をクリック

  3. 欲しいドメイン名を入力することで、取得可能なドメインが表示されるため、
    カートに入れて決済を進めれば OK（この時、決済合計額が 0円 でない場合は有料のため気をつけてください）

  4. ドメインリストに購入したドメインが表示されることを確認
    （ステータスが運用中になるまで少し時間かかります）

  5. Firebaseコンソール にアクセスし、ドメイン欄の「カスタムドメインを追加」をクリック

  6. 購入したドメインを入力して続行


    セットアップに必要な情報が表示されることを確認（ドメイン設定状況に応じて表示される内容が異なります）

  7. Conoha Wing に再度アクセスし、左欄のドメインから購入したドメインを開き、
    編集ボタン（✏️）をクリックして、先ほど Firebase に表示されていた情報を反映
    （Conohaドメイン設定に Conoha の IPアドレス が残っている場合は正しく名前解決されないため注意）

  8. Firebase に戻り「確認」ボタンを押下
    以下文言が表示される場合、30分経っても改善しない場合は Conoha ドメインの設定が誤っています
    レコードがまだ検出されていません （最終確認日時: たった今） 変更が反映されるまでに、最長で 24 時間かかることがあります。このダイアログを閉じて、後で再び確認することができます。

  9. ドメイン欄にカスタムドメインが追加されていたら OK

以上です！
誰かの役に立つ記事であれば幸いです。

コメント

タイトルとURLをコピーしました