SAKURUG TECHBLOG

【初学者向け】ドメイン取得からサイト立ち上げまで

技術記事

2025-03-27 author-name

Haruya

はじめに

23卒フロントエンドエンジニアのAriokaです。

普段Webサイトの作成、開発に携わっていますが、ドメイン取得、サイト立ち上げを行ったことがないことに気がついたので、普段インフラチームの方々が作業してくださるドメイン取得からサイト立ち上げを1人で行ってみることにしました。

初学者向けにはなりますが、同じような環境でプライベート開発環境の立ち上げをする方の力に少しでもなれればと思います。

今回作成するサイトの基本情報

使用言語：HTML, CSS, JavaScript

フレームワーク：Nuxt3

Node.js：v18

ホスティングサーバ：Vercel

サイト開設に必要なモノ

①ドメインの取得

②サーバーの準備

③サイトに必要なデータ類（HTML、CSSなどの基本データ類）

上記3つさえあればサイトの立ち上げは可能です。

実際の作業内容

手順1 ドメインを取得する

手順1-1 ドメインを取得する

お名前.comにアクセスし、希望するドメインを画面中央のテキストボックスに入力

※今回はお名前.comを利用しますが、他にも"さくらのドメイン"や"Xserver Domain"などのサービスもありますので、ご自身の用途に合ったサービスで取得してください。

【お名前.com】

https://www.onamae.com/?utm_source=Google&utm_medium=paidsearch&banner_id=102_kwt_domain_domainbrand-onamae_rsa_006&waad=Ev0lmQOs

今回は●●.jpといった形式で取得します。

ドメイン豆知識

ドメインの種類には以下のような種類が存在します。

【gTLD（分野別トップレベルドメイン）】

Generic Top Level Domainの略称。
一般的に、国や地域によらないトップレベルドメイン（TLD）で、「.com」や「.net」のように登録に特段の制限がないものと、「.aero」や「.post」のように登録に一定の要件が必要なものがあります。

【ccTLD（国別トップレベルドメイン）】

Country Code Top Level Domainの略称。
国や地域に割り当てられたトップレベルドメイン（TLD）です。その文字列には、原則としてISO（国際標準化機構）のISO 3166-1において規定されている2文字の国コード（*1）が使用されています。ルートゾーンの管理とTLDの委任はICANN（Internet Corporation for Assigned Names and Numbers）が行っており、日本には「.jp」が割り当てられ、JPRSが委任を受けています。

詳しくは以下サイトをご確認ください。

【gTLD（分野別トップレベルドメイン）】

https://jprs.jp/glossary/index.php?ID=0024

【ccTLD（国別トップレベルドメイン）】

https://jprs.jp/glossary/index.php?ID=0014

【そもそもドメインとは？？】

https://www.xserver.ne.jp/blog/about-domain/?psafe_param=1&gad_source=1&gclid=Cj0KCQjwhMq-BhCFARIsAGvo0KeL6vkX92MVZgWuE3D8xgvOn1ZPUyRuZSKL3JQSSPSh-Dsyjl5jpu8aAtNsEALw_wcB

手順1-2 ドメインを取得する

お名前.comの画面案内に従い、希望するドメインが取得可能であればそのまま以下画像の確認画面まで進みます。

手順1-3 ドメインを取得する

個人情報を入力します。

この際、「個人」「法人」の選択肢がありますので、用途に合った方を選択してください。

今回は個人を選択します。

手順1-4 ドメインを取得する

以下画面が表示されればドメインの取得は完了です！

手順2 サーバーを用意する

Nuxtを使用したサイト構築では以下のようなホスティングサービスが挙げられますが、今回は以下の理由から
Vercelを使用します。

【Netlify】（商業利用OK）
【Vercel】（今回はコレを使います。無料版商業利用NG）
【Cloudflare Pages】（Bandwidth等々色々無制限で使える）

Vercelを選んだ理由↓
軽い、UIがシンプル、無料でBasic認証かけられる（個人開発で使うのかな、、？）、Nuxtを使う上で安心のVercel社製。

手順2 サーバーを用意する

手順2-1 サーバーを用意する

ドメインが取得できたので、続いてはサーバーを用意します。

Vercelのサイト上でアカウントを作成後、

ホーム画面から先ほど取得したドメインで開発する際に使用するGitと紐付けを行う。

（事前にGitの作成、登録が必要です。）

紐付け作業に関しては難しいことは何もなく、Vercel画面上の紐付けの案内にしたがって登録してください。

手順2-2 サーバーを用意する

gitとの紐付け後、自動で作成されたURLは「https://arioka-pro-nuxt-ariokas-projects.vercel.app/」のようにブランチ名に添ったものになるので、希望するのドメインにするには、先ほどお名前.comで作成した●●.jpというドメインに変更する必要がある。

settings > domains > edit > 　から、先ほど取得したドメインを登録。