無料レンタルサーバーの使い方【初心者向け】プログラミングしたものをサーバーにアップロードする方法

この記事は約10分で読めます。

プログラミング勉強し始めてHTML、CSS、JavaScript、PHPで作ったものを
実際にネットにのせて試したくはないですか?
開発環境内だけで動作させても実際はどんな感じになるのか?
サーバーにアップロードしてみましょう。
無料でできます。
勉強にもなります。

エックスサーバー が運営する無料レンタルサーバーXFREEを使用します。

レンタルサーバーXFREEなぜ無料

なぜ無料か推測すると。
XFREE は、エックスサーバー 株式会社が提供する無料レンタルサーバーサービス。
なのでエックスサーバーの宣伝が目的だと思われます。
トップページに有料プランとしてエックスサーバーのプランが紹介されてますし。
容量が1Gしかないのでいっぱいになったら、どこ使おう?
エックスサーバーでいいやってなっちゃいます。

利用者が使用するサイトに広告を載せてるとはいえ、そっちの利益は少ないと思います。

月数万儲かるというネットの情報見て1年前にアフィリエイトブログ始めた私。
その経験からしてブログの広告ってほとんどクリックされません。

この広告見てヨロヨロっと吸い寄せられて
結局お名前.com のレンタルサーバー使ってる私みたいに。
(ちょっと私にはオーバースペックだったかなー、もうちょっとお安いのに・・・というぐらいで特に不満はないです。)

無料レンタルサーバーってことで人集めて
エックスサーバーに移行してもらうのが目的と思います。
私もエックスサーバーに興味を持つようになってしまいました。

またXFREE登録して時間経過したら
自動的にエックスサーバーに登録されて課金されるという話ではありません。
むしろ課金されるんじゃなくて3か月に1回無料更新ボタン押さないと使えなくなっちゃいます。

代表取締役もエックスサーバーと同じなので信頼できそうです。
ちなみにレンタルサーバーシェアで検索するとエックスサーバー、国内シェア1位みたいです。

ていうかお名前.comのレンタルサーバー全然シェアがない😢

信頼できそうではありますが無料なので多くは期待できません。
そんなに手をかけてもいられないだろうし。
載ってるソフトのバージョンが古いとかあるので
結局は自己責任で使いましょう。
特にパスワードの使いまわしとか。

何か変なことあったら、このブログでお伝えします。

XFREEには独自SLLがありません。
SSLがないと
ブラウザでアドレスを指定するときhttp://~になります。
SSLありだとhttps://~になります。

