みったに

【ガッツリ解説】Webサイトをサーバーに公開する手順は5つだけ

CODE

コーディングしてWebサイトを作成したけど、サーバーへのアップロードの方法がわからない。。。サーバーと契約しないといけないのかな?どうやって公開したら良いんだろう。。。?

こういった悩みをお持ちではないですか?

そこで、今回は「作成したWebページをサーバーにアップロードする方法」を解説していきます。

この記事のポイント

  • Webサイトをサーバーに公開する手順
  • サーバー公開の確認と注意点について

今回のブログについて、下記のようなツイートをしました。

現在の僕は、Web制作に関する業務をしていたり、Web制作に関するプログラミングスクールの講師をしていたりします。そこで、サーバーへのアップロードに関する質問をよくいただくので、今回はその内容を記事にまとめました。

それでは、さっそくWebサイトをサーバーに公開する手順について、解説します。

Webサイトをサーバーに公開する手順

Webサイトをサーバーに公開する手順

必要な手順としては、下記のとおりです。

  • レンタルサーバーの使い方
  • ドメインの取得
  • レンタルサーバーとドメインの紐付け
  • Webページのファイルをアップロード
  • アップロードの確認

上記のとおりです。

サーバーやドメインってなに?

なお、簡単にサーバーとドメインについて解説しておきます。

  • サーバー:Webサイトを置いておく場所
  • ドメイン:Webサイトの場所の名前

SNSでイメージするとわかりやすいかもです。

例えば、僕のTwitterであれば、@mittani_sというのがアカウントの名前で、@mittani_sとメンションを付けると僕にリプライが飛んできます。これがドメインのような役割です。そして、そのデータはTwitterにある感じ。データがある場所はTwitterなので、サーバーのような役割です。

厳密には少し違いますが、まずはイメージだけでOKです。それでは、順番に解説していきます。

レンタルサーバーの使い方

サーバーにアップロードするには、サーバーとの契約が必要です。ご自身でサーバーを用意するのもありですが、管理が面倒だったり、そもそも構築が大変だったりするので、世の中のサービスを利用してしまうのがおすすめです。

シェアリングエコノミーの時代ですから、サーバーも借りるのが良いですね。

おすすめのサーバーは?

結論として、「エックスサーバー」がおすすめです。

≫エックスサーバーはこちら

容量もちょうど良く、月額費用としては、1000円ほどで済みます。Webサイトを運営するなら、これくらいは必要経費かなと思います。

どうしても高い場合は?

どうしても高いと思う場合は、無料でアップロードする方法もあります。それは、「GitHub Pages」を使用する方法です。GitHubが用意している、ホスティングサービスで、GitHubのアカウントがあれば、利用できます。

とはいえ、設定方法がよくわからない方や、後々にWordPressなどを使ったWebサイト運営を考えている方でしたら、エックスサーバーなどのレンタルサーバーにしておいた方が、無難かなと思います。

キャンペーン情報です

2021年4月1日(木)18:00までの限定で、「ドメイン無料&初期費用0円」のキャンペーンをやっているようです。エックスサーバーは、たまにこういったキャンペーンを実施するので、こういった機会を利用すると、お得に使用できると思います。

それでは、ここからはエックスサーバーの使い方について解説してみます。

エックスサーバーの使い方

まずは、下記からエックスサーバーのトップページにアクセスします。

≫エックスサーバーにアクセスする

  • エックスサーバーにアクセス
  • メニューバーの「お申し込み」にカーソルをあてる
  • 「サーバーお申し込みフォーム」をクリック
  • 「10日間無料お試し 新規お申込み」をクリック

エックスサーバーにアクセス
まずは、エックスサーバーにアクセスして、「サーバーお申し込みフォーム」をクリックします。

エックスサーバーアカウント作成
左側の「新規お申込み」の方をクリックします。

上記をクリックすると、下記のような画面になるので、必要な項目を埋めていきます。
エックスサーバー登録項目入力

サーバーID

ここはサーバーのIDなので、好きな文字列でOKです。ただのIDなので、気にしなくて大丈夫です。

プラン

