こんにちはTERUです。
フリーランスでWEB制作（コーディング or ディレクション業務）をしています。
読者の悩み
- ローカル環境で作成したサイトの公開方法が知りたい
本記事では、こういった疑問に答えます。
WEB制作初学者向けにポートフォリオサイトなど、ローカル環境で作成したサイト（HTML/CSS/JSなど）をインターネット上に公開する方法を説明します。
本記事では、レンタルサーバーとしてエックスサーバー
の利用を前提に記載しています。
レンタルサーバーの選び方が知りたい方はこちらの記事を参考にしてください。
サーバーの操作やFTPを使ったファイルのアップロードは、身につけると制作案件の幅も広がるので、これを機に勉強してみてください。
国内シェアNo.1レンタルサーバー「エックスサーバー」のお得なキャンペーン情報です。
2023年3月24日から2023年4月21日まで、利用料金最大30％オフキャンペーンを開催中です！
キャンペーン期間中、新規に『エックスサーバー』をお申し込みの方には、
「12ヶ月」のご契約で初回の利用料金が《20％オフ》、
「24ヶ月」のご契約で《25％オフ》、
「36ヶ月」のご契約で、なんと《30％オフ》になります！
本記事の信頼性
- Web制作会社にてWebディレクター経験あり
- 現在フリーランスでWEB制作をしている
- WordPressを使ったWeb制作を数多く経験している
はじめに
まずはじめに、これから契約する「サーバー」と「ドメイン」について、ざっくりとイメージを理解しておきましょう。
それぞれの役割は以下になります。
- サーバー：土地
- ドメイン：住所
- HP(WEBサイト)：家
WEBサイト（家）を公開するためにサーバー（土地）とドメイン（住所）が必要です。
これから契約方法を説明します。
サーバーを契約しよう
契約できるサーバーはいくつか種類がありますが、オススメはエックスサーバーです。
- 管理画面がシンプルで使いやすい
- サーバー稼働率99.99%以上の信頼性
- WordPressのインストールが簡単
- 無料でSSL化（https）に対応
- 自動バックアップ機能あり
このサイトもX-Serverを利用しています。
多数のコーポレートサイトでも利用されており、制作案件でも一番触る機会があるサーバーだと思います。
X-Serverを利用したWordPressブログの始め方は下記の記事が参考になります。
【初心者でも安心】たった10分で出来るWordPressブログの始め方
サーバー申し込み
さっそく公式サイトからエックスサーバーの申し込みを進めていきましょう。
（１）画面右上の「お申し込み」を選択します。
（２）「１０日間無料お試し 新規お申込み」を選択します。
（３）お申し込みフォーム画面にて、プランの「スタンダード」が選択されていることを確認します。
（４）画面下の「Xserverアカウントの登録へ進む」を選択します。
（５）ここからは、アカウント情報の入力画面になるので、氏名、住所、電話番号など、必要情報を入力します。
キャンペーン情報などお知らせメールが不要な場合は、チェックを外しておきましょう
（６）入力が完了したら、画面下の「次へ進む」を選択します。
（７）入力したメールアドレス宛に6桁の数字のみ記載されたメールが届くので、数字を「確認コード」欄に入力して、「次へ進む」を選択します。
（８）確認画面が表示されるので、入力内容に問題なければ、「この内容で申込みする」を選択します。
（９）会員登録を完了させると以下のメールが届きます。
件名：【Xserver】■重要■サーバーアカウント設定完了のお知らせ[試用期間] 〜
（１０）エックスサーバーの管理画面にアクセスし、上記メールに記載してある①「XserverアカウントID」と②登録したパスワードを入力し、「ログインする」を選択します。
※そのまま、「お支払い情報の設定」に進みましょう
お支払い情報の設定
（１）管理画面の右上にある「料金支払い」を選択します。
（２）対象サーバーをチェック（①）、更新期間を選択（②）し、「お支払い方法を選択する」を選びます。
Xserverの料金は、契約期間によって月額料金が変わってきます。
更新期間は長いほど、金額的にはお得になります。
※契約更新時に、期間を変更することは可能です。
※2022年7月時点の情報です。
出典：エックスサーバー｜高速・安定の高性能レンタルサーバー
（３）あとは好きな決済方法を選択して、お支払いを完了させます。
サーバー申し込みは以上になります。
ドメインを取得しよう
ドメインはサイトの住所の役割を持ちます。
ドメインを取得するサイトは数多くありますが、ほとんど差はありません。
本記事では、有名なドメイン取得サービスの一つであるお名前.com
での取得方法を説明します。
ドメイン取得手順
（１）取得したいドメイン名を入力して「検索」を選択します。
（２）取得したいドメイン名が取得可能であれば、「お申込みへ進む」を選択します。
※すでに利用されているドメイン名であれば、別のドメイン名で探します。
（３）ドメインを利用するサーバーを選択してくださいと表示されるので、「利用しない」を選択し、右側の「初めてご利用の方」-「メールアドレス」、「パスワード」を入力し、「次へ」を選択します。
※今回はエックスサーバーを利用するので、お名前.comのサーバーは使用しません。
（４）会員情報の入力画面で必須項目を入力し、「次へ」を選択します。
（５）お支払い方法の入力画面が出るので、こちらも必要項目を入力し、「申込む」を選択します。
以上がドメイン取得手順になります。
ドメイン取得について、さらに詳細な内容を別記事にまとめています。
よくある質問１：ドメイン名は何がいいの？
結論、ドメイン名はなんでもいいです。
よく言われている注意ポイントを２点説明します。
- トップレベルドメイン（
.comや.jpなど）は特に気にしなくてOK
→無難なのは、日本人に馴染みがある.comと.jp - 日本語ドメインは避けましょう。
→サイトを共有（シェア）された際に文字化けする。
→文字化けURLだと利用者からは、不信感もたれる
よくある質問２：ドメイン利用料はいくら？
取得するドメイン名により、利用料は変わるが、１年間のドメイン利用料の目安は１年間で200円〜1000円ほどです。
サーバーにドメインを設定しよう
先ほど取得したドメインを契約したエックスサーバーで利用できるように設定します。
ドメイン設定
（１）Xserverアカウントから①「XserverアカウントID」と②「パスワード」を入力してログインします。
（２）「サーバー管理」を選択し、サーバーパネルを表示します。
（３）サーバーパネルで、「ドメイン設定」を選択します。
（４）「ドメイン設定追加」タブを選択し、取得したドメイン名を入力して「確認画面へ進む」を選択します。
（５）確認画面が表示されるので「追加する」を選択します。
（６）設定完了画面が表示されるので、確認して右下の「戻る」を選択します。
先ほど追加したドメインが、ドメイン一覧の中に表示されていることが確認できます。
エックスサーバのネームサーバーを確認
（１）サーバーパネルで、「サーバ情報」を選択します。
（２）サーバ情報画面の赤枠部分がネームサーバー情報なのでメモしておきます。
ドメインのネームサーバーを変更
お名前.comで取得したドメインのネームサーバーをエックスサーバーのネームサーバに変更します。
（１）ドメインNaviで①「お名前ID」と「パスワード」を入力してログインします。
お名前.comでドメイン取得時に「[お名前.com]ドメイン登録 完了通知」というメールが届いています。
上記のメールにお名前IDは記載されています。パスワードは自身が設定したパスワードを入力してください。
（２）ドメインタブを選択し、ドメイン一覧から対象ドメイン名のネームサーバーの「初期設定」を選択します。
（３）ネームサーバー設定画面にて「その他」タブを選択し、赤枠部分にエックスサーバーのネームサーバを追記して「確認」を選択します。
（４）確認画面が表示されるので「OK」を選択します。
以上でドメインとサーバの紐付けは完了です。
ネームサーバー変更には２４時間ほどかかるので、次の作業は1日休んでからやりましょう。
ドメイン設定について、さらに詳細な内容を別記事にまとめています。
SSL設定をしよう
先ほど設定した独自ドメインに対してSSL設定を行います。
SSL=Secure Sockets Layerは、インターネットを利用する上でブラウザとサーバ間でのデータ通信を暗号化し、安全にデータをやり取りする仕組みのことです。
TERU先ほど設定したドメインに対してSSL設定を行います。
GoogleでもSSL化が推奨されており、セキュリティ対策だけでなく、SEO対策のためにも対応は必須です。
ブラウザからサイトにアクセスするURLが「hhtp~」から「https~」に変わります。
下記の2つのステップで行います。
- エックスサーバー側でSSL設定
- 常時SSL化の対応（http→httpsへリダイレクト）
エックスサーバー側でSSL設定
独自ドメイン設定の際に「無料独自SSLを利用する（推奨）」にチェックをつけていた場合、すでにSSL化は完了しております。※本記事の作業をする必要はありません！
（１）サーバーパネルで、「SSL設定」を選択します。
（２）対象ドメインの「設定する」を選択します。
（３）「独自SSL設定追加」タブから「確認画面へ進む」を選択します。
（４）確認画面が表示されるので「追加する」を選択します。
完了メッセージが表示されます
設定は最大１時間程度かかります。
設定中は「反映待ち」と表示されています。
TERU完了すると「反映待ち」の表示が消えます。
以上でエックスサーバーでのSSL設定は完了です。
常時SSL化の対応（http→httpsへリダイレクト）
httpでアクセスしても自動的にSSL対応しているhttpsへリダイレクトするための設定を行います。
（１）サーバーパネルで、「.htaccess編集」を選択します。
（２）対象ドメインの「選択する」を選びます。
（３）「.htaccess編集」タブから赤枠部分の文言を追記し、「確認画面へ進む」を選択します。
## Always On SSL
RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]（４）確認画面が表示されるので「実行する」を選択します。
完了メッセージが表示されるので、「戻る」を選択します。
（５）最後に常時SSL化が正常に対応できているか確認します。
下記のリダイレクトチェックサイトにアクセスします。
確認したいURL（ここではhttp）を入力し、「チェックする」を選択します。
チェック結果からhttp→httpsへ301リダイレクトされていることを確認します。
以上で常時SSL化の対応は完了です。
SSL設定について、さらに詳細な内容を別記事にまとめています。
FTPを利用してファイルをアップロードしよう
FTPソフトを利用して、契約したサーバーにファイルをアップロードしましょう。
アップロードすれば、インターネット上にサイトが公開されます。
FTPソフト（FileZilla）のインストール
今回はWindows/Mac共に無料で利用できる「FileZilla」というFTPソフトを利用します。
詳しいインストール方法は下記サイトを参照ください。
サーバーへの接続方法
（１）FileZillaを開き赤枠の「サイトマネージャー」を選択します。
（２）サイトマネージャー画面で「新しいサイト」を選択します。
（３）「ホスト」、「ユーザー」、「パスワード」を入力し「接続」を選択します。
※入力する値についてはサーバー契約した際に送付されてるメールを参考にしてください。
ファイルのアップロード
（１）接続するとディレクトリが表示されるので、ドメイン設定したドメイン名を選択します。
※ここでは「teru12131.com」
（２）次に、「public_html」フォルダを選択し、中に入ってる初期状態の２ファイルを削除します。
- default_page.png
- index.html
（３）ローカル環境にあるポートフォリオサイトのファイルを全てドラック＆ドロップで「public_html」フォルダ内にアップロードします。
※表示させたいページのファイル名はindex.htmlにしてください
（４）これでサイト公開は完了です。
※ブラウザからドメイン名にアクセスするとポートフォリオサイトが表示されます。
ファイルアップロードについて、さらに詳細な内容を別記事にまとめています。
まとめ
以上がローカル環境で作成したサイト（ポートフォリオ等）をインターネット上に公開する方法になります。
今回説明したサーバー、ドメイン、FTPの操作については、制作案件でも必要となる作業なので身につけておいて損はないです。作業の幅が広がると単価アップもできますので頑張りましょう！
以上です。