Webアプリを公開する方法を徹底解説！AIで作ったアプリを簡単に公開
Claude CodeやCursorと一緒に作ったWebアプリが、手元のパソコンでは動いている。それなのにURLがなくて、誰にも見せられない状態で止まっていませんか？Webアプリを公開する方法は、公開先（デプロイ先）を選ぶことと、デプロイという作業の2つに分解できます。とはいえ、無料でどこまでできるのか、どこを選べばいいのかは分かりにくいのではないでしょうか。この記事では、公開までの6ステップから公開先（デプロイ先）の選び方、APIキーや料金のつまずき対策まで、初心者向けに解説します。
- Webアプリの公開（デプロイ）とは、作ったアプリをインターネット上のサーバーに置き、URLで誰でも開ける状態にする作業
- 公開先（デプロイ先）は「静的か動的か」と「無料の範囲・商用利用の可否」の2軸で絞ると迷わない
- 公開の手順は6ステップ。AIで作ったNext.jsアプリなら、コマンドひとつで公開できるサービスもある
目次
- Webアプリを「公開する」とはどういうこと？
- 公開先を選ぶ前に押さえる2つの分かれ道
- Webアプリを公開する手順6ステップとつまずき対策
- Webアプリの主な公開先（デプロイ先）と選び方【比較表つき】
- AIで作ったWebアプリをコマンドひとつで公開できる「ロリポップ！デプロイナウ」
- よくある質問（FAQ）
- まとめ
Webアプリを「公開する」とはどういうこと？
AIと一緒に作ったアプリにアクセスする「localhost」というアドレスは、外部からは誰も開けません。つまり、この時点ではまだ自分のパソコンの中だけで動いています。
公開とは、アプリをインターネット上のサーバーに置いて、URLを知っていれば誰でも開ける状態にする作業のことです。この作業を「デプロイ」と呼びます。アプリを置く先のサービスは「公開先」や「デプロイ先」と呼ばれます。
ここで押さえておきたいのは、「作る」と「公開する」が別のステップだという点です。AIはコードを書くところまでは進めてくれますが、どこに置いて公開するかは自分で決める必要があります。この記事はその「決めて、公開する」部分のガイドです。
公開先を選ぶ前に押さえる2つの分かれ道
公開先のサービスは数が多く、名前を並べられても選べません。先に2つの質問に答えると、候補が一気に絞れます。
あなたのアプリは「静的」？「動的」？
静的なアプリとは、誰が開いても同じ内容を表示するだけのものです。自己紹介ページ、ポートフォリオ、作品ギャラリーがこれにあたります。
動的なアプリは、使う人の入力で結果が変わったり、データを保存したり、裏でAIやAPIを呼んだりするものです。チャットアプリ、投稿を保存するツール、AIに質問を投げるサービスはすべて動的です。
紛らわしいのは、画面がよく動くかどうかは関係ないという点です。アニメーションで動きまくるゲームでも、ブラウザの中だけで完結していれば静的に分類されます。分かれ目は「サーバー側にやってもらう仕事があるか」。AIと作るアプリはAPIを呼ぶものが多いので、動的に該当するケースが目立ちます。迷ったら動的向けの公開先を選んでください。静的なアプリは動的向けの公開先でも問題なく動きますが、逆はできないためです。
「無料でどこまで」と「商用利用OKか」
無料プランの条件は、サービスごとに驚くほど違います。一定時間アクセスがないと停止するもの、月間の利用量に上限があるもの、そして見落としやすいのが、無料プランは商用利用が認められていないケースです。趣味の公開なら気にせず進めますが、仕事や収益化に使う可能性が少しでもあるなら、商用利用の可否は最初に確認してください。具体的な条件は、後半の比較の章で見ていきます。
Webアプリを公開する手順6ステップとつまずき対策
公開先がどこであっても、やることの流れは共通です。全体像を先に見せると、①タイプ確認 → ②公開先選び → ③ビルド → ④環境変数 → ⑤デプロイ → ⑥独自ドメイン。ひとつずつ進めます。
ステップ1｜アプリのタイプを確認する（静的か動的か）
前章の分かれ道をここで使います。入力を受け取る機能、データを保存する機能、AIやAPIを呼ぶ処理が1つでもあれば動的です。自分で判断がつかないときは、作ってくれたAIに「このアプリは静的サイトとして公開できる？サーバー側の処理はある？」と聞いてしまうのが早道です。作った本人であるAIが、いちばん正確に答えてくれます。
ステップ2｜公開先（デプロイ先）を選ぶ
タイプと予算に合う公開先を1つ決めます（詳しい比較は次の章にまとめました）。ここで選び疲れて止まる人が少なくありません。決めきれないときの目安を挙げると、AIと作ったアプリを日本語で公開したい・商用の可能性が少しでもあるならロリポップ！デプロイナウ、静的な作品置き場だけならGitHub Pagesです。
ステップ3｜ビルドする（公開できる形に変換する）
ビルドとは、開発中のコードを公開用の形に変換する処理です。専門的に聞こえますが、いま主要な公開先の多くは、デプロイの流れの中でこのビルドを自動で実行してくれます。自分で何かを操作する場面はほとんどありません。ただし、手元では動いていても、このビルドの段階でエラーが出て公開が止まることがあります。そのときは、表示されたエラーメッセージをそのままAIに貼って直してもらうのが近道です。
ステップ4｜環境変数を設定する（APIキーを公開しない）
ここが、AIで作ったアプリにいちばん起きやすい事故ポイントです。AIに「このAPIを使って」と頼んで作ったコードには、APIキーがそのまま書き込まれていることがあります。そのまま公開するとキーが第三者に見える状態になり、勝手に使われて課金される危険があります。
対策は、キーをコードから消して、公開先の管理画面にある「環境変数」という置き場に登録することです。手元の.envファイルに書いてあるから大丈夫、とは限りません。ロリポップ！デプロイナウの場合、.envの内容はビルド時にも公開時にも参照されない仕様で、ダッシュボードの環境変数タブで設定します。なお、この環境変数は、デプロイを実行する前にダッシュボードで登録しておいてください。ビルドや公開のときに読み込まれるため、後から登録すると反映されないことがあります。公開前に「APIキーがコードに残っていないか確認して。キーはサーバー側だけで使って、ブラウザ側に出さないようにして」とAIに頼んでおくと安心です。
ステップ5｜デプロイする（アップロードして公開）
いよいよ公開の実行です。コマンドを打つ方式、管理画面から操作する方式、AIエージェントに頼む方式があり、公開先によって選べる手段が変わります。実行するとアップロードと公開処理が走り、完了すると公開URLが発行されます。
ステップ6｜独自ドメイン・HTTPSを設定する（必要な場合）
発行されたURLのままでも公開は完了しています。自分の名前のドメインで公開したくなったら、このステップに進んでください。ドメインを取得して公開先に設定する流れで、あとからでも変更できます。HTTPS（アドレスが鍵マークになる暗号化）は、いまの主要サービスでは自動で設定されるものが増えました。
ロリポップ！デプロイナウでは、ムームードメインで取得したドメインなら、AIエージェントに「このドメインで公開して」と伝えるだけで、ドメインの追加からDNSレコードの設定・検証までまとめて進みます。詳しくは公式のお知らせをどうぞ。
よくあるつまずきと対策
つまずきの1つめは、想定外の課金です。無料で始めたのにアクセスが増えて従量課金が発生した、という事態は仕組みを知っていれば防げます。対策は3つ。利用量の上限アラートを設定する、料金体系のページを一度読む、そもそも定額制のサービスを選ぶ。料金が読めないのが不安なら、3つめの選択が確実です。
2つめは、手元では動くのに公開したら動かない現象です。原因の大半は、環境の違いか、環境変数の設定忘れのどちらかに集約されます。エラー画面が出たら、まずステップ4の環境変数が公開先に登録されているかを確認してください。それでも解決しなければ、エラーメッセージをそのままAIに貼り付けて聞くのが最短です。
3つめは、公開が「世界中の誰でもアクセスできる状態にすること」だという意識です。テスト用の個人情報やメモをコードに残さない、APIキーは環境変数に置く（ステップ4）、使わなくなったアプリは公開を止める。この3点を習慣にしておくと安心です。
Webアプリの主な公開先（デプロイ先）と選び方【比較表つき】
主な公開先を、「静的か動的か」「無料と商用」の2軸で整理しました。
| 公開先 | 向いている用途 | 静的/動的 | 無料で使える？ | 商用利用 |
|---|---|---|---|---|
| ロリポップ！デプロイナウ | AIと作ったアプリの公開 | 静的＋動的 | ○（Freeプラン ¥0） | 全プランで可 |
| AIツールの共有機能 | とにかくすぐ見せたい | ツールにより異なる | ○（ツールに付属） | ツールの規約による |
| GitHub Pages | 静的サイトの公開 | 静的のみ | ○（公開リポジトリ） | 商用サイト用途は対象外 |
| Vercel | フロントエンドの公開 | 静的＋動的 | ○（Hobbyプラン） | 無料プランは商用不可 |
| Netlify | 静的サイト中心のWeb公開 | 静的＋動的 | ○（$0プラン） | 全プランで可 |
| Render | サーバーやDBも動かす運用 | 静的＋動的 | ○（動的は休止あり） | 無料枠は本番用途に非推奨 |
※各サービスの条件は執筆時点の公式情報、静的/動的の分類は各公式情報をもとにした編集部の整理です。無料枠の利用量（実行時間やアクセス数など）はサービスや時期で変わるので、公開したいものや運用に合わせて、最新の条件を各公式ページで確認してください。
まず無料でサクッと見せたい（AIツールの共有機能・GitHub Pagesなど）
作ったものをその場で共有リンクにできる機能を持つAIツール（ClaudeのArtifactsやBoltなど）があります。友だちに「見て」と送るだけなら最速の選択肢です。ただしリンクがツールに紐づいた簡易的な公開なので、作品として運用する段階になると公開先の引っ越しが必要になりがちです。
GitHub Pagesは、公式が「静的サイト ホスティング サービス」と説明する公開先です。GitHubの無料プランで、公開リポジトリなら利用できます。ドキュメントサイトや、学習用に作ったデモサイトの公開には十分です。一方で、公式の利用制限にはECサイトなど商用目的のサイト運営を意図した無料ホスティングではないと明記されています。
動的アプリを本格運用したい（デプロイナウ／Vercel／Netlify／Renderなど）
データを保存する、AIを呼ぶ。Next.jsやReactで作った動的アプリを本格運用するなら、この枠から選びます。
ロリポップ！デプロイナウは、Next.jsで作ったアプリを公開できます。アプリを静的ファイルに書き出すのではなく、Node.jsのサーバーとして動かす方式のため、サーバー側で処理を行うアプリにも対応します。独自ドメインとHTTPSにも対応しています。
Vercelは、Next.jsの開発元が運営する公開先です。無料のHobbyプランがあり、料金ページでは個人の非商用利用に限ると説明されています。商用向けにはProプラン（月20ドルから）が案内されています。Netlifyは$0の無料プランがあります。Renderの無料Webサービスは、15分間アクセスがないと停止する仕様が公式ドキュメントに書かれています。
どれも個人開発の定番として実績のある公開先です。ただし海外のサービスは画面や設定が英語中心で、プランの条件も変わることがあります。
ここまでの公開先と同じことが、コマンドひとつでできる選択肢もあります。次の章で詳しく紹介します。
AIで作ったWebアプリをコマンドひとつで公開できる「ロリポップ！デプロイナウ」
前の章で見てきた6つのステップを、まとめて任せられる公開先もあります。試しに、AIコーディングツールのClaude Codeに「デプロイして」とだけ頼んで公開してみました。デプロイという言葉の響きから専門知識の壁を想像していたぶん、あっけなさに驚きます。確認の質問にいくつか答えているうちにビルドから公開まで進み、2〜3分で公開URLが発行されました。そのURLをブラウザで開くと、さっきまで手元にしかなかったアプリがそのまま表示されています。公開の作業そのもので、身構えるほど難しいことはありませんでした。
これができるのが、ロリポップ！デプロイナウです。
コマンドひとつで公開できる：ターミナルでlolipop deployと入力すると、アプリの変換（ビルド）からアップロード、公開までが自動で進み、公開URLが発行されます。コマンドに不慣れでも、AIエージェントに「デプロイして」と日本語で頼むだけで同じことができます。初回だけ準備が必要です。パソコンにlolipopのコマンドをインストールしてログインし、AIエージェントに任せる場合はスキルの追加（lolipop skill install）まで済ませます。ここは一度きりで、詳しい手順は公式のクイックスタートに沿えば数分です。準備さえ終われば、あとは「デプロイして」と伝えるだけです。
無料から始められて、定額制：執筆時点でFreeプラン¥0、Personalプラン月額¥980です。月額は定額制で従量課金がなく、全プランで商用利用できます。
日本語でそのまま完結：画面も公式ドキュメントも日本語です。全プランで独自ドメインを設定でき、HTTPSは自動で対応されます。
公開したアプリはhttps://（プロジェクト名）.lolipop-now.appのURLですぐ共有できます。対応フレームワークは執筆時点でNext.jsです。最新の対応状況はデプロイナウの公式ドキュメントで確認してください。
まずは無料で、あなたのアプリを公開してみませんか。
よくある質問（FAQ）
Q. Webアプリは無料で公開できますか？
A. できます。静的なアプリなら無料の選択肢が複数あります。動的なアプリも無料プランで始められますが、停止条件や商用制限などプランの条件を確認してから選んでください。
Q. 公開したアプリを仕事や収益化に使ってもいいですか？
A. サービスとプランによります。無料プランが非商用限定のサービスもあるため、商用の可能性があるなら最初から商用利用可のプランを選ぶのが安全です。
Q. 自分のアプリが静的か動的かわかりません。
A. 表示するだけなら静的、入力・保存・AIやAPIの呼び出しがあれば動的です。作ってくれたAIに聞くのが確実で、迷ったら動的向けの公開先を選べば両対応できます。
Q. APIキーはどう扱えばいいですか？
A. コードに書いたまま公開せず、公開先の管理画面で環境変数として登録します。公開前にAIへ「キーがコードに残っていないか確認して」と頼んでおくと事故を防げます。
Q. Gitやコマンドがわからなくても公開できますか？
A. できます。管理画面から操作できるサービスや、AIエージェントに自然言語で頼める方法があります。コマンドの意味をAIに聞きながら進めるのも立派なやり方です。
Q. 独自ドメインは必要ですか？
A. 必須ではありません。公開先が発行するURLのままで問題なく共有できます。独自ドメインにすると、URLが短く覚えやすくなり、作品やサービスとしての印象も強まります。愛着が湧いてきたら、あとから設定してみてください。
Q. スマホアプリの「公開」とは違うのですか？
A. 別物です。App StoreやGoogle Playへの公開は審査や開発者登録が必要ですが、Webアプリはブラウザで開くため、この記事の手順だけで誰でも見られる状態になります。
まとめ
- 公開（デプロイ）は、アプリを作る作業とは別の独立したステップ
- 公開先は「静的か動的か」「無料の範囲と商用利用の可否」の2軸で絞る
- 手順は6ステップ。APIキーの流出と想定外の課金は、知っていれば防げる
作るところまでは、AIと一緒にたどり着けた。それなら公開も、身構えるほどのものではありません。今日作ったアプリが、今日のうちに誰でも開けるURLになります。
この記事をシェア
