【誰でも簡単にできる】コーディングしたWebサイトの公開方法 5ステップ｜ドメイン？サーバー？の疑問も解決

こんにちは、ミナミです。

このように悩んでいる人はいると思います。

あまりネットに詳しくない人にはWebサイトを公開させるのは難しいかもしれません。

逆にWebサイトを公開できるようになると、サーバー側の知識も身につき、Web制作でとても役に立ちます。

そこで、今回は誰でも簡単にWebサイトを公開させる5つのステップを紹介します。

この記事を見れば、誰でも簡単にWebサイトを公開できるようになります。

Webサイトを公開する前に知ってほしい用語

まず最初に、Webサイト公開に使う用語を解説します。

用語の意味がわかるようになると、イメージしやすくなり、さらに簡単にWebサイトの公開ができます。

• ドメイン

ドメインとは、範囲、領域などの意味を持つ英単語で、ITの分野ではインターネットなどのTCP/IPネットワーク上で機器やネットワークを識別するドメイン名（domain name）を指すことが多い。

引用元：IT用語辞典

• サーバー

サーバとは、コンピュータネットワークにおいて、他のコンピュータに対し、自身の持っている機能やサービス、データなどを提供するコンピュータのこと。また、そのような機能を持ったソフトウェア。

引用元：IT用語辞典

• FTP

FTPとは、インターネットなどのTCP/IPネットワークでファイル転送を行うことができるプロトコル（通信規約）の一つ。

引用元：IT用語辞典

用語の解説をしましたが、これだけだととてもわかりにくいですよね。

僕もはじめ聞いたときはなんのことがわからなかったです。

イメージができやすい説明で、よく例えられるのが、

Webサイトを公開することは、家を建てること

と言われています。

コーディングしたWebサイトの公開方法5ステップ

独自ドメインを取得する

Webサイト公開の最初のステップは独自ドメインの取得です。

ドメインはサイトの住所となるのでサイトを公開させるには必須

独自ドメインはドメイン販売サイトで取得することができます。

ドメイン販売サイトはいろんなサイトがありますが、

がオススメです。

僕もお名前.comを使っていますが、特に問題もなく、使いやすいので、安心して使っています。

今回は僕も使っているお名前.comの申込方法を解説していきます

お名前.comの申し込み方法

⒈

のホームページで自分が使いたいドメインを入力して検索

⒉自分が登録したいドメインをチェックを入れる

⒊同じページの下にあるお名前.comのレンタルサーバーは「利用しない」にチェックを入れて、右の「お申込みへ進む」を選択

お名前.comのレンタルサーバーはあまり評判が良くないのでオススメできない

⒋料金を確認して、初めての利用だったら、メールアドレスとパスワードを入力して、「次へ」を選択

⒌個人情報を入力して「次へ進む」を選択

⒍お支払い方法を選択して、「申し込む」を選択

⒎ドメインの申し込むはこれで完了。メールが届くので確認する。

これで独自ドメインの取得は完了です。

サーバーを借りる

Webサイト公開の第２のステップはサーバーを借りることです。

先ほど説明しましたが、サーバーはいわゆる土地です。

まずネットに自分の土地を借ります。

レンタルサーバーのサービスはいろんなものがあります。

例えば、

などなどあります。

今回はレンタルサーバーの中でも実際に僕が使っているエックスサーバー で申し込み方法を解説

初心者の方はエックスサーバーは安定・安心なので、とてもオススメできます。

僕もブログを書いているときから、ずっとエックスサーバーを使っていますが、途中で不具合が起きたりしたことは１度もないです。

安心・安定のエックスサーバーなので、使っいて良かったと思っています。

エックスサーバーの申し込み方法

⒈エックスサーバー のホームページにいき、右上の「お申込み」を選択する

⒉「１０日間無料お試し、新規申し込み」を選択

１０日間無料でレンタルサーバーが使えるが、１０日間過ぎる前に料金の支払いをしないとレンタルサーバーが使えなくなるので注意

⒊サーバーIDとプランを選択して、「Xserverアカウントの登録へ進む」」を選択

⒋個人情報を入力していき、「次へ進む」選択

