HTML & CSS

ワークショップ

HTML&CSS入門 WEBサイトを作る

VOL18サーバーを用意する

  1. 最終更新日:
  2. 公開日:

今回はサーバーについての解説と、無料で利用できるサーバーの契約を進めていきます。

この記事のポイント

  • WEBサイトを公開するために必要なサーバーを用意する
  • 無料のレンタルサーバー「エックスフリー」のアカウントを作成する

WEBを公開するためにサーバーを用意する

前回で、本ワークショップで作成するWEBサイトのHTMLとCSSが完成しました。
あとはサーバーにファイルを設置して、作成したWEBサイトを公開するだけです。

そこで今回はサーバーについての解説を行いながら、実際に無料で利用できるサーバーへの登録を進めていきます。

もし「サーバーはどうして必要なんだっけ?」と思った方は、本ワークショップの「VOL2 WEBサイトに必要なもの」をご覧ください。

Note

本記事ではアフィリエイトリンクを使用しています。

サーバーの種類

WEBサイトを公開するためのサーバー(WEBサーバー)は、各社から提供されているサーバーのサービスを利用するか、または自前で用意して運用します。
以下に、サービスのタイプ別にそれぞれの特徴を紹介していきます。
なお、リストは下に進むにつれて専門知識が必要になりハードルが高くなっていきます。

  1. レンタルサーバー
  2. 専用サーバー
  3. クラウドサーバー
  4. 自前で用意するサーバー

レンタルサーバー

1つ目のレンタルサーバーは一番手軽に利用できるサーバーです。
サーバーのメンテナンスは必要なく、セットアップも用意された管理画面で完了するため、手間を最小限に抑えて運用することができます。

デメリットとしてはレンタルサーバーはほとんどのプランでは1台のサーバーを他の方と共有する形になるため、他の利用者のサイトで問題があると影響が出る可能性があります。
加えてリソースに限りがあるため、システム構築などで細かい設定を行いたいときに融通が効かない点が挙げられます。

初期費用と月々の利用料が無料〜数千円と比較的安価なため、手軽に始めるには最適です。

代表的なものではロリポップ!さくらのレンタルサーバエックスサーバーがあります。
今回はエックスサーバーの無料版として提供されている「エックスフリー」を使用していきます。

専用サーバー

専用サーバーは上記のレンタルサーバーと似ていますが、サーバーを1台まるごと借りるタイプのサービスです。
サーバーのハードウェアのメンテナンスはサーバー会社に任せられる上、上記のレンタルサーバーよりも高性能になり、さらにサーバーの細かい設定も可能になります。

ただし初期費用や月々の利用料もレンタルサーバーよりは高額になるため、主にビジネス用途で利用されることが多いです。

クラウドサーバー

クラウドサーバーはサーバー会社が用意した大きなリソース(CPU、HDD&SSD、ネットワーク回線など)を従量課金で利用するサービスです。
上記の専用サーバーと同様にサーバーのハードウェアに対するメンテナンスは不要ですが、OSの選択からソフトウェアのインストールまで利用者側が行う必要があるため、ある程度の専門知識が必要になります。

クラウドサーバーは使用するリソースを必要に応じてリアルタイムで大きくしたり小さくできるため、ここ数年はビジネス以外に行政でも利用されるまで普及しました。
代表的なサービスはアマゾンのAWS(Amazon Web Service)、GoogleのGCP(Google Cloud Platform)、MicrosoftのAzureがあります。

自前で用意するサーバー

こちらは文字通り、サーバーになるコンピュータから全て自前で用意する方法です。
企業が自社ビル内にサーバーを設置するスペースを設けて運用することがあり、これらの自社運用するサーバーを「オンプレミス」と呼ぶことがあります。

もちろん個人でもサーバーを構築することは可能ですが、専門知識が必要になるためハードルも高くなります。
自由度が高く勉強にもなるため、練習がてら挑戦してみると面白いです。