プラウザで表示してみるとhttp://のものは「セキュリティ保護なし」となり
見た人が何か怪しいと思っちゃいます。
(古くからあるサイトはhttp://のものがあります。)
なので本格的にブログ等をやるときはSSLありの有料サーバーを使いましょう。

XFREE登録方法

XFREEの「無料レンタルサーバーご利用お申込み」をクリック
メールアドレスを入力し、送られてきたメールのURLをクリック
パスワード新規登録、氏名、住所、電話番号を入力すれば登録完了です。
サーバーIDを決めます。
ここで決めた名前がドメイン名の一部になります。
http://この部分にはいります.html.xdomain.jp/
私の場合サーバーIDをichige2にしたので
http://ichige2.html.xdomain.jp/となります。

HTMLサーバー機能、PHP・MySQLサーバー機能、WordPress機能
それぞれでドメインができます。
http://ichige2.html.xdomain.jp/
http://ichige2.php.xdomain.jp/
http://ichige2.wordpress.xdomain.jp/

HTML、CSS、JavaScriptのアップロードの仕方

HTML、CSS、JavaScriptは
無料レンタルサーバーをクリック
初めての時は「利用を開始するをクリック」

サーバー管理パネルHTMLサーバーが表示される。

アカウント名っていうのがドメイン名です。
さっきサーバーIDで入力した名前が入ってます。

アップロードしたホームページを見るときに
http://ichige2.html.xdomain.jp/サブディレクリ名というようにプラウザのバーに
入力して使うので記録しておくか、ここに書いてあることを覚えておいてください。

index.html、htaccess、default_page.pngの3つのファイルが元々入っています。
これはそのままにして
出来上がったファイルをアップロードするときは毎回新しいフォルダを
作ってそこにアップロードするのがいいと思います。

アップロードしたらプラウザで
http://自分のドメイン名(アカウント名)/サブディレクリ名の形で
入力すればアップロードしたファイルが表示されます。

メモ帳でHello Worldと表示するコード書いて表示させてみます。

inde.htmlというファイル名で保存。

サーバーの方のhelloフォルダを開き
アップロードをクリック→ファイル選択で今作ったindex.htmlを選択
→アップロードをクリック

http://ichige2.html.xdomain.jp/hello/にアクセスすれば表示されます。

注意点

  • メモ帳で作った時ファイル名がindex.html.txtになっていたら、
    アップロード後にそのファイルの名前をクリックすると名前変更できるので.txt部分を削除する。
  • フォルダごとアップロードできないのでファイルを1個づつアップロードする。
  • フォルダの配置やフォルダ名称は自分のパソコンに合った時と同じにする。

PHP

PHP・MySQLのほうに入って使います。

取りあえずデータベースは使わない場合

やり方はHTMLサーバーの時と同じ。

しかしMAMPで動作していたファイルをアップロードしたけどエラーが出ました。

Forbidden
You don’t have permission to access /ファイル入れてるフォルダ/ on this server.

htmlのファイル名をindex.htmlに変更したら大丈夫でした。

データベースを使う場合

phpMyAdminとかのバージョンが古いので使い勝手が最新版とはだいぶ違うし
セキュリティ的にもよくないので練習のみにしてローカル環境で
勉強していったほうがいいですね。

まずデータベース→MySQL設定

MySQLユーザー設定タブで
データベースユーザー名、とデータベースパスワードを
自分のすきなもの設定して確認画面を押して決定すれば使えるようになります。

PHPで作った簡易掲示板プログラム

出来上がった簡易掲示板です。

ヘルニアクソ野郎エンジニアblogさんの
PHPとMariaDB(MySQL)の基礎④「掲示板の作成」PHPでデータベースを操作してみるを参考に作りました。
途中のものなのでこのブログに書いてあるように更新すると2重投稿になる対策はしてません。
またPHPとMariaDB(MySQL)の基礎③「データベースの作成」と「”GET”,”POST”メソッドの違い」を参考にデータベースの設定が必要になります。

そのままでは動かないのでサーバーの設定は
ウェブカツブログさんの
PHP MySQL 入門 ~PHPでMySQLに接続する方法を解説~を参考にしてローカル環境だとlocalhost、rootなどに設定していたデータベースの設定をどうやったらXFREEのデータベースとつなげられるかを参考にしました。

またほかにも書き込みの処理がうまくいかなかったので無理やり変更して動くようになってます。
内容はあまり理解できてないでやってるのでご参考までに。
以下そのコードです。
コード中のサーバー名などは○○○○などと表記してます。
個人個人違うので上記ブログを参考に自分のサーバー名で設定してください。


  1. <!DOCTYPE html>
  2. <html lang=”ja”>
  3. <head>
  4. <meta charset=”utf-8″>
  5. <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>掲示板</title>
  6. <link rel=”stylesheet” href=”css/style.css”>
  7. </head>
  8. <body>
  9. <form method=”post”>
  10. <p>名前</p>
  11. <input type=”text” name=”a”>
  12. <p>コメント</p>
  13. <textarea name=”b”></textarea>
  14. <input type=”submit” value=”送信”>
  15. <br><br>
  16. </form>
  17. <?php
  18. //データベース情報の指定-追加した部分bigin
  19. $db[‘dbname’] = “○○○○_keiji”; // データベース名
  20. $db[‘user’] = “○○○○_△△△△”; // ユーザー名
  21. $db[‘pass’] = “××××”; // ユーザー名のパスワード
  22. $db[‘host’] = “mysql1.php.xdomain.ne.jp”; // DBサーバのURL
  23. //end
  24.  if(!empty($_POST[“a”]) && !empty($_POST[“b”])) { //POSTが空でなければ真
  25.  $a = htmlspecialchars($_POST[“a”], ENT_QUOTES);
  26.  $b = htmlspecialchars($_POST[“b”], ENT_QUOTES);
  27.  //$db = new PDO(“mysql:host=localhost;dbname=keiji”, “root”, “”);
  28. //変更部分bigin
  29.  $dsn = sprintf(‘mysql:host=%s; dbname=%s; charset=utf8’, $db[‘host’], $db[‘dbname’]);
  30.   $db = new PDO($dsn, $db[‘user’], $db[‘pass’]);
  31.  //end
  32.  //$db->query(“INSERT INTO tb1 (no,name,message,time)
  33.  //VALUES (NULL,’$a’,’$b’,NOW())”);
  34.  //データベースへの書き込みがうまくいかなかったので変更した部分bigin
  35. $sql = “INSERT INTO tb1 (no,name,message,time) VALUES (NULL,:name, :population,NOW())”;
  36. // 挿入する値は空のまま、SQL実行の準備をする
  37. $stmt = $db->prepare($sql);
  38. // 挿入する値を配列に格納する
  39. $params = array(‘:name’ => $a, ‘:population’ => $b);
  40. // 挿入する値が入った変数をexecuteにセットしてSQLを実行
  41. $stmt->execute($params);
  42. //変更部分end
  43.  $n = $db -> query(“SELECT * FROM tb1 ORDER BY no DESC”);
  44.  while ($i = $n -> fetch()) {
  45.         print “{$i[‘no’]}: {$i[‘name’]} {$i[‘time’]}<br>”.nl2br($i[‘message’]).”<hr>”;
  46.         }
  47.         } else { //POSTが空の場合の処理
  48.      //$db = new PDO(“mysql:host=localhost;dbname=keiji”, “root”, “”);
  49.      //変更部分bigin
  50.      $dsn = sprintf(‘mysql:host=%s; dbname=%s; charset=utf8’, $db[‘host’], $db[‘dbname’]);
  51.      $db = new PDO($dsn, $db[‘user’], $db[‘pass’]);
  52.      //end
  53.      $n = $db -> query(“SELECT * FROM tb1 ORDER BY no DESC”);
  54.         while ($i = $n -> fetch()) {
  55.         print “{$i[‘no’]}: {$i[‘name’]} {$i[‘time’]}<br>”.nl2br($i[‘message’]).”<hr>”;
  56.          }
  57.  }
  58. ?>
  59. </body>
  60. </html>

プログラム学習方法

私が無料で学習に使った方法をまとめました。
以下の記事を参照してください。
この方法で学んだものが動作するかどうか確認するために
XFREEを使ってます。

コメント

タイトルとURLをコピーしました