⒌メールアドレスに確認コードが送られてくるので、メールを確認して、確認コードを入力して「次へ進む」を選択

⒍個人情報を確認して、OKであれば、「SMS・電話認証に進む」を選択

⒎認証コードを取得する

⒏SMSで送られた５桁の数字を入力して、「認証して申し込み完了する」を選択

⒐「お申し込みが完了しました。」の文字が出てきたら、申し込み完了

料金の支払いがまだ完了していないので、料金の支払いをする（支払いをしないとサーバーが使えなくなるので注意が必要）

下の画像がレンタルサーバーの画面になります

⒑上にある「料金支払い」を選択

11.料金を支払うレンタルサーバーを選択して、契約期間を選択して、「支払い方法」を選択

契約金は1年で区切りが良く、わかりやすいため、１２ヶ月がおすすめ！

12.お支払い方法を選択して、決済する

これでエックスサーバーの申し込みは以上になります。

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

ここまでは独自ドメインとレンタルサーバーを取得しました。

しかし、このままだと、Webサイトを公開したり、WordPressをインストールすることができないです。

ドメインとレンタルサーバーを紐付けする必要がある

お名前.comで取得したドメインのネームサーバーを変更

先ほど、取得したお名前.comのドメインとエックスサーバーのレンタルサーバーを紐付けしていきます。

まずはドメインのネームサーバーを変更します。

ネームサーバーはドメインとレンタルサーバーを結びつける役割があります。

ネームサーバーとは、インターネット上でドメインとWebサーバーやメールサーバーを結びつけるための名前解決をするサーバーです。

インターネット上にあるサーバー（コンピューター）には、
すべてIPアドレス（123.145.167.189のように数字で構成されたもの）が割り振られています。
IPアドレスが判明すれば、実際にホームページやメールを運用しているサーバーにアクセスすることができます。

このIPアドレスとドメインを結び付ける役割を担っているのがネームサーバーとなります。
いわば、電話番号（ドメイン）と電話機（サーバー）を結びつける電話線のようなものです。

なお、ネームサーバーは【DNS（Domain Name System）サーバー】と呼ばれることもあります。

引用元：お名前.com ヘルプサーポート

①お名前.comにログインして、「ネームサーバーの設定」の「ネームサーバーの設定」を選択

②取得した独自ドメインにチェックを入れる

③「他のネームサーバーを利用」にチェックを入れて、エックスサーバーのネームサーバー情報を入力

エックスサーバーのネームサーバ情報はこちらで▼

④エックスサーバーのネームサーバー情報を入力して、「確認画面へ進む」を選択

⑤「ネームサーバーの変更　完了」が出たら、お名前.comのドメインの設定は完了です。

インターネットの環境により、反映完了まで24時間から72時間程度かかる場合あるの注意

エックスサーバーにドメインを追加する

①エックスサーバーのサーバーパネルにログインして、「ドメイン設定」を選択する

②「ドメイン設定追加」に選択して、お名前.comで取得したドメインを入力、「確認画面へ進む」を選択

「無料独自SSLを利用する」と「高速化・アクセス数拡張機能「Xアクセラレータ」を有効にする」はチェックを入れたままでOK！！

エックスサーバーでは、無料で独自SSLを利用することができます。

SSLを利用すると、ドメインが「https://〜」から始まり、セキュリティが高くなる特徴があります。

SSL（Secure Socket Layer）とは、インターネット上でデータを暗号化して送受信する仕組みのひとつです。クレジットカード番号や、一般に秘匿すべきとされる個人に関する情報を取り扱うWebサイトで、これらの情報が盗み取られるのを防止するため、広く利用されています。また、SSLは暗号化に加え、電子証明書により通信相手の本人性を証明し、なりすましを防止するなど、今日のインターネットの安心・安全を支えています。

引用元：総務省「国民のための情報セキュリティサイト」

③ドメイン名を確認して、「追加する」を選択

④「ドメイン設定一覧」に追加したドメインがあれば完了

ドメインのネームサーバーの変更と、エックスサーバーのドメインの追加を行いました。

ドメインのネームサーバーの変更は1日〜3日反映に時間がかかるのエックスサーバーのドメイン追加は1時間ほど時間がかかるのは注意が必要です。

