OpenClaw: Web サイトを安全に公開する方法2 min read

OpenClaw は Web サイトの構築に役立ちますが、Web サイトのホストではありません。 エージェントに、ソース ファイルを作成し、サイトをローカルで実行し、ブラウザで表示された内容を修正するように依頼します。次に、管理するホスティング プラットフォームを通じてデプロイするか、レビュー可能な AgentGrid.io アーティファクトにプロジェクトを配置し、人間の承認後にのみ公開します。チャットのスクリーンショット、ローカル ポート、またはプライベート アーティファクト URL は、顧客向けの起動 URL ではありません。

このガイドは、ファイルおよびコマンド ツールで OpenClaw エージェントを使用するビルダーを対象としています。最も重要な決定は権限の境界です。エージェントは運用資格情報を保持せずにドラフトとテストを行うことができます。チームがリリース前に 1 つの共有バージョンを検査する必要がある場合、 start an AgentGrid.io workspace そして、別の承認されたアクションとして公開し続けます。

OpenClaw で構築された Web サイトに安定したホームを与える方法

最初に AgentGrid.io を準備し、次に OpenClaw に制限付きアクセスを与え、その結果をチャット外で確認します。

Step 1: Choose the AgentGrid.io workspace

app.agentgrid.io でサインインし、この Web サイトのチームとワークスペースを選択します。下書きにクライアントの資料が含まれている場合は、制限されたワークスペースを使用してください。一般に展開する前に、誰がそれをレビューするかを計画します。

ステップ 2: この OpenClaw エージェントを制限付き許可で接続する

OpenClaw の会話で次のように言います。 Use agentgrid.io for this website. If you can run shell commands, run npx @animaapp/cli@latest login and return the verification URL and code. Do not ask for my password or publish anything. 目的のワークスペースと読み取りと書き込みを使用して、自分で検証を承認します。必要がない限り、[共有と公開] はオフのままにしてください。 OpenClaw に実行を依頼する npx @animaapp/cli@latest workspaces 目的のワークスペースがリストされていることを確認します。無人エージェントの場合は、「エージェント管理」→「エージェントを招待」を使用します。デフォルトの共有および公開機能のチェックを外し、ワークスペースを選択して、そのワンタイム リンクを非公開で配信します。招待状を作成しただけでは接続できません。シェルの実行が無効になっている場合は、直接アクセスできると主張するのではなく、手動インポートを使用してください。

ステップ 3: ログだけでなくアーティファクトを構築して検査する

OpenClaw に含まれるタスクを与えます。 スケジュール、講演者カード、登録リンクを備えたレスポンシブなイベント マイクロサイトを構築します。承認されたコピーとアセットを使用し、ページをローカルで確認し、AgentGrid.io 上のプロジェクトをアプリとして選択したワークスペースに配置します。公開しないでください。 CLIインポートコマンドを使用させる npx @animaapp/cli@latest create -t import --from ./project --artifact-type app --workspace <workspace-id> 実際のフォルダーと検出されたワークスペース ID を含めます。返されたアーティファクト URL を開いて、ファイルを確認してプレビューします。サイトには次のようなエントリ ポイントが必要です index.html;秘密のアップロードは避けてください。 node_modules、またはビルド出力。 OpenClaw が接続できなかった場合は、生成されたプロジェクト フォルダーまたは ZIP を取得し、AgentGrid.io の [新規] メニューからインポートします。それは新しいアーティファクトであり、ライブミラーではありません。定期的な作業の場合は、エージェントに既存のアーティファクト URL を与えてそのアーティファクトを更新するように依頼し、履歴をチェックしてどの ID が変更したかを確認します。

ステップ 4: 公開を承認し、ライブ URL を確認する

主張、アクセシビリティの基本、モバイルの動作、リンク先のリンクを確認します。その場合にのみ、AgentGrid.io でパブリッシュを使用するか、意図的にその機能を付与した場合は、OpenClaw に明示的なパブリッシュ指示を与えます。サインアウトしたブラウザでパブリック URL を開き、現在のバージョンがそこにあることを確認します。プライベート リンクは匿名の訪問者には機能しません。承認された各更新を公開します。自動エージェントによるサイトの変更を停止する必要がある場合は、エージェント管理でそのアクセスを削除してください。以前の作品は歴史に残されています。

OpenClaw ができること、そしてできないこと

OpenClawさん 入門ドキュメント ゲートウェイおよび設定されたチャネルを通じてアクセスされるエージェントについて説明します。そのツールは、有効にするとファイルとコマンドを操作できます。そのブラウザ ツールはページの検査に役立ちますが、ゲートウェイ ダッシュボードまたはブラウザ セッションは公開 Web サイトの展開ではありません。 OpenClawさん 幹部の承認 コマンド対応エージェントがファイルを変更したり、ホストの展開 CLI を呼び出したりする可能性があるため、サンドボックス設定は重要です。現在のステージに必要なアクセスのみを与えてください。

