作ったものを世界に公開する「デプロイ」を、AIと一緒にやってみた

PR本記事はアフィリエイト広告(プロモーション)を含みます。紹介する商品・サービスの選定基準や体験談は編集部の見解に基づきます。

この記事を読むと何ができるようになるか

「デプロイ」という言葉が指しているものを、専門用語を使わずに理解できます
無料のサービスを使い、AIに作ってもらった簡単なWebページを実際にインターネット上に公開する手順がわかります
自分で似たようなことを試すためのプロンプト例が3つ手に入ります

前回の記事「ノーコード×AIで簡単なWebアプリを作ってみた」では、ノーコードツールを使って、手元のデータをアプリのような形にしました。今回は少し違う角度から、「エンジニアがよく使う『デプロイ』という言葉は、結局何をすることなのか」を、実際に手を動かしながら理解してみた体験談を紹介します。

そもそもの疑問: 「デプロイ」って結局何をすること?

自分: エンジニアが「デプロイする」とよく言っていますが、これは結局何をしているんですか?

AI: 「デプロイ」とは、簡単に言うと「自分のパソコンの中だけにあるものを、インターネット上の誰もがアクセスできる場所に置くこと」です。料理に例えるなら、キッチンで作った料理(自分のパソコンの中にあるもの)を、お店のカウンター(インターネット上の公開場所)に運んで、お客さんが食べられる状態にする、というイメージに近いです。

「自分のパソコンの中にあるだけでは、誰も見られない」という当たり前のようで見落としがちな点が、最初の気づきでした。

AIに、公開までの流れを整理してもらう

自分: 自分のパソコンの中にあるだけのファイルを、実際にインターネットで公開できる状態にするまでの流れを教えてください。

AI: 大まかな流れは次の通りです。

公開したいファイル(Webページなど)を用意する

そのファイルを、公開作業を担ってくれるサービス(ホスティングサービス)に預ける

サービス側が、そのファイルをインターネット上の誰もがアクセスできる場所に配置する

発行されたURL(アドレス)にアクセスすると、誰でもそのページを見られるようになる

無料で使えるホスティングサービスも複数あり、非エンジニアでも試せる範囲のものがあります。

「用意する→預ける→配置される→URLで見られる」という4ステップに整理してもらえたことで、漠然としていた「デプロイ」のイメージがぐっと具体的になりました。

全体の流れ(図解)

① AIに簡単なWebページ(自己紹介ページ等)を作ってもらう
        │
        ▼
② 前回・前々回の記事で使ったGitの仕組みで、ファイルを保管庫(リポジトリ)に置く
        │
        ▼
③ 無料のホスティングサービスと保管庫を連携する
        │
        ▼
④ 公開(デプロイ)が実行され、URLが発行される
        │
        ▼
⑤ 発行されたURLに実際にアクセスし、公開されていることを確認する

💡 ポイント: 「デプロイ」は特別な魔法ではなく、「ファイルを、公開してくれるサービスに渡す」という一連の作業だと理解すると、身構えずに取り組めます。

今回作るもの: AIに作ってもらう簡単な自己紹介ページ

題材として、シンプルな自己紹介ページ(名前・簡単な紹介文・連絡先リンクだけのページ)を、AIに作ってもらうことにしました。

自分: プログラミング未経験者でも公開できる、シンプルな自己紹介ページのファイルを作ってください。名前・一言紹介・SNSのリンクだけのシンプルな内容でお願いします。

AI: シンプルなHTMLファイルを1つ作成しました。名前と一言紹介、リンクを差し込む部分は[ ]で示していますので、そこをご自身の情報に置き換えてください。ファイルは「index.html」という名前で保存すると、多くのホスティングサービスでそのままトップページとして認識されます。

出力されたファイルの中身を細かく理解する必要はなく、「[ ]の部分を自分の情報に書き換える」という作業だけで十分でした。

実際の手順: GitHubとCloudflare Pagesを使う

AIに、上記のようなプロンプトでシンプルな自己紹介ページのファイル(index.html)を作ってもらう
前々回の記事で使ったGitHubに、公開用の新しいリポジトリ(保管庫)を作成する
GitHub Desktopを使い、作成したファイルをそのリポジトリにコミット(記録)する
Cloudflare Pagesの公式サイトにアクセスし、無料アカウントを登録する
Cloudflare Pages側で「Gitに接続」を選び、先ほどのGitHubリポジトリを連携する
公開の設定(特別な設定は不要で、そのままのファイルを配信する設定)を確認し、デプロイを実行する
しばらく待つと専用のURLが発行されるので、実際にブラウザでアクセスし、ページが表示されることを確認する

前々回・前回の記事でGitに触れていたことで、「ファイルを保管庫に記録する」という工程に迷わず進めたのは、続けて学んできたメリットだと感じました。

⚠️ 注意: 無料のホスティングサービスは、それぞれ利用条件・無料枠の範囲が異なります。契約前に必ず公式サイトで最新の利用規約・料金プランを確認してください。また、個人情報や連絡先を公開ページに載せる場合は、公開してよい内容かどうかを事前によく検討してください。

うまくいかなかった点

最初、GitHubにファイルをアップロードしたものの、Cloudflare Pages側の「公開するフォルダ」の設定が合っておらず、ページが正しく表示されないというトラブルがありました。

自分: Cloudflare Pagesでデプロイはできたはずなのに、ページが正しく表示されません。何を確認すればいいですか?

