レンタルサーバーやSSL関係のお役立ちコラム

さくらのホームページ教室

Codexでサイトを作ってさくらのレンタルサーバーで公開する ― Codex × アップロードスキル

Claude Codeを利用の方は、下記のページを参照ください。

目次

AIでサイトを作って公開するまで

アップロードスキルはベータ版です。ご利用の環境(AIエージェントやモデルの組み合わせなど)によっては、うまく動かない可能性があります。

AIエージェントに話しかけるだけで、Webサイトの見た目やページ構成をつくることができます。ただ、できあがったサイトを実際にインターネットへ公開するには、サーバーへファイルを送り、正しく表示されるか確認する、という作業が別に必要です。

この記事では、AIエージェント「Codex(コーデックス)」で小さなコーヒーショップのサイトをつくり、それをさくらのレンタルサーバーで公開するところまでを、ひと続きの流れとしてご紹介します。次の順で進みます。

  1. Codex を用意する
  2. プロンプトでサイトをつくる
  3. ブラウザで表示を確認する
  4. ドメインとSSLを設定する
  5. アップロードスキルを読み込む
  6. 最初に、利用シーンを聞かれます
  7. 準備ガイドを確認する
  8. 環境の確認は自動で行われます
  9. SSH公開鍵を用意する
  10. 接続情報を伝える
  11. 公開する
  12. 修正して、もう一度公開する

以下の見出しには、この順番と対応する「Step」の番号を振っています。「1つのドメインに複数のサイトを置く」以降は、必要になったときに読む補足です。

公開の部分で使う「レンタルサーバーSkills(アップロードスキル)」は、AIエージェントに一連の作業手順を渡す仕組みです。読み込ませると、AIエージェントがさくらのレンタルサーバーへの接続・ファイル転送・公開後の表示確認までを、決められた手順で進めます。

なお、アップロードスキルは現在、ベータ版として提供しています。AIエージェントやモデルの種類・バージョンは今後も増えていき、その組み合わせや利用環境もさまざまなため、すべての組み合わせを検証しきれていません。お使いの環境によっては、手順が一部省略されたり、案内の表現がこの記事と異なったりすることがあります。うまくいかないときは、後半の「よくある質問」もご覧ください。ベータ版のため、意図しない動作をする可能性があります。AIエージェントが示す接続内容(アカウント名・ドメイン・転送先など)は、接続する前によく確認してください。すでにサイトや大切なファイルがあるフォルダーへアップロードする場合は、あらかじめバックアップを取っておくことをおすすめします。

Codexは、Anthropic社の「Claude Code」と同じように使えますが、実行のしくみの違いから、一部の手順で少し違う対応が必要になる場面があります。この記事では、その違いが出る場面ごとに「Codexをお使いの場合」として具体的な対処もあわせて説明します。Claude Codeをお使いの場合は、別の記事(AIでサイトを作ってさくらのレンタルサーバーで公開する ― Claude Code × アップロードスキル)をご覧ください。

なお、業種に合わせてしっかり作り込んだサイトを用意したい場合は、専用の「サイト作成スキル」を使う方法もあります(「サイト作成スキル」でサイトを開設する流れ:デザイン確認から動作確認まで)。この記事では、まず一番手軽な「プロンプトで依頼する」方法で進めます。

用意するもの

  • さくらのレンタルサーバー(スタンダードプラン以上):ファイル転送にSSHという接続方式を使うため、SSH接続に対応したプランが必要です。スタンダードプラン以上が対応しています。
  • Codex(基本的に有料プラン):OpenAI(オープンエーアイ)社が提供するコーディング向けのAIエージェントです。無料プランでも少しは使えますが、すぐに利用回数の上限(レート制限)に達してしまい、この記事の手順を最後まで進めるのは難しくなります。 基本的には有料プランのご利用が前提になります。プラン内容は変更されることがあるため、最新情報はCodexの公式サイト(Codex公式サイト)でご確認ください。
  • Node.js(ノードジェイエス):ファイル転送に使う土台のソフトです。バージョン20.19以上、または22.12以上が必要です。入っていない場合は、あとの「環境の確認は自動で行われます」で案内があります。
  • 公開するドメインと、無料SSLの設定:さくらインターネットの初期ドメイン(契約時に発行される「〇〇.sakura.ne.jp」)でも、独自ドメインでも公開できます。設定は「ドメインとSSLを設定する」で行います。
  • 上位モデル・推論レベル「中」以上の設定:このスキルは手順が長く複雑なため、Codexの中でも上位のモデルを、推論レベル「中」以上に設定してお使いください。下位モデルや軽量モデル、低い推論レベルでは、手順の一部が省略されるなど正しく動作しない場合があり、動作を保証できません。 どのモデル・推論レベルが上位にあたるかはCodexの更新にあわせて変わるため、そのときに使える最も上位のものを選んでください。執筆時点(2026年9月)では、GPT-5.6 Terra(推論レベル「中」)以上でこの記事の手順を確認しています。