以上、利用できるサーバーのサービスについて紹介してきました。
どのようなサーバーを用意するかは作成するWEBサイトやシステムに応じて異なりますが、今回のワークショップではシンプルなHTMLのみを使ったサイトのため、手軽なレンタルサーバーを使っていきます。

今後の流れ

今回は無料で利用きるレンタルサーバーの「エックスフリー」を使用します。
WEBサイト公開までの流れは次の通りです。

  1. (1)エックスフリーのアカウント作成
  2. (2)エックスフリーの管理画面にログイン
  3. (3)初期設定
  4. (4)WEBサイトのファイルをサーバーにアップロード(公開)
  5. (5)ドメインを確認してブラウザ表示

WEBサイトのファイル(HTMLファイル、CSSファイル、画像)をサーバーにアップロードした時点で、WEBサイトは誰でも見ることができる状態になって「公開状態」となります。
今回はサーバーの事前準備である「(3)初期設定」まで進めていきましょう。

アカウントを作成する

まずはエックスフリーのアカウントを作成します。
以下のURLからエックスフリーのサイトを表示してください。

エックスフリー

エックスフリーのトップページには使用する機能ごとの紹介が掲載されています。
今回はHTMLファイルだけなので、一番左の「HTMLサーバー機能」が該当します。

トップページを少しスクロールしたところにある、オレンジ色の「無料レンタルサーバーご利用お申し込み」ボタンをクリックしてください。

エックスフリーのトップページ
エックスフリーのトップページ

まずはメールアドレスを登録します。
ご自身が使用しているメールアドレスを入力して、「確認メールを送信」ボタンを押してください。

メールアドレスの登録ページ
メールアドレスの登録ページ

メールアドレスを登録したら、エックスフリーより確認メールが届きます。
メール本文に記載されている「お申し込みURL」をクリックして開いてください。

確認メールの例
確認メールの例

上記のお申し込みURLを開くと、続いて「会員情報登録フォーム」が表示されます。
こちらにご自身の情報を入力して登録を進めてください。

会員情報登録フォーム
会員情報登録フォーム

会員登録が完了すると、以下のような「会員登録完了のお知らせ」のメールが届きます。
こちらに記載されている会員IDはログインで使用するため、控えた上で「管理パネル」のURLを開いてください。

会員登録完了のお知らせ
会員登録完了のお知らせ

管理パネルのURLを開くと、「管理パネルログイン」ページが表示されます。
ここで、先ほどメールに記載されていた「会員ID」(「メールアドレス」でも可)と、登録した「パスワード」を入力して「ログイン」ボタンを押してください。

管理パネルログインページ
管理パネルログインページ

ログインに成功すると、最初に次のようなページが表示されます。
「ご利用状況一覧」にあるサーバー「HTML」の右側にある「利用を開始する」ボタンをクリックしてください。
こちらをクリックすると自動的に初期設定が実行されます。(初回限り実行)

管理パネルのホーム
管理パネルのホーム

しばらく経つと、以下のような「初期設定の完了」が表示されます。
ページの上部にある「ホーム」ボタンをクリックして、管理パネルのホームに戻ってください。

初期設定の完了
初期設定の完了

以上でエックスフリーのHTMLサーバー使用準備が完了しました。
次回はいよいよ作成したWEBサイトを公開します。

前のページページをリンクで繋ぐ

次のページWEBサイトを公開する

記事一覧

  1. HTML&CSS入門
  2. WEBサイトに必要なもの
  3. HTMLの基礎
  4. CSS(スタイルシート)の基礎
  5. どんなWEBサイトを作るか考える
  6. HTMLファイルを作成する
  7. トップページのHTMLコーディング
  8. CSS(スタイルシート)を作成する
  9. ヘッダーのCSSを書く
  10. コンテンツ1のCSSを書く
  11. コンテンツ2のCSSを書く
  12. フッターのCSSを書く
  13. お知らせページを作成する
  14. お知らせページのCSSを書く
  15. お問い合わせページを作成する
  16. お問い合わせページのCSSを書く
  17. ページをリンクで繋ぐ
  18. サーバーを用意する
  19. WEBサイトを公開する

前の記事

記事一覧

次の記事