AI: よくある原因の1つは、「どのフォルダの中身を公開するか」という設定が、実際のファイルの置き場所と合っていないことです。index.htmlがリポジトリの一番上の階層に置かれているか、公開設定がその階層を指しているかを確認してみてください。

指摘の通り確認したところ、公開フォルダの指定がずれていたことがわかり、設定を直したところ正しく表示されるようになりました。

💡 ポイント: うまく表示されないときは、慌てずにエラーメッセージや設定内容をそのままAIに伝えると、確認すべきポイントを具体的に教えてもらえます。

自分で試すためのプロンプト例(3つ)

プロンプト例(シンプルな公開用ページを作ってもらう場合):

プログラミング未経験者でも公開できる、シンプルな
[作りたいページの内容、例: 自己紹介ページ/作品紹介ページ]の
HTMLファイルを作成してください。
・含めたい内容: [内容を書く]
・書き換える部分は分かりやすく[ ]で示してください

プロンプト例(公開までの手順を自分の状況に合わせて整理してもらう場合):

[使いたいホスティングサービス名]を使って、
GitHubに置いたファイルを公開したいです。
非エンジニアにもわかるように、公開までの手順を
1ステップずつ整理してください。

プロンプト例(表示トラブルの原因を確認してもらう場合):

[使っているホスティングサービス名]でデプロイしたのですが、
ページが正しく表示されません。
確認すべきポイントを、初心者にもわかるように
教えてください。

現在の状況: [気づいたことをそのまま書く]

💡 ポイント: トラブルが起きたときほど、状況をできるだけ具体的に伝えることが、的確なアドバイスをもらう近道です。

まずはここから: 最初の一歩

まず、前々回の記事を参考にGitHubのアカウントとGitHub Desktopを用意する(すでにお持ちの場合はそのまま使えます)
上記のプロンプト例を使い、AIにシンプルな公開用ページ(index.html)を作ってもらう
Cloudflare Pagesの公式サイトにアクセスし、無料アカウントを登録する
GitHubのリポジトリとCloudflare Pagesを連携し、実際にデプロイしてみる
発行されたURLに実際にアクセスし、公開されていることを自分の目で確認する

使用例: 副業でイラストの仕事を探すデザイナー志望・大塚さんのケース

副業でイラストの仕事を探している大塚さんの例です。大塚さんは、SNSに作品を投稿していましたが、「まとめて見てもらえるページが欲しい」と感じていました。

まず「シンプルな公開用ページを作ってもらう」プロンプトを使い、名前・簡単な自己紹介・SNSへのリンクだけのシンプルなページを作ってもらいました
前々回の記事で使ったGitHub Desktopを使い、ファイルをリポジトリに記録しました
Cloudflare Pagesに登録し、リポジトリと連携してデプロイを実行しました
最初は公開フォルダの設定がずれて表示されないトラブルがありましたが、「表示トラブルの原因を確認してもらう」プロンプトでAIに相談し、無事に解決しました
発行されたURLを、SNSのプロフィール欄にリンクとして掲載しました

大塚さんいわく、「『公開する』という工程を自分の手で最後までやり切れたことで、次はページの内容をもっと工夫してみたいという気持ちが湧いた」とのことでした(これは大塚さんの体感であり、当社が効果を計測した数値ではありません)。

Before/After: 「デプロイ」への理解の変化

項目	AIと一緒にやってみる前	やってみた後
デプロイのイメージ	「エンジニアがやる難しい作業」	「ファイルを、公開してくれるサービスに渡す作業」
トラブルへの向き合い方	エラーが出たら諦めていたかもしれない	状況をAIに伝えて確認しながら進められた
次への意欲	「自分には関係ない」と思っていた	公開したページの内容をもっと工夫したくなった

※上記は一般的に想定される変化の整理であり、当社が数値として計測したものではありません。

気をつけたいこと

公開するページに、個人情報や連絡先を載せる場合は、公開してよい範囲かどうかを事前によく検討してください
無料のホスティングサービスも、利用規約や無料枠の範囲が変わることがあります。契約前に必ず公式サイトで最新情報を確認してください
公開後にページの内容を修正したい場合は、元のファイルを修正して再度同じ手順でデプロイし直す必要があります

⚠️ 注意: インターネット上に公開したページは、原則として誰でも見られる状態になります。公開する前に、内容に問題がないか一度落ち着いて見直すことをおすすめします。

よくある質問

Q. デプロイには専門的なプログラミング知識が必要ですか? 本記事で紹介した範囲(シンプルなページの公開)であれば、専門的なプログラミング知識がなくても体験できます。AIに作ってもらったファイルを、手順通りに公開作業に乗せるだけです。

Q. 無料の範囲でずっと公開し続けられますか? サービスやプラン内容によります。契約前に必ず公式サイトで最新の利用規約・料金プランを確認してください。

Q. もっと複雑なものも公開できますか? 本記事はあくまで「デプロイという概念を体験する」ことを目的にしたシンプルな例です。より複雑なアプリを公開する場合は、別途専門的な知識が必要になる場面も出てきます。

まとめ

「デプロイ」とは、自分のパソコンの中にあるだけのファイルを、インターネット上の誰もがアクセスできる場所に置く作業だと理解すると、専門用語の壁がぐっと下がります。前々回のGitの体験、前回のノーコードアプリの体験と組み合わせることで、「作る」だけでなく「世界に公開する」までの一連の流れを、非エンジニアでも一通り体験できます。まずは、AIに作ってもらったシンプルなページを、無料のサービスで公開してみることから始めてみてください。