個人サイトやブログ、小規模サイトなら、X10プランで全く問題ないです。10サイトほど入れても余裕で稼働します。当ブログもこのプランで稼働しています。

WordPressクイックスタート

ここはWordPressをすぐに使うなら、チェックしておくと、そのまま設定画面に移ります。とはいえ、謎に制約が発生するのと、後からでも設定できるので、よくわからなければ、そのままにしておいて大丈夫です。

上記が完了したら、下記の通りに進めます。

  • メールアドレス、住所、氏名、などの必要事項を入力
  • 利用規約と個人情報に関する公表事項を確認してチェック

入力内容を確認

「次へ進む」をクリックすると、入力したメールアドレス宛に、確認用のメールが送信されるので、いったん入力内容を確認してから「次へ進む」をクリックするようにしましょう。

本人確認で登録完了

確認用のメールが届いたら、メールに記載の認証コードを入力したら、登録完了です。人によっては、SMS・電話認証があるかもですが、これは電話を使った本人確認なので、同じように認証すれば、登録完了です。

登録後のメールは取っておく

登録が完了すると、「サーバーアカウント設定完了のお知らせ」というメールが届くと思います。このメールは後ほど、必要になってくるので、大切に保管しておきましょう。

注意:料金の支払い設定

実は、まだ仮契約の段階なので、料金の支払いをしておきましょう。

忘れやすい

僕も最初は、「後でいいかな」と思って放っておいたのですが、そのまま支払いを忘れてしまって、サーバーが利用できなくなっていました。同じ失敗をしないように、先に設定を完了しておくことを、おすすめします。

届いたメール、もしくは下記からエックスサーバーにログインします。

≫エックスサーバーにログインする

エックスサーバーログイン画面

  • 登録時のメールアドレス
  • 登録時のパスワード

上記でログインします。
パスワードは、エックスサーバーから届いたメールにも記載があります。(ユーザーアカウント情報の部分)

エックスサーバーの料金のお支払い
ログインが完了したら、右上のメニューバーの「料金支払い」をクリックします。そうすると、下記の画面が出るので、設定を入れておきます。
エックスサーバー期間の設定

  • 今回のプランを選択
  • 契約期間は最短の3ヶ月でもOK
  • 支払い方法を選択するをクリック

上記のとおりです。支払い方法を選択すると下記の画面になります。
エックスサーバーの支払い方法の選択
支払い方法は何でも良いのですが、クレカ支払いにしておくと、1ヶ月ずつの更新になり、かつ料金も安くなるので、個人的にはクレカ支払いがおすすめです。当ブログもクレカ支払いにしています。方法については、後述します。

あと、クレカ支払いは請求書の発行が出来ないと記載がありますが、領収書の発行は可能です。

エックスサーバークレカ情報
クレジットカードの場合は、上記の感じでクレカの情報を書いていきます。コンビニ支払いの場合は、コンビニの情報を入力していきます。

最後に「確認画面へ進む」をクリックして、支払い設定が完了です。
エックスサーバー支払い設定の確認

クレカで1ヶ月ごとの更新にして料金を安くする方法

クレカ支払いにした場合は、更新期間を1ヶ月にして、かつ月額の料金を安くすることができます。
エックスサーバーのカード自動更新

  • 右上のメニューバーのアカウントをクリック
  • 「カード自動更新設定」をクリック

上記で進めます。そうすると、下記の画面になります。
エックスサーバーのカード自動更新設定
「自動更新サイクルを変更する」をクリックして、支払い周期を1ヶ月に設定します。これは、1ヶ月でも1年でも、同じ料金になるので、僕は1ヶ月にしています。

支払いにクレジットカード以外を設定していた場合

最初の支払い方法の登録でクレジットカード以外を設定していた場合は、上記の「新しいクレジットカードを登録する」から登録すると、クレジットカード支払いに出来ます。

なお、クレジットカードだと、月額1000円で済みますが、クレカ以外だと、3ヶ月支払いにしても1200円ほどなので、少し高いんですよね。なので、僕はクレカにしています。

これでサーバーの準備はOKです。

ドメインの取得

