Webサイト公開手順まとめ ドメイン取得&サーバレンタルまでしてみた
このシリーズの最後は「Webサイト」をインターネットに公開する！です。
いよいよインターネットに公開するんですが、ここが初心者にはとっつきづらく、一度設定したらあまり触らないところなので忘れてしまう箇所でもあります。
まずはインターネット公開までの流れを抑えておきましょう。
Webサイトのインターネット公開までの流れ
- Webサイトのファイルを用意（index.htmlとか）
- ドメインを取得
- サーバのレンタル
- ドメインとサーバを紐付ける
- サーバにWebサイトのファイルをアップロードする
この5つのステップでWebサイトの公開までいけます。1はこれまでの記事で紹介してきたので、2以降を設定しながらみていきます。
ドメインを取得
ドメインが何かというと「webrogram.com」といったものです。この他にも〇〇.jpとか〇〇.netなどがあります。
WebサイトにアクセスするためのURLの一部ですね。
料金について
ピンきりですが大体年間1500円程度です。
安いものだと年間100円以下のものもあるので、試しに使ってみたいとかの場合は安いものを使うとコストが抑えられます。
年間なので大した金額じゃないのがわかります。2年目以降の更新料は高くなります。ちなみにxyzの2年目以降の更新料は、1,480円とのことでした。高いですが年間なので一月あたりだと100円ちょいです。
ムームードメインでドメインを取得してみる
ドメインを取得する方法は、ドメインを提供しているサービスで探して取得するといった感じで、このようなサービスはいくつかあります。
使い勝手が割とよいので、今回は「ムームードメイン」というサービスを使って取得してみます。
今回は「dev-gram.xyz」というドメインを取得します。検索すると以下のようにカートに追加するボタンが出てくるので、追加して購入まで勧めましょう。xyzは年間69円なのでめちゃくちゃ安いです
購入中にサーバやら何やらをおすすめされますが、無視してドメインの取得だけしましょう。
取得が完了しました。
サーバのレンタル
次はサーバのレンタルです。
サーバはWebサイトのファイルindex.htmlをアップロードする先になります。
今回はなるべく安価に抑えるため「さくらのレンタルサーバ
」というものを利用します。
月間131円のライトというプランを選択して申し込みします。
初期ドメインを登録しないと行けないようなのですが、ムームードメインですでにドメインを取得しているので、ここで入力するドメインは使わないのでなんでもよいです。わかりやすくdev-gramとしておきました。
あとは支持に従って登録してください。
初期費用がかかるので合計で2,619円の1年払いとしました。
料金について
今回2,619円/年でしたが、2年目以降は131円の月払いに変わります。初期費用がかかるので少しかさみますが、年間として考えれば比較的安いでしょう。
完全に無料でしたいという人には、XFREEというサービスが無料のレンタルサーバを提供しているようです。
ドメインとサーバを紐付ける
ドメインをレンタルサーバを取得・契約したわけですが、これらは今独立して存在してるので2つを紐付ける作業をしなければなりません。
紐付ける作業というのはdev-gram.xyzにアクセスしたら契約したレンタルサーバへ導いてあげるイメージです。
ここが一番混乱するところだと思うので図示していきます。
まず下の図をみてください。ユーザがWebサイトを見ることができるのは「dev-gram.xyz」にアクセスしたらレンタルサーバ上のindex.htmlが表示されるという設定になっているからです。
しかし、今はその「ユーザがdev-gram.xyzにアクセスしたらレンタルサーバ上の...」という紐付けが出てきていません。
dev-gram.xyzにアクセスしても何もみえません。もちろん紐付けてないので当然ですね。
さくらレンタルサーバ側の設定
サーバ側の設定はドメインをサーバ側で使えるように追加することです。
さくらレンタルサーバの左側のメニューよりドメイン/SSLを押します（新デザインで操作）。
新規ドメイン追加ボタンがあるのでそれを押して、以下の「他社で取得したドメインを移管せずに使う」の追加ボタンを押します。他社というのは今回で言えばドメインを取得したムームードメインのことですね。
入力エリアに「dev-gram.xyz」と入力し追加を押します。
もう一つ重要なのが、画像したのネームサーバというところです。これはこのあとムームードメインで使うのでコピーしておきます。
- ns1.dns.ne.jp
- ns2.dns.ne.jp
これでレンタルサーバにドメイン追加完了です。以下のようにドメイン一覧に表示されました。
ムームードメイン側の設定
ムームードメインの管理画面の左メニューよりドメイン一覧を選択します。
最初に登録したdev-gram.xyzというドメインが表示されているので、クリック。
ネームサーバ設定変更ボタンをクリックします。
取得したドメインで使用するのネームサーバ1と2に先程さくらレンタルサーバでコピーした「ns1.dns.ne.jp」、「ns2.dns.ne.jp」を貼り付け、ネームサーバ設定変更ボタンを押します。
これでレンタルサーバとドメインの紐付けが完了しました。
サーバにWebサイトのファイルをアップロードする
いよいよ最後の最後です。
このシリーズで作成してきたWebサイトファイルをサーバにアップロードします。
さくらレンタルサーバの左メニューよりWebサイト/データ→ファイルマネージャーをクリック。
すると以下のような画面に遷移します。ここでファイルを上げていきます。上部メニューのアップロードをクリック。
ファイルを追加ボタンより今まで作成してきた「index.html」を選択し、アップロード開始ボタンを押します。
これでファイルのアップロードは完了です。
dev-gram.xyzにアクセスするとちゃんとアップロードされて、インターネットに公開されています。
このシリーズでは超簡単なHTMLやCSS、JavaScriptでWebサイトを作成し、ドメインを取得し、サーバをレンタルしてインターネットに公開してきました。
今回は一例にすぎず他にもやり方はたくさんあります。
ただ今回学んだ一連の流れを知っておけば、他のサービスやサーバを借りたりしたときもきっと役立ちます。
かかったお金について
最後にWebサイトを公開したときにかかるお金についてまとめておきます。
- レンタルサーバ 131円/月
- ドメイン 69円/年
レンタルサーバは年間払いにして、初期費用がかかったので、2,619円として月に直して計算すると（1年目）。
1年目: (レンタルサーバ + ドメイン) / 12ヶ月 = (2619 + 69) /12 = 224円/月
2年目: (レンタルサーバ + ドメイン) / 12ヶ月 = (1571 + 1480) /12 = 254円/月
これだけなので結構やすく抑えられました。
- 1年目: 224円/月
- 2年目以降: 254円/月