Step 1. Codex を用意する

Codexは、ターミナル(コマンドを打ち込む黒い画面)で動かす「Codex CLI」という形と、ChatGPTアプリの中でコーディングを任せる形の、大きく2つの使い方があります。どちらを使うかによって準備の手順が変わるため、詳しい導入方法はCodexの公式サイト(Codex公式サイト)の案内に沿って進めてください。Codexを起動したら、モデルと推論レベルを「用意するもの」で説明した基準(上位モデル・推論レベル「中」以上)に設定してから、次に進んでください。

この記事では、この後の手順の中で、Codexに直接指示を送りながら進めます。Codexを起動し、話しかけられる状態にしてから、次に進んでください。

Step 2. プロンプトでサイトをつくる

いきなり「サイトを作って」と頼む前に、まずはどんなサイトにするかを相談し、指示文(プロンプト)を用意します。この指示文の質でサイトの仕上がりが大きく変わるため、ここで方向性を固めます。見栄えのよいサイトになりやすいよう、Tailwind CSS というスタイルの仕組みを使うよう伝えるのがポイントです。

プロンプト

シックで落ち着いたコーヒーショップのサイトを作るためのプロンプトを作成して。
スタイルには Tailwind CSS を使って。

指示文ができると、ページの構成・配色・デザインの方針が示されるので、イメージに合うところまで調整します。固まったら、その指示文で完成イメージの表示を依頼し、希望どおりになるまで調整を繰り返します。指示文と完成イメージが固まったら、サイトの作成を依頼します。

このように、指示文だけでも一からサイトをつくることができます。一方で、業種に合ったデザインや構成、配色パターンの比較検討、お問い合わせフォームまで含めて作り込みたい場合は、「サイト作成スキル」を使う方法があります(「サイト作成スキル」でサイトを開設する流れ:デザイン確認から動作確認まで)。

Step 3. ブラウザで表示を確認する

Codexの中でもサイトを確認できますが、ブラウザで開くと全体像をつかみやすくなります。「ブラウザでプレビューしたい」と伝えると、確認用のURLが案内されるので、ブラウザで開いて確認します。

プロンプト

ブラウザでプレビューしたい

内容や見た目で直したいところがあれば、この段階で伝えて調整します。ここで確認しているのはパソコン内での表示で、インターネットにはまだ公開されていません。

Step 4. ドメインとSSLを設定する

サイトができたら、公開先のドメインと、通信を暗号化するSSLを設定します。サーバーへ接続するための「SSH公開鍵」も必要ですが、こちらは次のアップロードスキルの手順の中で用意します。

ドメインを設定する

さくらのレンタルサーバーのコントロールパネルを開き、左メニューの「ドメイン/SSL」→「ドメイン/SSL」と進みます。画面右側の「ドメイン新規追加」をクリックします。

コントロールパネルの「ドメイン/SSL」設定画面と「ドメイン新規追加」ボタンの位置