次にドメインの設定です。ドメインについて、もう少しだけ解説しておきます。

mittaniblog.com

↑これが当ブログのドメインです。

ドメインは唯一無二でして、2つとして同じものは存在しません。要するに、サイトを識別するための名前です。そして、世の中には、このドメインを管理している業者があり、そこに登録することで、ドメインを発行してもらうことができます。

今回は、そのなかでも「ムームードメイン」でのドメイン発行について書いていきます。当サイトのドメインもそこで取得しています。

ムームードメインの使い方

まずは、下記からムームードメインにアクセスします。

≫ムームードメインにアクセスする

ムームードメインのトップ
中央のフォームに、欲しいドメインを入力します。例えば、「blogtanoshii」にしてみます。

ドメイン選択
こういった感じで、「カードに追加」となっているものは、購入可能です。ドメインは同じものは使用できないので、購入できないものは、既に別のサイトで使用されているということになります。

どれを選べば良い?

ぶっちゃけ、どれでもOKです。
こまったら、「.com」が無難かなと思います。ちなみに、価格は初回の1年分の価格ですが、更新費用は別だったりします。要するに、極端に安いドメインは、更新費用が高かったりするので、更新費用も見ておくと良いです。

価格の確認

メニューバーの「価格一覧」をクリックすると、ドメインの価格が更新価格も併せて確認できます。
ムームードメイン価格一覧
こういった感じで確認できます。
ムームードメイン価格一覧の確認
ちなみに、価格は年間の費用です。月額ではないので、ご安心ください。

さて、少し脱線しましたが、欲しいドメインをカートに追加したら、下記の画面になるので、お申込みに進みます。
ドメインをカードに追加
そうすると、下記の画面に移ります。
ムームードメインの新規登録
今回は、初回なので、「新規登録する」に進みます。

ムームードメインのアカウント作成
そして、メールアドレスとパスワードを設定して、利用規約を確認したら、「利用規約に同意して本人確認へ」に進みます。

ムームードメインの認証
そうすると、電話番号を使った本人確認がありますので、電話番号を入力して「認証コードを送信する」をクリックします。
ムームードメインの認証確認
上記で認証して、後は、氏名や住所など、登録に必要な情報を入力していけば、OKです。

ドメインに関する確認事項

ムームードメインの購入設定
本人確認等を完了して、進めていくと、上記のようなドメイン設定の画面に移っていきますが、今回はエックスサーバーと紐付けるので、上記の設定にします。

そして、ネームサーバーも続けて設定していきます。
ネームサーバーの設定
「ネームサーバを追加」をクリックすると、入力欄が増えるので、3回ほど押下して、ネームサーバ5まで入力できるようにします。そうしたら、下記の通り、入力します。

  • ネームサーバー1:ns1.xserver.jp
  • ネームサーバー2:ns2.xserver.jp
  • ネームサーバー3:ns3.xserver.jp
  • ネームサーバー4:ns4.xserver.jp
  • ネームサーバー5:ns5.xserver.jp

なお、エックスサーバーの登録をしたときに、「サーバーアカウント設定完了のお知らせ」というメールが届いているので、そちらでも確認できます。

有料オプションサービスは、全て空欄でOKです。
ムームードメインの有料オプション

お支払いの設定は、下記の通り。
ムームードメインのお支払い方法
お支払いは、自動更新が楽なので、当サイトはクレジットカードにしています。期間については、最初のうちは最短の1年で良いと思います。設定したら、「次のステップへ」をクリックします。そうすると確認画面に移行します。
ムームードメインの確認画面
ここで、利用規約を読んで、チェックしたら、「取得する」をクリックすると完了です。

これで無事にドメインが取得できました。あとは、エックスサーバーと、このドメインの紐付け作業をします。

レンタルサーバーとドメインの紐付け

さて、ここまで来れば、あと一息です。

  • サーバーの契約
  • ドメインの取得

ここまで完了したので、あとは、この2つを紐付けます。

エックスサーバーの設定

まずは、サーバー側の設定をしていきます。エックスサーバーのサーバーパネルにログインします。

≫サーバーパネルにログインする