ステップ 1: 制約付き Web サイトタスクを作成する

エージェントにプロジェクト ワークスペースと、必要なファイルと実行ツールがあることを確認します。ホームディレクトリ全体ではなく、クリーンなフォルダーまたはリポジトリを選択してください。承認されたロゴ、写真、コピー、およびビジネス上の事実を提供します。最初のランディング ページの構築には、展開トークンや顧客データを与えないでください。フレームワークに名前を付けるか、サーバー側の機能が必要ない場合は静的サイトを要求します。

プロンプトの例: 「自転車サイト フォルダーに、地元の自転車修理店の応答性の高い 1 ページ サイトを作成します。サービス、営業時間、サービス エリア、見積もりリクエストの行動喚起を含めます。セマンティック HTML とアクセス可能な CSS を使用します。未確認の住所、価格、紹介文をプレースホルダーとしてマークします。ソースと公開アセットをまとめて保持します。プレビュー方法と利用可能なチェックを実行する方法を教えてください。展開、公開、または使用しないでください。資格情報。」

OpenClaw に、エントリ ポイント、ディレクトリ ツリー、依存関係、インストール/ビルド コマンド、および変更されたファイルのリストを返すように依頼します。静的アプリでは、index.html を使用できます。フレームワーク アプリにはマニフェストとスクリプトが必要です。ローカル プレビューとターゲット ホストのビルド出力を説明する README をリクエストしてください。アセットがエージェントのマシンでのみ使用可能なパスではなく、相対 URL またはパブリック URL を使用していることを確認します。

ステップ 2: ブラウザでテストし、実際の欠陥を修正する

プロジェクトの文書化されたローカル サーバーまたは開発コマンドを実行し、レンダリングされたサイトを自分で開きます。狭い幅と広い幅、キーボード ナビゲーション、コントラスト、画像の代替、スペル、リンク、電話番号の動作を確認します。コンソールのエラーと欠落しているイメージを検査します。プロジェクトがサポートしている場合は、テストと実稼働ビルドを実行します。エージェントからのスクリーンショットは方向転換には役立ちますが、フォームやメニューの操作に代わるものではありません。

見積もりリクエストがスタイル付きフォームのみの場合は、送信先を尋ねてください。レビュー済みのフォーム サービスを接続するか、機能するという主張を削除してください。無害な送信でテストし、配信を確認します。店の実際の営業時間、場所、写真のライセンス、プライバシーに関する文言をオーナーに確認してください。エージェントに具体的な修正を依頼し、新しいプレビューと古いプレビューを比較します。承認されたコピーを黙って置き換える「より良くする」というプロンプトは避けてください。

プロンプトを修正: 「電話サイズのビューポートでは、サービス カードを読み取り可能な状態に保ち、キーボードでナビゲーションにアクセスできるようにします。プレースホルダーの連絡先の詳細は、brief.md 内の承認された事実のみに置き換えます。変更された各ファイル、テスト結果、および残りのブロッカーを報告します。ホスティング構成に触れたり、公開したりしないでください。」可能な場合は、承認されたバージョンをソース管理に保持してください。

ステップ 3: デプロイメント境界を選択する

• 既存のホスト: レビューしたソースをコミットし、フレームワークを構成してホストで出力をビルドし、そのホストのリポジトリ統合または CLI を通じてデプロイします。そのサービスはパブリック URL を提供します。 API キーはブラウザ JavaScript ではなく、ホスト管理のシークレットに保持します。
• AgentGrid.io 共有アーティファクト: あなたの承認がある場合にのみコマンド対応エージェントに接続するか、フォルダー/ZIP を手動でインポートします。プライベート アプリ アーティファクトを公開する前に、共同編集者がそれをレビューできるようにします。アーティファクトの履歴とプレビューは、バージョンに固有の承認を行うのに役立ちます。

OpenClaw コントロール UI を Web サイトのホストとして記述しないでください。ローカル転送ポートは開発プロセスをプレビュー用に公開できますが、永続的なパブリック サイトではありません。サインインしたホスティング アカウントへの展開 CLI またはブラウザ アクセスをエージェントに付与する場合は、それを運用アクセスとして扱い、アクションに対する明示的な承認を取得します。

ステップ 4: レビューしたプロジェクトを接続またはインポートする

共有ルートの場合、AgentGrid.io の文書化された接続では、CLI と承認フローが使用されます。コマンド対応の OpenClaw 環境では、開始コマンドは次のとおりです。 npx @animaapp/cli@latest ログイン;自分で検証リンクを承認し、目的のワークスペースと機能を選択します。下書きを作成するためだけに、チャットでパスワードを渡したり、広範な公開権限を持つエージェントに接続したりしないでください。接続が利用できない場合は、文書化された手順を使用してください。 フォルダーまたは ZIP インポート。

