【爆速ポートフォリオ作成】 STEP4 独自ドメインを契約・設定する

どーも。さいんです。

今回も爆速ポートフォリオ作成をやっていきますが、前回作成したBootstrapのポートフォリオはいかがでしょうか?

反響もそこそこで、実際にポートフォリオを作成したという方もいらっしゃりとても嬉しく思っています。

この爆速ポートフォリオのシリーズをきっかけに一人でも多く、稼げるエンジニアが誕生することを目標に日々改善していきますね。

今回は独自ドメインの取得と設定方法を解説します。

さいん
さいん

わたしは、とある企業にてWebエンジニアとして年収1,000万ほどいただきながらサラリーマンをしています。

たくさんの方がプログラミングを勉強している事実を知り、稼げるエンジニアとして成長する手助けになればとブログを作りました。

目次

爆速ポートフォリオ作成について

爆速でポートフォリオを公開する手順を大きく5つのステップに分けて解説しています。

レンタルサーバの準備

前回解説した内容です。まだSTEP1を実施していない方は、STEP1の内容を事前にチェックしてくださいね

STEP1 レンタルサーバの準備はこちらから

レンタルサーバでホームページを公開する

ポートフォリオの前にサーバの設定とホームページを公開する手順を確認しましょう

STEP2 レンタルサーバでホームページを公開する

ポートフォリオの作成

HTML/CSS&Bootstrapでポートフォリオの作成方法を解説します。

STEP3 Bootstrapでポートフォリオの作成

独自ドメインを契約・設定する

今回解説する内容です

今後独自ドメインの設定が必要になった時のために、ドメインの取得方法と設定方法を解説いたします。

WordPressの作成

WordPressをインストール、初期設定をした後にテーマをカスタマイズして会社のコーポレートを作成します。

STEP 5-1 WordPressのインストール
STEP 5-2 WordPressの初期設定
STEP 5-3 WordPressで会社のページ作成

今回は独自ドメインの取得と設定を行います。

案件ではすでにドメインを持っているケースもありますが、独自ドメインの取得や設定までサポートできるとなると、高単価を狙えますし、Web制作をはじめたばかりの初学者とは大きな違いが出てきます。

今回も取得後にSTEP1で契約したサーバへ設定をしていきますでの、レンタルサーバがまだ準備できていない方は用意しておくことをおすすめします。

[card2 id=”365″]

ドメインとは?

ドメインとはなんでしょうか?

ドメインという言葉だけは聞いたことがある方も多いかもしれません。

簡単にいうとドメインとはホームページの住所の都道府県にあたる部分です。

ホームページのアドレスと普段使われますが、アドレスは複数の要素によって成り立っています。

このブログの記事のアドレスを分解すると

ドメインとパスの説明

と表現することができます。

さくらのレンタルサーバでSTEP2,STEP3で作成したHPのアドレスでもある、レンタルサーバからもらったドメインを確認してみましょう。

ドメインとサブドメインの説明

ちょっと構成が違うことにお気づきでしょうか?

ドメインの構成とIPアドレス

ドメインとファイル名の説明

基本的にはこのルールでURLというものができています。

ドメインの中には

  • .com
  • .net
  • .co.jp
  • .jp

などなど様々なドメインの種類があります。みなさんも聞いたことがあるのではないでしょうか?

では、このドメインはどういった役割をしているのでしょうか?

みなさんが借りたレンタルサーバにはIPアドレスという世界中で被りのないアドレスが割り当てられています。

実は誰でもサーバのIPアドレスはターミナルでnslookupというコマンドで調べることができます。

nslookupのサンプル

IPアドレスという数字の羅列は覚えるのも大変ですし、せっかく覚えたのに変わってしまうとまた覚えなおしです。

そのため人間にとって覚えやすいドメインを使って、ホームページを見る時は、裏側で勝手にドメインからIPアドレスを調べてホームページが見れるようになっています。

DNSの流れ

②は少し省略していますが、大きな流れをイメージできれば大丈夫です。

こういった流れでみなさんがホームページを見たいと思って、アドレスをブラウザに入れてホームページを見ることができています。

独自ドメインとは?

では独自ドメインとはなんでしょうか?

先ほどのさくらのレンタルサーバからもらったURLを見るとドメインは

sakura.ne.jpとなっています。そしてサブドメインをみなさん自由に決めました。

ドメインとサブドメインの説明

