こんにちは。
最近PHPの基礎をやるって企画が続いておりましたが今回はいよいよサーバーを用意するってことをやります。
いくらサイトやWEBアプリを作ったとしてもサーバーがなければ公開できませんからね。
しかしこのサーバーを用意するっていう最初のところが初心者にとって高いハードルになっている気がします。あるいは用意したはいいがどうやって使うのか…とか。私もいまいちわかってませんw
以前にも同じことをやりましたが当時使用したスターレンタルサーバーってところは昨年無料サービスを終了したようです。
ま、無料なんで突然の終了は十分あり得ることとして覚悟しておかないといけないですね(;^ω^) サイトのバックアップは取っておこう!(とってない人が言っています。)
サーバーについての簡単な説明は上の過去記事で触れているのでここでは省略します。
今回の前編では実際にWEBページを公開するところまでやってみます。
まず新しいサーバーとしてXREAを選びました。無料枠があるのでそれを使います。
とりあえず一番左の無料アカウントを選択します。

バリュードメインというサイトの登録が必要なので出てきた画面にあるボタンを押してそちらのサイトに移ります。

必要(ユーザー名、パスワード、メールアドレス)事項を入力します。

入力したメールアドレスに認証コードが届くのでそれを次の画面へ入力します。

次にユーザー情報の入力です。

必須項目を埋め、ページ下の「会員規約、プライバシーポリシーに同意する」のチェックボックスにチェックを入れ、「ユーザー登録する」ボタンを押します。

登録完了の画面が表示されます。value domainのユーザー名を覚えておきましょう。
画面下の「コントロールパネルTOPへ」ボタンを押します。

Value Domainの画面が出てくると思いますが、いったんXREAのページ(タブ)へ戻り、続けてXREAの登録をします。「XREAアカウントの取得・作成画面はこちら」のボタンを押します。

電話番号(SMS)による認証が始まるので電話番号を送信してSMSで受信した認証コードを入力し、「認証を行う」ボタンを押します。

うまくいけば下の画面が表示されます。「コントロールパネルトップへ」をリンクをクリックして移動します。

コントロールパネルトップへ移動したらサーバー→XREAを選択します。

XREAの新規アカウントを作成ボタンを押します。

「XREA(無料)を取得」ボタンをクリック。

次に希望アカウント名を入れます。WEBサイトをなどを置いた時のURLの一部になるところです。規約に同意のチェックを入れて登録ボタンを押します。

登録完了です。反映されるまで30-60分かかるようです。

Value-domainコントロールパネルのサーバー→XREAにアカウント情報が表示されるようになります。
サーバーを管理する画面に行くには新コントロールパネルをクリックします。


こんな画面になります。Value-Domainの画面から入るとパスワード不要のハズなのですが、私がやってみたらログイン画面が出てきて未だ設定もしていないパスワードを求められました(´Д`)

右下の「こちら」をクリックし、一度Value-Domainへ戻ったら解消されました(;^ω^)
時間は十分経っていたはずなんですけどなんでしょうね…
これでサーバーが用意できました。
さっそくwebページを置いてみましょう。
サンプルのHTMLはなんでもいいのでチャットAIに作ってもらいます。
私はChatgptに「レンタルサーバーにwebページを置くためのテスト用HTMLを作成してください。」と言って作成してもらいました。
生成されたコードをコピーしてメモ帳などテキストエディタにそのまま貼り付けます。

そしてそれを「index.html」というファイル名、拡張子にして保存。※重要です。

XREAの画面で
サイト設定→FTP設定→net2ftp ファイルマネージャーを選択します。

ここにフォルダやファイルを置くことができます。
public_htmlをクリック。

ここにさっきのindex.htmlを置くことでwebページとなります。アップロードボタンを押して配置します。

配置が終わったらFTP設定の画面に表示されていたURLを確認してみましょう。

サイトが表示されたらOK!

どんな表示になるかはAIが作成したHTML次第。
とりあえず自作(AI作)サイトを公開できる状態になりましたね。(∩´∀`)∩
今回はここまで。次回の後編ではもう少し深掘りして画像表示させたりしてみたいです。
ありがとうございました。


背景、ロゴ、画像→動画はAI生成です。動画はGrok先生だと絵の修正が強めで自分の下手さが際立ってしまうので修正がマイルドなwan2.2先生にお願いしてみました。(最後に少しだけ動画編集して手を加えています。)