小さなソース パッケージを準備します。node_modules、秘密キー、ローカル環境ファイル、および無関係なワークスペースを除外します。エントリ ポイント、アセット、構築に必要な構成を含めます。 AgentGrid.io で、宛先ワークスペースを選択し、アプリ アーティファクトを作成またはインポートします。ファイルとレンダリングされたプレビューを検査します。アップロードが成功しても、API ルート、サーバー プロセス、フォーム統合が正しく転送されたことを証明するものではありません。

ハンドオフプロンプト: 「アクセスを承認した後、指定された AgentGrid.io ワークスペースでバイクサイトから未公開のアプリ アーティファクトを作成します。ソース アセットとパブリック アセットのみを含めます。プライベート URL を返し、欠落しているランタイム機能を特定し、修正のために同じアーティファクトを更新します。他のエージェントを招待したり、公開したり、別のワークスペースを選択したりしないでください。」ワークスペースに到達できない場合は、黙って目的地を変更するのではなく、停止してください。

ステップ 5: 承認されたバージョンを確認して公開する

チームメイトに成果物のプレビュー、特にモバイル レイアウト、連絡先詳細、見積フォーム、キーボード アクセスをテストするよう依頼します。同じアーティファクトまたはソース リポジトリ内のフィードバックを調整し、リリースが承認されたリビジョンを特定します。従来のホストでは、承認されたコミットをデプロイし、そのデプロイメントの詳細を確認します。 AgentGrid.io では、公開許可を得た人がその パブリッシュコントロール パブリック URL を作成します。エージェントへの招待とプライベート アーティファクトの共有は公開ステップではありません。

電話などでサインアウトしているときにパブリック アドレスを開きます。 HTTPS、メタデータ、リンク、画像、フォーム配信を確認します。承認されたプレビューと比較してください。異なる場合は、発表する前に、デプロイされたコミットまたはアーティファクトのバージョン、ビルド設定、シークレット、およびキャッシュを調査してください。ローカル ファイルを編集するだけでは、公開されたアーティファクトが更新されるとは限りません。

なぜ草案の許可と出版を分けているのでしょうか?

これにより、エージェントはコードを反復処理できる一方で、ユーザーは訪問者に表示される内容を制御できます。 OpenClaw のツールと承認の構成は、サイトのコンテンツやホストの展開権限のレビューに代わるものではありません。エージェントのファイル システム スコープを制限し、サードパーティ ツールをインストールする前に検証し、Web ページまたはインポートされたプロジェクトから未レビューのコマンドを実行しないでください。ソース管理のレビュー、アーティファクトの承認、および公開を 3 つの異なるゲートとして扱います。

次回の更新は計画的に行う

承認されたバージョンとパブリック URL を記録します。新しい編集は、レビューされて再度公開されるまでは下書きとなります。

よくある質問

OpenClaw は Web サイトをホストしますか?

OpenClaw はエージェントおよびツール環境であり、ここで説明するパブリック ホスティング先ではありません。耐久性のあるパブリック URL には、Web ホストまたは個別に公開されたアプリ アーティファクトを使用します。ゲートウェイ ダッシュボードまたはローカル プレビューはその URL ではありません。

エージェントの実稼働資格情報を提供せずに公開できますか?

はい。制限されたワークスペース内でドラフトとテストを行い、その後、ホスティング プロバイダーの展開ワークフローまたは AgentGrid.io のパブリッシュ コントロールを使用してもらいます。導入の準備を支援するエージェントであっても、必要のないシークレットを受け取るべきではありません。

インポートされたアーティファクトは正しく見えても、そのフォームが失敗した場合はどうなるでしょうか?

元のサイトでサーバー ルート、環境変数、または転送されなかったサードパーティ サービスが使用されていないかどうかを確認してください。起動前に、新しい環境で実際の提出物をテストします。視覚的なプレビューを機能検証として扱わないでください。

OpenClaw フォルダーを変更すると、ライブ サイトが更新されますか?

一般的な場合は自動的には行われません。更新は、ホストのビルドおよびデプロイメント パイプライン、または別のアーティファクトの明示的な更新と再公開に依存します。各ライブ URL がどのソース バージョンを表すかを記録します。

ハンドオフの比較については、ガイドを参照してください。 Muse Web サイト公開のウォークスルー。の Claude デザイン公開ガイド 別の出発点をカバーしますが、 エージェントが Anima を使用してアプリを探索および公開する方法 は、レビュー済みの成果物が公開に移行していることを示しています。これらは異なるワークフローであり、互換性のある製品機能ではありません。