これはどういうことか図にしてみます。

サーバのドメインの例

sakura.ne.jpという街の中の、sideincomeやaaaaaというビルが立っているイメージです。

住所に近いイメージです。

.ne.jp 県 sakura 区 sideincomeビルディング

という住所であなたはsideincomeビルディングにホームページを作っています。

ドメインと独自ドメイン

では独自ドメインはどういう意味でしょう?

独自ドメインとは住所ではなく、あなた自身であなたのビルに施設名をつけるイメージです。

例えば、東京ディズニーランドです。

東京ディズニーランドの住所を知っている人ってかなり少ないですよね?

東京ディズニーランドという名称でも、住所でも東京ディズニーランドに行くことができますが、どちらの方が一般的にわかりやすいかは説明する必要もありませんよね?

東京ディズニーランドの例
  • IPアドレス = 座標 ・・・ 緯度35.6328964°, 経度139.8803943°
  • サーバのドメイン = 住所 ・・・ 千葉県浦安市舞浜1−1
  • 独自ドメイン = 名称 ・・・ 東京ディズニーランド

座標でも住所でも名称でも全て同じところを指していることがわかります。

サーバドメインと独自ドメインの説明

IPアドレスでもレンタルサーバのドメインでも独自ドメインでも同じサイトにアクセスが可能です。SNSで宣伝する際や、Googleに登録してもらうサイトをあなた自身で選ぶことができます。

この時に独自ドメインを準備しているか否かがポイントになります。

住所でも十分!と思う方も多いと思います。多くの家はビルよりも住所の方が使う機会が多いですよね?

しかし、ホームページでは住所よりも名称の方が重要になるケースが多いんです。

それは引っ越しをする場合です。

独自ドメインの重要性

アクセスが増えた、もっと性能がいいサーバを見つけた、レンタルサーバではなくVPSを使いたくなったといった様々な理由から将来引っ越しをしたくなったとき、住所が変わるとどうなるでしょうか?

Googleの検索結果やあなたのサイトにリンクを貼ってくれていた人、SNSなどで共有されたあなたの記事・・・・全ての住所が過去の住所に貼られているので、引っ越した場合ほぼゼロからのスタートになります。

あり得ない話ですが、例えば都内に大きな土地が安く手に入り、東京ディズニーランドが都内に引っ越すとなった場合

東京ディズニーランドの例
  • IPアドレス = 座標 変わる
  • サーバのドメイン = 住所 変わる
  • 独自ドメイン = 名称 変わらない! 東京ディズニーランドのまま

と、独自ドメインであれば引越しの影響がほとんどないんです。

独自ドメインのメリット

サーバを引っ越した場合、今までのアドレスからはサイトが見れなくなってしまい、今まで育ててきたURLが全て無駄になってしまいます。

しかし、独自ドメインで運用していれば、新しいサーバに変わったとしても独自ドメインの参照先を切り替えるだけでOKになります。

今まで頑張って育ててきたURLを引き継げるんです。

どうせ長くブログやサイトを運用するならスタートから独自ドメインを取得して、独自ドメインをみなさんに覚えて欲しいですよね?

では、早速独自ドメインの導入の流れを見てみましょう。

独自ドメインの取得する

レンタルサーバと同様に、独自ドメインもいろいろなサイトで取得ができます。

私がオススメするのは最も有名で、株主優待で節約もできるドメイン取るならお名前.comです。

[redshiny]ドメイン取るならお名前.com[/redshiny]

早速上のボタンからアクセスしてみましょう。

お名前.comのトップ画面

どかっとインパクトがあるページが表示されたと思います。

それではあなたが取得したいドメインを入力してみましょう。

どんなドメインでもいいですので、とりあえず思いついたドメインを入力してみることがポイントです。

取得できるドメインを探す

お名前.comでドメインを探す

すでに登録されているドメインは、他の人が保有しているドメインなので登録できません。

まれに今の保有者から購入することができるケースがありますが、高額になるため基本は今誰も保有していないドメインを探すことです。

お名前.comの登録できるドメインの説明

欲しいドメインが見つかるまで、新しいドメインを入力し検索を繰り返しましょう。あなたのサイトの名称になるので気に入るドメインが見つかるまで粘りましょう。

独自ドメインを契約する

お名前.comでドメインを申し込む

もし、欲しいドメインが登録できる場合は、ドメインにチェックを入れ、右側の料金確認へ進むをクリックします。