ドメインとサーバーの両方の設定が完了すると、自分のサイトを持てるようになります。

自分で書いたコードをサーバーにアップさせたり、WordPressをインストールして、ブログやサイトを作ったりできるようになります。

FTPソフトをインストール

自分でコーディングしたサイトをWebサイトに公開させるためには、FTPソフトを使う必要があります。

FTPソフトとは、サーバにファイルをアップロードしたり、サーバにあるファイルをダウンロードしたりする際に使うファイル転送用ソフトウェアのことです。ウェブサイトをインターネット上に公開する目的で、ウェブページを構成するファイル群をウェブサーバにアップロードする用途にも使います。FTPサーバにアクセスするためのソフトウェアなので、FTPクライアントとも呼ばれます。

引用元：https://allabout.co.jp/gm/gc/47989/

つまり、FTPソフトはPCとサーバーの間に入り、情報をサーバーに渡す役割やサーバーから情報を受け取る役割があります。

今回のゴールであるWebサイトを公開させるために、FTPソフトはWebサイトのコードをサーバに運搬する役割があります。

サーバーにコードを運搬できると、実際にWeb上で自分で書いたコードが見ることができます。

FTPソフトはいろんな種類がありますが、今回はWindowsとMacの両方で使うことができる『FileZilla』を使います。

『FileZilla』は無料のFTPソフトでWindowsとMac両方で使うことができるのでオススメ！

『FileZilla』は僕も普段使っていますが、とても使いやすいので重宝しています。

『FileZilla』インストール方法

①FileZilla公式ページからFileZillaのインストーラーをダウンロードする

　左側の「Download FileZilla Client」を選択

　②自分が使っているOSを選んで、ダウンロードする（今回はMacでダウンロード）

③左側の「Download」を選択

④下の表示が出れば、ダウンロードされているのでOK

⑤FileZillaファイルをダウンロードしたら、ファイルを選択してインストールしていく

⑥Macの場合は、「開く」を選択してFileZillaを開いていく

⑦下のようなFillZilleソフトが表示がされれば、インストールOK！！

上のような状態になれば、FileZillaのインストールは完了、FTPソフトが使えるようになります。

コーディングファイルをサーバーにアップする

先ほど、インストールしたFileZillaのFTPソフトを使って、自分で書いたコーディングファイルをサーバーにアップします。

コーディングファイルをサーバーにアップすると、自分のWebサイトがネットで公開されて、見られるようになる

FileZillaでは

になっています。

自分のPCにあるコーディングファイルを右のサーバーに移すことにより、自分のWebサイトがネットで見れます。

①FileZillaを開いて、左上のアイコンを選択する

②左下の「新しいサイト」を選択、右の「ホスト」「ユーザー」「パスワード」を入力、「接続」を選択

③サーバーに接続すると、右側に自分が取得したドメインが表示されるので、選択する

④右下の「public_html」を選択する

⑤サーバー側の「public_html」のファイルの中に、左の自分のPCファイルの中から自分が公開させたいコーディングファイルをドラッグ＆ドロップする

⑥サーバー側にコーディングファイルが入っているか確認する

⑦ネットで自分が取得した独自ドメインを検索して、コーディングしたサイトが表示されていれば完了！！

これでWebサイトが公開できました。

Webサイトを公開できるようになるとポートフォリオを作れたり、自分のオリジナルサイトやブログも作れるようになります。

さらに、Webサイトが公開できることはサーバーやFTPの知識が身につくので、Web制作の仕事ではとてもプラスになります。

コーディングしたWebサイトの公開方法5ステップ　まとめ

今回はコーディングしたWebサイトの公開方法5ステップを紹介しました。

最初は難しいと感じた人も多いと思います。

しかし、一回サイトを公開できるようになると、そのあとは慣れてくるので、最初だけしっかりとすればOKです。

サイトの公開はサーバーやドメイン、FTPのことなどいろんな知識が身に付くので、今後この知識が活かせることは間違いなしです。

自分でブログを作ってもいいですし、ポートフォリオも作れるので、いろんなサイトをネットに公開していってください。