AIエージェントを使えば、以前より短時間でWebアプリを作れるようになりました。
ローカル環境で動かしているだけでも十分楽しいですが、せっかく作ったアプリなら、実際に誰かに使ってもらいたくなります。
しかし、ここで多くの人が手が止まります。
- ローカルでしか動かない
- VPSを契約したものの、何から始めればいいか分からない
- 「デプロイ」という言葉だけで難しそうに感じる
私も最初は同じでした。
実際にやってみると、アプリそのものよりも、サーバー側の設定や公開手順で悩むことの方が多かったです。
この記事では、Xserver VPSを使って、AIで作ったWebアプリを実際に公開するまでの流れを紹介します。
今回はDocker Composeで動くWebアプリを例に、
- VPSへコードを配置する
- アプリを起動する
- ブラウザからアクセスできることを確認する
ところまで、実際の手順に沿って進めます。
なお、このシリーズでは最終的にCoolifyを導入し、GitHubへPushするだけでデプロイできる環境まで構築していく予定です。
前提条件
この記事では、Xserver VPSを契約するところから、AIで作ったWebアプリをインターネットへ公開するまでの流れを紹介します。
そのため、まだVPSを契約していない方でも、このまま順番に進められます。
なお、VPS選びで迷っている場合は、先にこちらの記事をご覧ください。
この記事では、次の環境で動作を確認しています。
- VPS：Xserver VPS
- OS：Ubuntu 24.04
- アプリイメージ：Coolify
- ソースコード：GitHubで管理
今回公開するアプリは、Docker Composeで起動できるWebアプリを想定しています。
PythonやNode.jsなど、言語が違っていても基本的な流れは同じです。
VPSを契約する
今回は、Coolifyのアプリを手間なしで構築できるXServer VPSを利用します。
XServer VPSを利用しない方は、別途Coolifyをインストールしないといけないので注意してください。
＼ XServer VPSはこちら ／
VSPの申し込み画面
上記で記載したボタンを押して、XServer VPSを開き、申込をすると下記の画面が表示されるかと思います。
基本は、必須のところを埋めてもらえればOKです。
サーバー名
サーバー名は、お好きな名前を入力してもらって構いません。
複数サーバーを契約する予定の方は、区別しやすい名前を設定するようにしてください。
イメージタイプは、アプリケーション＞Coolifyを選択しよう
イメージタイプは、アプリケーション＞サーバー管理・その他ツール＞Coolifyを選択します。
プランは、最小構成で問題なし
プランは、基本最小構成で問題ありません。お手軽プランか推奨プランのどちらかを選択しましょう。
今回の手順では、一番安いお手軽プランを選択しています。
rootパスワードは、推測されないパスワードを設定しよう
rootパスワードは、ご自身で忘れない推測されないパスワードを設定しましょう。
このパスワードが漏れてしまうと、第三者が不正にアクセスしてくる可能性もあります。
デフォルトポート開放は、チェックが付いたままにしておこう
デフォルトポート開放は、基本的にチェックが付いた状態になっていると思うので、そのままにしておきましょう。
もし、チェックが付いていない場合は、必ずチェックを付けるようにしてください。
最終的な内容
次に進むと、確認画面が表示されます。
イメージタイプがCoolifyになっていることを確認してください。（Coolifyになっていない場合、手動でCoolifyをインストールすることになります。）
問題なけれは、支払いに進みましょう
Coolifyの設定をする
VPSの契約が完了すると、下記のようにサーバーが稼働中になるかなと思います。
もし、構築中のままの場合、10分程度まてば稼働中になります。
VPS管理ボタンを選択しましょう。
VPS情報が表示されている画面に遷移すると思いますので、コンソール＞シリアルコンソールを選択します。
root/[パスワード]でログインができると思います。
ログインができたら、「bash setup.sh」を実行するだけです。
ここまでできたら、IPアドレスをコピーしましょう。
ブラウザで、「http://[vpsのIPアドレス]:8000」を入力してもらえると、Coolifyのアカウント登録画面が表示されると思います。必要な情報を入力して、Create Accountを選択してください。
アカウントが作成できたら「Welcome to Coolify」になっていると思います。
「Let’s go!」を選択しましょう。
Choose Server Typeが出てくると思いますので「This Machine」を選択します。
次もそのまま「Create ”My Firest Project”」を選択します。
次も案内通りに「Deploy Your First Resource」を選択しましょう。
ここから好きなリソースからデプロイができるのですが、今回は「Private Repository [with GitHub App]」を選択することにします。しかし、まだGitHubの登録などができていないのでいったんこの状態で止めておきましょう。
ドメインを取得する
次に、ドメインを取得します。ドメインは、「〇〇.com」とかの部分です。
XServer VPSを使っているので、XServer ドメインがおすすめです！
＼ XServer ドメインはこちら ／
ほしいドメイン名を入力して、「検索する」を選択します。
お申込内容の選択は、「ドメインのみ申込」を選択しましょう。
基本的には、人気のドメインの中から選ぶと良いかなと思います。ドメインによって値段が変わるので注意しましょう。
「取得手続きに進む」を選択します。
取得が完了すると、ドメインの一覧にドメイン名が載っているはずです！
ネームサーバー設定は、下記のようになっていれば問題ありません。もしXServer VPSになっている人がいたら、XServer Domainに変更しておくと良いかと思います。
次にDNSレコードの設定をします。
ドメイン一覧の・・・のボタンを選択＞DNSレコード設定を押下します。
ここにDNSレコード設定を追加で、下記2つのレコードを追加しましょう。
ドメイン部分はご自身のドメインに置き換えてください。
- coolify.[ドメイン]:Coolify用
- app.[ドメイン]:アプリ用
Coolifyに戻ってもらって、一旦Settingsを開き、GeneralのURLのところに「coolify.[ドメイン]」を入力します。
そうすると、「coolify.[ご自身のドメイン]」でCoolifyのログイン画面が表示されるようになっているかと思います。
GitHubの設定をする
次に、GitHubのアカウントを作成しておきましょう。
作成ができたら、「New」ボタンから新しいリポジトリを作成しておきます。
リポジトリ名は、お好きな名前を入力してください。
ソースを公開してよければPublicでもいいのですが、公開したくない場合はPrivateを選択しておきましょう。
これでGitHubでの操作も完了です。
AIエージェントでアプリを作成する
次に、アプリを作成しておきます。もし、すでにアプリを作っている人は、スキップでも問題はないです。
注意点としては、Docker Composeを使っていた方が、デプロイが楽なのでDocker Composeに対応させておいてください。
DBも今回はPostgresをつかっていますが、お好きなものをDockerで管理しておけばよいかと思います。
チャット形式でメモが取れるWEBアプリを作成してほしい。
・Docker Composeを使ってほしい
・DBはpostgresを使ってほしい作ってもらったら、docker-compose.ymlがあるか確認をしましょう。
私はこんなアプリをとりあえず作ってもらいました。
GitHubにプッシュする
そこまで出来たら、次にGitHubにプッシュをするところになります。
GitHubに新しくリポジトリを作成したときに、下記のような画面が表示されていたかと思います。
READMEは、すでにあるので少し手順を省きます。
また、git add も一旦作ってもらったコードをすべて対象にしたいのでコマンドを変えています。
※もしコマンドの実行の仕方がわからない方は、AIに頼んでみるといいかもしれません。
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin [ご自身のURL]
git push -u origin main一通りコマンドが実行出来たら、下記のようにGitHub上にソースコードが連携されているかと思います。
ここまでできたら、GitHubへのプッシュも完了です！
GitHubとCoolifyを連携させてデプロイする
では、最後にGitHubとCoolifyを連携させてデプロイしてみましょう。
まずは、CoolifyとGitHubを連携させます。Sourcesから「+Add」を選択しましょう。
名前は好きなように入力して、Continueを選択します。
そのまま、Register Nowを選択します。
GitHubのページに遷移すると思いますので、そのまま承認をしてください。
問題なく連携できたら、下記のようになっているかと思います。
次にプロジェクトを作成するのですが、先ほど途中でやめてしまっているので、My first projectが既に作られているかなと思います。
今回はこれを使いますが、名前が嫌な方はプロジェクトを新しく作ってもいいかと思います。
次に、+Add Resourceを選択します。
すると、最初と同じようにリソース選択画面が表示されます。
Private Repository (with GitHub App)を選択しましょう。
先ほど、連携したGithHubの名前が出てくると思いますので、そちらを選択しましょう。
Repositoryは、デプロイしたいRepositoryを選択します。
選択できたら、Load Repositoryを選択しましょう。
Load Repositoryを選択したら変更する箇所は、2つあります。
まず、1つ目がBuild Packです。こちらは、今回「Docker Compose」を選択します。
もう一つが、Docker Compose Locationになります。こちらがyamlの場合と、ymlの場合があって。
AIで作るとymlになることが多いので、.ymlに変更しておきます。.yamlになっている人はそのままで大丈夫です。
確認出来たら、Contifueで次に行きます。
次は、ドメインの設定です。
ドメインを払い出したときに、「coolify.[自身のドメイン]」と「app.[自身のドメイン]」の2種類をDNSレコード設定で登録したと思います。
今回は、「app.[自身のドメイン]」を利用して、「https://app.[自身のドメイン]」でDomainsに登録します。
※Generate Domainで適当なドメインを払い出すこともできます。
最後にSaveを忘れずに実施してください。
ここまでできたら、Deployボタンを選択します。
少しまっていると、「Running」になると思います。Runningになったら「https://app.[自身のドメイン]」にアクセスしてみましょう！
このように独自ドメインでアプリを公開できるはずです！
さいごに！
AIエージェントのおかげで、Webアプリを作るハードルは一気に下がりました。
一方で、「公開する」という部分は、今でも少し難しく感じる方が多いと思います。
私自身も最初は、サーバーやドメイン、デプロイの設定で何度もつまずきました。しかし、一度環境を整えてしまえば、あとはアプリを作ることに集中できるようになります。
今回の記事では、XServer VPSとCoolifyを使って、AIで作成したWebアプリをインターネットへ公開するところまで紹介しました。
AIで作ったアプリは、公開して初めて「使ってもらえるサービス」になります。
ぜひ、自分だけのWebアプリを世界に公開してみてください。