お名前.comのユーザ登録をする

メールアドレスとパスワードを入力し、次へをクリックしましょう。

お名前.comで登録を完了する

登録に必要な情報を入力し、次へ進むをクリックしましょう。

お名前.comの支払い方法の入力

支払い情報を入力し、ドメイン取得にかかる金額の確認を念のためしましょう。

ドメインによっては高額なものもあるので必ず金額をチェックしましょうね。

問題がなければ申し込むをクリックしましょう。

お名前.comドメイン申し込み

%の数字が出て、数字が増えていきます。100%になるまで待ちましょう

その後、登録が完了すると下のようなページに移動します。

お名前.comのドメイン申し込み完了

これでドメインの登録は完了です!お疲れ様でした!

[redshiny]ドメイン取るならお名前.com[/redshiny]

ドメインの設定をする

続いてドメインを設定し、取得したドメインからあなたのサイトへアクセスできるようにしましょう。

独自ドメインの設定画面を開く

お名前.comへのログイン

お名前.comにアクセスし、右上のお名前.com Naviログインをクリックします。

ログイン画面が表示されます。ログインIDは購入完了後のメールに記載がありますので、ログインIDと登録した際に設定したパスワードでログインしましょう。

お名前.com
お名前.comへのログインのメール

ログイン後、ヘッダーにあるドメインをクリックします。

お名前.com
お名前.comのドメインの設定

ドメインの表示されますが、その中に取得したドメインが表示されていると思います。

お名前.com
お名前.comの取得したドメイン

取得したドメインが確認できれば、次はレンタルサーバの設定です。

レンタルサーバの設定の確認

別のウィンドウを開き、さくらのレンタルサーバのコントロールパネルにログインしましょう。

さくらのレンタルサーバ
さくらのレンタルサーバへのログイン

さくらのレンタルサーバを作成した時のメールにログイン情報が記載されています。

コントロールパネルにログインしたらドメインの設定をします。

さくらのレンタルサーバ
さくらのレンタルサーバのドメイン設定

メニューから ドメイン/SSL にマウスを置き、ドメイン/SSLをクリックしましょう。

さくらのレンタルサーバ
さくらのレンタルサーバへのドメイン追加

ドメイン/SSLの設定画面を開き、ドメイン新規追加をクリックします。

さくらのレンタルサーバ
さくらのレンタルサーバへの独自ドメインの追加

画面下部の他社で取得したドメインを移管せずに使うをクリックする。

さくらのレンタルサーバ
さくらのレンタルサーバのネームサーバ

すると画面が表示されますので、中央に表示されている

2つのネームサーバを確認します。このネームサーバを取得したドメインに設定することで、取得したドメインとレンタルサーバの紐づけができるというわけです。

ドメインにネームサーバの設定をする

続いて先ほど確認したネームサーバの設定をドメインにしていきます。

お名前.com
お名前.comのネームサーバ

先ほど表示したお名前.comのドメインの設定画面にネームサーバの項目があり、初期設定の項目をクリックしてください。

お名前.com
お名前.comのネームサーバ設定

その後、登録したドメインであることを確認し、

ネームサーバーの選択の項目でその他をクリックしてください。

お名前.com
お名前.comへネームサーバ変更

その他をクリックすると画面が切り替わるので

その他のネームサーバーを使うを選択

お名前.comのネームサーバー1、ネームサーバー2に先ほど確認したさくらレンタルサーバのネームサーバを入力してください。

その後、確認をクリックし設定してください。

お名前.com
お名前.comのネームサーバの確認

確認のためのウィンドウが表示されますので、対象ドメインとネームサーバの情報があっているかを確認しましょう。

表示された情報に問題がなければOKをクリックしましょう。

お名前.com
お名前.comの設定完了

完了しました。と画面に表示されればお名前.comのドメインの設定は完了です!

レンタルサーバにドメインを追加する

お名前.comの設定が完了すると次はレンタルサーバの設定に戻ります。

先ほどの画面の上部にドメインを入力するボックスがあります。

さくらのレンタルサーバ
さくらのレンタルサーバのドメイン追加

取得したドメインをボックスに入力し、追加をクリックしましょう。

さくらのレンタルサーバ
さくらのレンタルサーバのドメイン追加の確認

少し待つとドメインの一覧に、お名前.comで取得したドメインが追加されます。