公開に使うドメインは、お持ちの独自ドメインでも、さくらインターネットのサブドメイン(初期ドメインのもとに作る「任意の名前.〇〇.sakura.ne.jp」)でも構いません。どちらでも、このあとの手順は同じです。独自ドメインを追加する手順は、さくらインターネットのヘルプ「ドメインを設定したい」(https://help.sakura.ad.jp/purpose_beginner/2589/)をご覧ください。以降の画面は、サブドメインを追加した例です。さくらインターネットのサブドメインを使う場合は、別途ドメイン費用はかかりません。詳細は、さくらインターネットのヘルプ「さくらインターネットのサブドメインを設定したい」(こちら)をご覧ください。

さくらインターネットのサブドメインを追加する画面

SSLを設定する

追加したドメインに、通信を暗号化するSSLを設定します。追加したドメインの「設定」→「基本設定」から設定画面を開き、SSLを利用する設定にして保存します。

SSL設定画面。「SSLを利用する」にチェックを入れて保存する操作

しばらくすると、対象のドメインに「共有SSL」などSSLの種類が表示されます。無料SSL(Let's Encrypt)について詳しくは、さくらインターネットのヘルプ「無料SSL(Let's Encrypt)を設定したい」(https://help.sakura.ad.jp/rs/2153/)をご覧ください。

ドメイン/SSLページで対象ドメインにSSLの種類が表示された状態

Step 5. アップロードスキルを読み込む

準備ができたら、アップロードスキルをCodexに読み込ませます。「アップロードして」「デプロイして」のどちらの言い方でも、同じスキルが動きます。

Codexをお使いの場合は、スキルの配布URLをそのまま渡すのではなく、あらかじめパソコンにダウンロードしておき、そのフォルダの場所を伝える方法をおすすめします。 次のURLからzipファイルをダウンロードし、展開してください。展開先は、次回以降も迷わず見つけられるよう、~/deploy-skill/のような分かりやすい固定の場所にしておくことをおすすめします。すでに同じ場所に古いバージョンがある場合は、中身を削除してから展開し直すと、古いファイルが混ざりません(サイトの登録情報は別の場所に保存されるため、スキル本体を削除・入れ替えても消えません)。

スキルのダウンロード

アップロードスキル(zipファイル)

sakura-rental-server-upload-skills_latest.zip(常に最新版)

ダウンロード

プロンプト

(展開したフォルダの場所)のSKILL.mdを読み込んで、手順どおりに進めて

Codexの実行環境は、既定でインターネットへのアクセスが制限されていることがあります。加えてこのアップロードスキルは、手順書本体(SKILL.md)のほかに、準備ガイドやファイル転送用のプログラムなど、複数のファイルを追加で読み込む必要があります。URL経由で1つずつ取得しようとすると、そのたびにアクセスが必要になり失敗しやすくなるため、最初からローカルに置いておいたほうが確実に進みます。

読み込むと、AIエージェントはスキルの手順に沿って進め始めます。

Step 6. 最初に、利用シーンを聞かれます

アップロードスキルは、はじめに次の3つのうちどれに近いかを質問します。

  1. 初めての利用(このスキルでの公開が初めて)
  2. 設定済みで、同じサイトをもう一度アップロードしたい
  3. 設定済みだが、今回は別のサイトを新しくアップロードしたい

「1. 初めての利用」を選んだときだけ、このあと準備ガイドの表示と、接続情報の確認を最初から行います。「2」「3」を選んだ場合は、前回の設定を引き継ぐため、確認が少なくなります。初めて公開する場合は「1」を選びます。

Codexにアップロードスキルを読み込ませ、利用シーンの3択が表示された画面

Step 7. 準備ガイドを確認する

「初めての利用」を選ぶと、AIエージェントが「アップロード準備ガイド」をブラウザで表示します。ドメインとSSLの設定、SSH公開鍵の登録、公開前に控えておく情報など、公開に必要な準備が一通りまとまっています。

アップロード準備ガイド(guide.html)。ドメイン設定など初回セットアップの流れが画面スクリーンショット付きで説明されている

あわせて、次のような案内が表示されます。

  • Node.jsが未導入・古い場合だけ、確認結果に従って導入します。
  • 転送を始める前に、一度だけ転送用のライブラリを導入します。
  • SSH公開鍵が必要です。なければ作成し、コントロールパネルへ登録します。秘密鍵の中身は共有しないでください。
  • 公開は、接続内容を提示し「この内容で接続してよいですか?」の確認をいただいたあとにだけ行います。

ガイドを確認したら、「確認しました」と伝えます。この返事をするまで、AIエージェントは次に進みません。

Codexをお使いの場合、このガイドがブラウザに自動で表示されないことがあります。 セキュリティ上の理由で、パソコン内のファイルの表示が制限されているためです。この場合、AIエージェントは自動的に別の方法(パソコンの既定のブラウザで直接開く、それも難しければ内容をテキストで案内する)に切り替えるので、読者側で何か特別な操作をする必要はありません。「表示できませんでした」という返答だけで止まっている場合は、次のように伝えてください。

プロンプト

ガイドを表示して

それでも表示されない場合は、そのままテキストでの案内を受け取って、内容を確認してから「確認しました」と伝えれば、そのまま次に進むことができます。実際に、パソコン内のファイル表示が制限されてブラウザで開けなかったときの例を挙げます。このときは、ガイドの保存場所とあわせて要点がテキストで案内され、「お手数ですが、Finderからguide.htmlを開いてください」と案内されました。表示された案内文の中の「guide.html」の部分がリンクになっており、クリックするとそのまま表示されることもあります。案内文の内容をよくご確認のうえ、指示にしたがって開いてください。

Codexでガイドがブラウザに自動表示されず、保存場所とテキストでの要点案内に切り替わった画面

Windowsをお使いの場合も同じ制限が起こります。保存場所のパスがバックスラッシュ区切り(C:\Users\...)になる以外は、Macのときと同じ流れです。

出力例

ガイドはブラウザのローカルファイル制限によりこちらから開けませんでした。以下を開いて確認してください。
(案内されたスキルのフォルダ)\guide.html

このように保存場所のパスだけが示され、自分でファイルを探して開くのが難しいと感じた場合は、無理に自分で開こうとせず、もう一度「ガイドを表示して」と伝えてみてください。 それだけで表示されるようになることがあります。それでも表示されない場合は、案内されたテキストの内容を確認するだけで、そのまま次に進むことができます。

Step 8. 環境の確認は自動で行われます

準備ガイドの確認が済むと、AIエージェントが公開できる状態かどうかを自動で確認します。確認するのは、Node.jsのバージョンが条件を満たしているか、ファイル転送用のライブラリが入っているか、SSH接続に使う鍵があるか、といった項目です。

結果はまとめて表示され、「次のステップへ進めるか」が「はい」になっていれば、そのまま次の手順に進みます。

Codexでの環境確認結果(成功)と、続けて接続情報を尋ねられている画面

「いいえ」だった場合は、表示された内容に応じて対応します。よくあるのは次の2つです。

  • Node.jsが見つからない、またはバージョンが古い:Node.js の公式サイトから、推奨版(20.19以上、または22.12以上)を入れ、画面を開き直してから、もう一度確認してもらいます。
  • SSH接続に使う鍵が見つからない:次の「SSH公開鍵を用意する」で対応します。

Codexをお使いの場合、パソコンには実際にNode.jsが入っているのに「この環境にNode.jsが入っていません」と案内されることがあります。 Codexは、普段自分が使っているパソコンの画面(PowerShellやターミナルなど)とは別の、制限された場所でコマンドを実行していることがあるためです。

Node.js自体は検出できても、npmや.sshフォルダーへのアクセスだけが制限され、「環境確認がこの実行環境では未完了です」と中途半端な状態で案内されることもあります。この場合、Codex自身にも「本当にパソコンに入っていないのか、実行環境の制限で見えていないだけなのか」は判断できません。 そのため、必ず自分が普段使っている画面(PowerShellやターミナルなど)に切り替えて確認するよう案内されます。

実際には、次のように案内されます。

出力例

環境確認は、この実行環境では未完了です。Node.js は検出できましたが、npm と(ユーザーの.sshフォルダー)へのアクセスが制限されています。接続・転送にはまだ進めません。

ご自身の通常のPowerShellで、次を実行してください。

コマンド

cls
node "(案内されたスキルのフォルダ)\upload.mjs" --check

この案内が出た場合は、まず自分が普段使っている画面(PowerShellやターミナルなど、いつもコマンドを打っている場所)で、案内されたコマンドをそのまま実行してください。

  • コマンドが成功し、環境確認結果のブロックが表示された場合:その内容をそのままコピーしてAIエージェントに貼り戻せば、案内どおりに手順を続けることができます。
  • コマンドがエラーになった場合(例:Windowsで「用語 'node' は、コマンドレット、関数、スクリプト ファイル、または操作可能なプログラムの名前として認識されません。」のように表示される):そのエラーメッセージも、省略せずそのままコピーしてAIエージェントに伝えてください。 エラーの内容から、AIエージェントが次にすべき案内(Node.jsの導入など)を判断します。「エラーが出たので分からない」と自分で判断せず、出た内容をそのまま伝えるのがポイントです。

実際に表示される内容は、たとえばWindowsのPowerShellでは次のようになります。Node.jsが入っていない場合はエラーが表示され、入っている場合は環境確認結果のブロックが表示されます。

Node.jsが入っていない場合の例:

出力例

PS C:\Users\(ユーザー名)> node "(案内されたスキルのフォルダ)\upload.mjs" --check
node : 用語 'node' は、コマンドレット、関数、スクリプト ファイル、または操作可能なプログラムの名前として認識されません。名前が正しく記述されていることを確認し、パスが含まれている場合はそのパスが正しいことを確認してから、再試行してください。
発生場所 行:1 文字:1
+ node "(案内されたスキルのフォルダ)\upload.mjs" --check ...
+ ~~~~
    + CategoryInfo          : ObjectNotFound: (node:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

Node.jsが入っている場合の例:

出力例

PS C:\Users\(ユーザー名)> node "(案内されたスキルのフォルダ)\upload.mjs" --check

===== 環境確認結果 ここから =====
環境確認結果: 成功
OS: win32 (x64)
Node.js: あり: v24.20.0
npm: あり: v11.19.0
.ssh フォルダー: あり・読取可
使用可能な鍵のパス: C:\Users\(ユーザー名)\.ssh\sshkey
次のステップへ進めるか: はい
===== 環境確認結果 ここまで =====

前者のようなエラーが出た場合は、そのエラーメッセージをそのままコピーしてAIエージェントに伝えてください。後者のように成功した場合は、そのブロックをそのまま貼り戻してください。

普段使っている画面でもNode.jsが確認できない、またはエラーが解消しない場合は、上記の「Node.jsが見つからない」の対応に進んでください。

Step 9. SSH公開鍵を用意する

サーバーへの接続には「公開鍵」と「秘密鍵」という、2つで1組の鍵を使います。手元に秘密鍵を置いたまま、公開鍵だけをさくらのコントロールパネルに登録します。

鍵をまだ持っていない場合は、この初期設定のステップの中でそのまま作成するのがおすすめです。 環境の確認で鍵が見つからないと、アップロードスキルが鍵の作成コマンドを案内します。実行すると ~/.ssh/sshkey という鍵が1組つくられます(すでに鍵がある場合は、上書きされず、その鍵がそのまま使われます)。さくらのコントロールパネル(左メニュー「サーバー情報」→「SSH公開鍵」)で作成することもできます。

鍵ができたら、公開鍵をコントロールパネルに登録します。左メニューの「サーバー情報」→「SSH公開鍵」→「新規追加」と進みます。

コントロールパネルの「サーバー情報」→「SSH公開鍵」→「新規追加」ボタンの位置

「作成済みの公開鍵を登録」を選び、公開鍵ファイル(拡張子が .pub のファイル)の中身を貼り付けて保存します。秘密鍵の中身は、AIエージェントにもチャットにも貼らないでください。

「作成済みの公開鍵を登録」を選び、公開鍵の内容を貼り付ける画面

登録したら、AIエージェントに「公開鍵を登録しました」と伝えます。この返事をするまで、ファイルの転送には進みません。SSH公開鍵について詳しくは、さくらインターネットのヘルプ「SSH公開鍵認証の設定をしたい(手動で作成した公開鍵を登録)」(https://help.sakura.ad.jp/rs/2804/)をご覧ください。

Codexをお使いの場合、鍵があるのに「確認できません」と案内されることがあります。 パソコンの.sshフォルダー(鍵が置かれている場所)へのアクセスが、セキュリティ上の理由で制限されていることがあるためです。この場合、AIエージェントは「鍵がありません」と決めつけず、次の順番で対応します。

  1. まず、AIエージェントの実行環境から.sshフォルダーへのアクセス許可を求めます。 次のような案内が表示されたら、パソコンの画面に許可を求めるダイアログ(確認ウィンドウ)が出ていないか確認し、出ていれば「許可」を選んでください。

    この実行環境から~/.sshへのアクセス許可を求めています。許可のダイアログが表示されたら、承認をお願いします。

    許可すると、そのまま鍵を確認できるようになり、続きの手順に進むことができます。

  2. 許可しても解決しない場合、またはダイアログが出ない場合は、普段使っている画面(PowerShellやターミナルなど)での確認に切り替わります。 案内されたコマンドをその画面で実行し、表示された内容をそのままAIエージェントに貼り戻してください。この場合も、鍵をあらためて作り直す必要はありません。パソコンにすでに鍵がある場合は、それがそのまま使われます。

「確認できません」という表示を見ると鍵から作り直す必要があるように見えますが、慌てずに上記の順番で対応すれば、そのまま手続きを続けることができます。

Step 10. 接続情報を伝える

次に、公開先を特定するための情報を伝えます。AIエージェントから順に聞かれるので、コントロールパネルで確認しながら答えます。

  • さくらのアカウント名(会員名):確認方法はさくらインターネットのヘルプ「契約中のサービスの契約者名や会員IDを確認したい」(https://help.sakura.ad.jp/purpose_beginner/2560/)をご覧ください。
  • 公開するドメインと、対応するWEB公開フォルダー:コントロールパネルの左メニュー「ドメイン/SSL」→「ドメイン/SSL」で、ドメイン名とWEB公開フォルダーが対になって表示されます。公開したいものを選んで伝えます。
  • サブフォルダー(任意):WEB公開フォルダーのもとに、さらにフォルダを分けて置きたい場合に指定します。指定すると、そのフォルダ名が公開URLの一部になります(例:https://ドメイン/サブフォルダー名/)。1つのドメインに複数のサイトを置きたいときに使います。指定しなければ、ドメインの直下に公開されます。
  • 作成したサイトのフォルダ:公開したいサイトのファイル一式が置いてある場所です。サイトをつくったチャットで「作成したサイトを保存したフォルダの場所を教えて」と聞くと教えてくれます。ビルド(配布用ファイルの書き出し)が必要なつくりのサイトでは、書き出したあとのフォルダを指定します。指定したフォルダが公開用として正しいかは、アップロードスキルが転送の直前に自動で点検し、プロジェクト全体を誤って指定しているような場合はそこで止めて知らせます。

コントロールパネルの左メニュー「ドメイン/SSL」→「ドメイン/SSL」画面への導線

ドメイン/SSL一覧画面。ドメイン名とWEB公開フォルダーの対応箇所

公開URLは、AIエージェントが「ドメイン+サブフォルダー」から候補を組み立てて提示します。表示された公開URLが正しいかを確認します。違っていれば、正しいURLを伝えます。

コントロールパネル右上に表示されるアカウント名・初期ドメインの位置

Step 11. 公開する

情報がそろうと、AIエージェントが接続内容をまとめて提示し、「この内容で接続してよいですか?」と確認します。

出力例

ホスト名: (アカウント名).sakura.ne.jp
アカウント: (アカウント名)
WEB公開フォルダー: (WEB公開フォルダー)
サブフォルダー: (サブフォルダー)
転送先: /home/(アカウント名)/(WEB公開フォルダー)(サブフォルダー)
公開URL: (組み立てられた公開URL)

内容を確認して問題なければ、その旨を伝えます。

Codexをお使いの場合、ここまでの確認がすべて済んでも、Codexの実行環境からさくらのレンタルサーバーへ直接つなげないことがあります。 この場合、AIエージェントは「自分では転送できません」と伝えたうえで、代わりに設定済みのファイル一式を用意します。読者は、普段使っている画面(PowerShellやターミナルなど)で、次の3つの手順を行います。

  1. 実行前に、いったん画面をクリアします。 PowerShellの場合はcls、Mac/Linuxのターミナルの場合はclearと入力してEnterキーを押します。これで、これから実行する内容だけが画面に残ります。
  2. AIエージェントから案内されたコマンドを、その画面にそのまま貼り付けて実行します。
  3. 画面に表示された「転送実行ログ 開始」という行から「転送実行ログ 終了」という行までを、そのまま全部コピーして、AIエージェントに貼り戻します。 一部だけを抜き出そうとしなくてかまいません。途中に←[31mのような見慣れない記号が混ざって見えても、それはエラーではないので、そのまま貼り戻して問題ありません。

実際に表示される内容は、たとえば次のようになります(アカウント名やフォルダ名の部分は、実際にはご自身の環境の値が表示されます)。

出力例

$ node "(案内されたスキルのフォルダ)/upload.mjs"
===== 転送実行ログ 開始 =====
===== 環境確認結果 ここから =====
環境確認結果: 成功
OS: darwin (arm64)
Node.js: あり: v26.3.1
npm: あり: v11.16.0
ssh2 (転送ライブラリ): あり (npm install 済み)
.ssh フォルダー: あり・読取可
使用可能な鍵のパス: ~/.ssh/sshkey
次のステップへ進めるか: はい
===== 環境確認結果 ここまで =====

転送元: (作成したサイトのフォルダ)
対象ファイル数: 1件 / 合計サイズ: 8.2 KB
===== 転送実行ログ 終了 =====

貼り戻すと、AIエージェントがその内容を読み取り、転送が成功したかどうかを判断します。上の例のように環境確認が「はい」になっていれば、そのまま転送に進みます。

この時点で公開鍵の登録がまだ済んでいない場合、次のようなエラーで転送が止まることがあります。

出力例

NG: SSH 接続に失敗: All configured authentication methods failed
(通常のシェルで実行していますか?Codex 等のサンドボックスからは接続できません)
===== 転送実行ログ 終了 =====

このエラーが出たら、「SSH公開鍵を用意する」の手順に戻り、公開鍵が正しく登録できているかを確認してください。登録内容が正しければ、もう一度同じコマンドを実行すると、次のように接続に成功し、そのまま公開まで進みます。

出力例

OK: SSH 接続 OK: (アカウント名)@(アカウント名).sakura.ne.jp
転送開始: 1件 / 8.2 KB
OK: 配置完了
OK: 公開URL https://(公開URL)/ -> 200
===== 転送実行ログ 終了 =====

転送が終わると、AIエージェントが公開URLを実際にブラウザで開き、次を確認します。

  • トップページが表示され、本文・見出し・各セクションが出ている
  • ページ内のプログラム・スタイル・主要な画像が正しく読み込まれている
  • パソコンの画面幅でも、スマートフォンの画面幅でも、レイアウトが崩れていない

問題がなければ、公開は完了です。作成したコーヒーショップのサイトが、設定したドメインで表示されます。

アップロードしたサイトをブラウザで開いて確認している画面

お問い合わせフォームを設置している場合、実際にメールが届くようにする設定は、公開したあとに別途行います。手順はサイト作成スキルのチュートリアル記事(「サイト作成スキル」でサイトを開設する流れ:デザイン確認から動作確認まで)で扱っています。

Step 12. 修正して、もう一度公開する

公開後にサイトを直したくなったら、修正してから「もう一度アップロードして」と伝えます。前回との違いだけが転送されるため、更新は短時間で終わります。「利用シーンの確認」では「2. 同じサイトをもう一度アップロードしたい」にあたる進み方になり、接続情報の確認も最小限で済みます。Codexの実行環境から直接つなげない場合は、「公開する」で説明した3つの手順(画面のクリア→コマンドの実行→ログの貼り戻し)を、更新のたびに繰り返します。

1つのドメインに複数のサイトを置く

接続情報でサブフォルダーを指定すると、1つのドメインのもとに複数のサイトを分けて公開することができます。

https://ドメイン/サイトA/
https://ドメイン/サイトB/

別のサイトを新しく追加するときは、「利用シーンの確認」で「3. 別のサイトを新しくアップロードしたい」を選びます。アカウント名やSSH鍵は前回の設定を引き継ぎ、ドメイン・WEB公開フォルダー・サブフォルダー・サイトのフォルダだけを新しく確認します。

いま公開しているものの一覧は、AIエージェントに聞けば確認できます。サーバー上のフォルダー名と、各サイトのタイトル、更新日時が表示されます。

公開したあとにサブフォルダーの名前(=公開URL)を変えたい場合は、サーバー上でフォルダ名を変更するのではなく、新しい名前で作り直してから公開し、古いものを削除する、という手順になります。名前だけ変えると、ページ内のプログラムや画像の参照先がずれて表示が崩れるためです。この手順もAIエージェントが案内します。

公開をやめる(サイトを削除する)

公開したサイトをサーバーから削除したいときは、「サーバーからこのサイトを削除して」と伝えます。AIエージェントが対象のフォルダと公開URLを提示し、確認のうえで削除します。削除は取り消せません。

よくある質問(Codexでハマりやすいポイント)

Codexは実行のしくみ上、この記事で説明した以外にもとまどいやすい場面があります。ここまでの説明と重なる部分もありますが、実際に起きたときにすぐ見つけられるよう、質問と対応をまとめました。

Q. 「利用回数の上限に達しました」「しばらくお待ちください」と表示されて、続きに進めません。

A. Codexは無料プランのままだと、短い時間で利用回数の上限(レート制限)に達しやすく、そこで一時的に操作できなくなります。上限に達した場合は、案内された時間だけ待つか、有料プランへの切り替えをご検討ください。この記事の手順を一度に最後まで進めたい場合は、あらかじめ有料プランで利用することをおすすめします。

Q. 「Node.jsがこの環境に入っていません」と表示されました。パソコンには入れてあるのに、なぜですか?

A. Codexは、普段自分が使っているパソコンの画面(PowerShellやターミナルなど)とは別の、制限された場所でコマンドを実行していることがあります。そのため、パソコン側には入っているのに「入っていない」と案内されることがあります。普段使っている画面で、案内されたコマンドを実行してください。環境確認結果のブロックが表示されたらそのまま貼り戻し、代わりにエラーが表示された場合は、そのエラーメッセージをそのままAIエージェントに貼り戻してください。 どちらの場合も、表示された内容をもとに手順を続けられます(詳しくは「環境の確認は自動で行われます」を参照)。

Q. 「.sshにアクセスできません」「SSH公開鍵を確認できません」と表示されました。鍵を作り直す必要がありますか?

A. 作り直す必要はありません。パソコンの.sshフォルダーへのアクセスが制限されているだけの可能性が高いです。まずAIエージェントがアクセス許可を求めるので、パソコンにダイアログが出ていれば「許可」を選んでください。許可しても解決しない場合は、普段使っている画面での確認結果を貼り戻す案内に切り替わります。この場合も、パソコンにすでにある鍵がそのまま使われます(詳しくは「SSH公開鍵を用意する」を参照)。

Q. 準備ガイド(アップロード準備ガイド)がブラウザに表示されません。

A. Codexのブラウザ機能が、セキュリティ上の理由でパソコン内のファイル表示を制限していることがあります。「ガイドを表示して」ともう一度伝えると、別の方法で開き直してくれます。それでも表示されない場合は、テキストでの案内を受け取ってから読み進めても問題ありません(詳しくは「準備ガイドを確認する」を参照)。

Q. 「サーバーへ接続できません」「自動では転送できません」と表示されました。

A. Codexの実行環境からは、さくらのレンタルサーバーへ直接つなげないことがあります。この場合、AIエージェントが設定済みのファイル一式を用意するので、普段使っている画面で、(1)画面をクリアする、(2)案内されたコマンドを実行する、(3)「転送実行ログ 開始」から「転送実行ログ 終了」までをそのまま貼り戻す、の3つを行ってください(詳しくは「公開する」を参照)。

Q. 「NG: SSH 接続に失敗: All configured authentication methods failed」と表示されました。公開鍵は登録したはずなのに。

A. 考えられる原因は2つあります。1つは、公開鍵がコントロールパネルに正しく登録できていないこと(貼り付けが途中で切れていた、別の鍵を登録してしまった等)です。「SSH公開鍵を用意する」の手順に戻り、登録した内容を確認してください。もう1つは、Codexの実行環境自体が外部のサーバーへ直接つなぐことを許可されていない場合です。この場合はエラーの文中で「通常のシェルで実行していますか?」のように案内されるので、普段使っている画面(ターミナルなど)で実行する方式に切り替えれば、そのまま公開まで進むことができます。実際に表示される画面の例は「公開する」に載せています。

Q. スキルの続きのファイルが読み込めない、「ネットワークにアクセスできません」と表示されます。

A. Codexの実行環境は、既定でインターネットへのアクセスが制限されていることがあります。スキルを配布URLからではなく、あらかじめパソコンにダウンロードしたフォルダから読み込ませると、この問題を避けられます(詳しくは「アップロードスキルを読み込む」を参照)。

Q. 会話が長くなると、途中の手順を飛ばされたり、案内された通りに進まなかったりすることがあります。

A. やり取りが長くなると、AIエージェントが手順の一部を忘れてしまうことがあります。その場合は、「SKILL.mdの手順に沿って、最初から(またはつまずいたステップから)進めて」ともう一度伝えてください。手順書を読み直して、正しい進め方に戻ります。

まとめ

Codexとアップロードスキルを使うと、指示文でサイトをつくり、さくらのレンタルサーバーへ公開するところまで、対話で進めることができます。準備として必要なのは、SSH接続に対応したプラン、Node.js、公開するドメインとSSLの設定、SSH公開鍵の登録です。公開後の修正も、直して「もう一度アップロードして」と伝えるだけで反映できます。

Codexを使う場合に気をつけたい点は、次の4つです。いずれも、AIエージェントの案内どおりに対応すれば、そのまま手順を続けることができます。

場面 Codexで起きることがあること 対応
スキルを読み込む 配布URLからの読み込みに失敗しやすい あらかじめローカルにダウンロードし、フォルダの場所を伝える
準備ガイドの表示 ブラウザに自動で表示されないことがある 「ガイドを表示して」と伝える、またはテキストでの案内を受け取る
環境の確認 Node.jsが入っているのに「未導入」と案内される 普段使っている画面での確認結果を貼り戻す
SSH公開鍵の確認 鍵があるのに「確認できません」と案内される アクセス許可のダイアログに応じる、それでもだめなら普段使っている画面での確認結果を貼り戻す

業種に合わせて作り込んだサイトをAIで用意する流れは、次の記事で扱っています。

Claude Codeで同じ作業を行う場合の記事は、次のとおりです。

執筆 さくらのレンタルサーバー サービス企画チーム

さくらインターネットのサービス企画チームです。さくらのレンタルサーバーの企画に携わるメンバーが、ホームページの制作や運用のコツから、AIを活用したサイト作りまで、幅広くご紹介します。

さくらのレンタルサーバー サービス企画チームのプロフィール画像