ログインIDとパスワードは、「サーバーアカウント設定完了のお知らせ」というメールにある「サーバーパネルログイン情報」です。
エックスサーバー管理画面のドメイン設定
ログインができたら、右上のドメイン設定をクリックします。そうすると、下記の画面に移ります。
エックスサーバードメイン設定追加

  • 「ドメイン設定追加」をクリック
  • 取得したドメイン名を入力
  • チェック項目はチェックしたまま

上記の手順で進めます。ドメイン名は、先ほど、ムームードメインで取得したドメインを入力します。入力が完了したら、「確認画面へ進む」をクリックします。
ドメイン追加する
確認してOKなら、「追加する」をクリックすると、紐付けは無事完了です。

Webページのファイルをアップロード

あとは、作成したWebページのファイルをアップロードするだけです。ファイルアップロードには、FTPソフトを使用します。

FTPソフトとは

FTPソフトとは、ファイルをパソコンからサーバーに転送するためのソフトです。なお、今回はFileZillaを使用していきます。

Windowsの方はこちら

≫Windows版のFileZillaをダウンロードする

Macの方はこちら

≫Mac版のFileZillaをダウンロードする

余談ですが、Macの方は、ForkLiftを使うのもおすすめです。とはいえ、ここは好みの問題なので、何でも大丈夫です。

MacのFTPソフトはForkLiftが快適【導入から使用方法まで徹底解説】
FTPソフトに悩む人「FTPソフトのForkLiftの使い方が知りたい。FTPソフトがよくわからないので、簡単にファイルをアップしたり、更新したりする方法だけでも知りたい」 こういった疑問に答えます。 もくじ MacのF......

迷ったら、まずはFileZillaでいきましょう。

ダウンロードが完了したら、解凍して、FileZillaを起動します。起動したら、いったんそのままにしておき、先にエックスサーバーのサーバーパネルを開きます。

サーバーのFTP情報を確認

これから、サーバーにWebサイトのファイルをアップロードしますが、どの宛先に送ったら良いのかがわからない状態ですよね。なので、まずは、その宛先を確認しに行きます。

≫サーバーパネルにログインする

管理画面からのFTPアカウント設定
アクセスができたら、「サブFTPアカウント設定」をクリックします。そうしたら、今回取得したドメインの右端にある「選択する」をクリックします。
FTPソフト設定
「FTPソフト設定」をクリックすると、下記がわかります。

  • FTPサーバー(ホスト)名
  • ユーザー名(アカウント名)
  • パスワード

これらの情報をFileZillaに入れてあげます。先ほどのFileZillaに戻りましょう。
FileZillaの設定
FileZillaの上の方にある「ホスト名」、「ユーザー名」、「パスワード」の部分に、先ほどの「初期FTPアカウントの設定内容」を入力したら、クイック接続をクリックします。

サーバー証明書のポップアップが出るかも

FileZillaの仕様として、初めてのサーバー証明書については、ポップアップが出るようです。
サーバー証明書の確認
「不明な証明書」というポップアップが出たら、上記のようにチェックを入れて「OK」をクリックすると、今後は表示されなくなります。接続ができたら、右側の「リモートサイト」の欄から、今回取得したドメインをクリックします。
FTPソフトの画面
そうしたら、下側の欄に「public_html」と出てくるので、そこをクリックします。

なお、「public_html」は表示したいWebページのファイルを置く場所です。ここに置いたファイルをWebブラウザで表示させることができます。
FTPでの転送
あとは、この「public_html」の中にドラッグ&ドロップでファイルを入れてあげれば、FileZillaからサーバーへ転送してくれるので、ファイルのアップロードは完了です。

アップロードの確認

最後に、取得したドメインのURLをブラウザで入力して、Webページが表示されるのを確認できたら、完了です。

これでWebサイトのサーバーへのアップロードは完了です。もし、「今回の説明の通りにやったのにできなかった、、、」という場合は、Twitterで「@mittani_s」までご質問くださいませ。

だいぶ長くなりましたが、ここまでお読みいただいてありがとうございました。

というわけで、今回は以上となります。
それでは、また!