WEB公開フォルダに~/www/と、さくらレンタルサーバからもらったドメインと同じフォルダが設定されていますね。

これでドメインの設定が完了です!

サイトの確認をする

設定が反映されるまで、数時間程度かかる場合があるので、しばらく待ってからお名前.comで取得したドメインにアクセスしてみましょう。

私の場合は30分程度で設定が反映され、サイトが表示されました。

独自ドメインでのサイトの確認

おめでとうございます!

STEP3で作成したサイトが表示されれば大成功です。これで独自ドメインの取得から設定までが完了です!

SSL(https)の設定をする

ドメインの設定が完了しましたが、最近ではセキュリティの関係から全てのサイトに対してSSL証明書(https化)の適応が推奨されています。

必須ではありませんが、ほとんどのケースでSSLを適応しておいた方がいいので補足としてhttps化の設定を紹介いたします。

SSL証明書について

SSLやhttpsの設定であまり紹介されることはありませんが、https化をすることでサーバとユーザのブラウザ間の通信で情報のを読み取られたり改竄を防ぐことができます。

ほとんどの個人のサイトは通信を暗号化をするための用途で十分ですが、企業のHPなどはSSL証明書によりそのサイトが実在する企業のサイトであることを証明する用途でも使用できます。

Twitterでも有名人のアカウントは本人のものであると公式マークというものをつけることができますが、これに似た用途もSSL証明書により可能です。

暗号化だけであれば無料でも発行ができますが、実在する企業のサイト用の証明書は高額なので、通常は無料の証明書を活用しましょう。

SSL証明書を発行しよう

SSL証明書の発行はレンタルサーバに対して作業を行う必要があるので、さくらのレンタルサーバのコントロールパネルを開き、ドメインの設定画面を開きましょう。

さくらのレンタルサーバ
さくらのレンタルサーバへのログイン

ドメインの設定画面が表示されたら、追加したドメインを探してください。

さくらのレンタルサーバ
さくらのレンタルサーバでのSSL設定

追加したドメインにSSLというボタンがあるので、SSLボタンをクリックしましょう。

さくらのレンタルサーバ
さくらのレンタルサーバでの無料SSL登録

登録設定を始めるをクリックしてください。

ちなみに下に表示されている有償SSLというのは先ほど説明した証明書たちです。案件によっては有償SSLを希望される場合もあるので、少し覚えてきましょう。

さくらのレンタルサーバ
さくらのレンタルサーバでのLet’s Encryptの設定

一番上のLet’s Encrypt (無料SSL)利用するをクリックしてください。

さくらのレンタルサーバ
さくらのレンタルサーバでの無料SSLの申し込み

確認のチェックボックスにチェックを入れ、無料SSLを設定するをクリックしてください。

さくらのレンタルサーバ
さくらのレンタルサーバでの無料SSL申し込み完了

無料SSLを設定するをクリックすると発行手続きが開始され、完了後にメールが届きます。

少し時間がかかりますので、コーヒーでもいれてのんびり待ちましょう。

しばらくすると

[さくらインターネット]SSLサーバ証明書発行のお知らせ

というメールが届いたらSSLの設定が完了です。

https://side-income.work/

httpsでアクセスしてみましょう!

無事、STEP3で作成したポートフォリオのサイトが表示され、アドレスバーに

無料SSLの設定確認

鍵マークがついていることを確認しましょう。

お疲れ様でした!

まとめ

今回は独自ドメインの契約から設定、そして最後にSSL化まで一気に駆け抜けました。

駆け出しのエンジニアでブログを作ったり、ポートフォリオを作成したりしていますが、ブログサービスを契約するときに一緒に独自ドメインを登録し、SSLも勝手に設定してくれるサービスを使用している場合が多いです。

ゼロからレンタルサーバを契約し、独自ドメインを契約し、それを自分で設定を行いSSLを行ったあなたは頭ひとつ抜け出したスキルをすでに持っています。

今回あなたはたくさんのスキルを身についていることにお気づきでしょうか?

あなたが身につけたスキル
  • 独自ドメインを取得する
  • 独自ドメインを設定する
  • 独自ドメインのSSL(https)化

例えレンタルサーバが違っても、ドメインを取得するサイトが違っても、同様の内容の設定をそれぞれに行えば設定できるという応用力を持っています。

次はついにWordpressの作成という最終ステップです。

しっかりついてきてくださいね。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次
閉じる