さくらのレンタルサーバで自作Webサイトを公開する方法

そんな疑問を解消するためにこの記事ではさくらのレンタルサーバで自作のWebサイトを公開する方法を書いていきます。

どのレンタルサーバを使っても基本的な流れは同じだから、他のレンタルサーバで同じようなことをやったことがあればすんなりできます。

ただ初めてやるっていう人が多いと思うから、最初から書いていきますね。

 さくらのレンタルサーバで自作Webサイトを公開してみたよ

この記事で公開してみるWebサイトは以下の3つの種類。

• HTML・CSS・JavaScriptで作成したWebサイト
• Reactで作成したWebサイト
• Vueで作成したWebサイト

さくらのレンタルサーバで同じようなサイトを公開してみたかったら参考にしてみてください。

さくらのレンタルサーバでサイト公開しよう

公開したいWebサイトの種類は

この記事では自らがプログラミングしたサイトを公開するっていうことを書いていくんだけど、もしかしたらワードプレスブログやサイトを公開したいという方もいるかもしれません。

ワードプレスを使った方法は以下の記事で書いているからそっちを参考にしてみてください。

ちなみにもしこれからサイトを作るなら圧倒的にワードプレスを使った方が簡単です。

この記事で公開するWebサイトは3つ

この記事では上記3つのWebサイトをさくらのレンタルサーバで公開していきます。

さくらのレンタルサーバで自作Webサイトを公開する手順

自作のWebサイトを公開する手順としては以下の流れ。

既にレンタルサーバの契約や独自ドメインの取得が終わっている場合はそれらを飛ばしてみてください。

さくらのレンタルサーバを契約する

さくらのレンタルサーバとまずは契約です。2週間無料で試すことができるから使ってみてどうか試してみるといいですよ。

サービスプランは好きなものを選べばいいけど、個人的にはスタンダードをおすすめします。

初期ドメインは好きな文字列を登録してください。

今回は初期ドメインは使わずに独自ドメインを登録して、その独自ドメインでWebサイトを公開します。

独自ドメインの欄は「レンタルサーバだけ契約する」にしておきましょう。

「独自ドメインも取得する」を選択して独自ドメインを取得してもいいけど、ドメインの取得はお名前.comでやっていきます。

必要事項を入力したら新規会員登録に進みましょう。

さくらインターネット新規会員登録

会員登録画面ではメールアドレスや会員情報を入力して登録を済ませます。

支払い選択では好きな支払い方法を選択しておきましょう。

「この内容で申し込む」ボタンを押すと申し込みが完了します。

申し込みは完了したので、次は公開するWebサイトに使う独自ドメインの取得を行います。

独自ドメインを取得する

ドメインを取得するサイトはいろいろあるから、自分の好きなサイトで取得するといいですが今回はお名前.comで紹介します（自分はよくお名前.comを使います）。

まずは欲しいドメインの文字列を検索して取得可能か確認しましょう。

既に取得されているものは使うことができないので、いくつか検索してみるといいです。

欲しいドメインにチェックを入れて料金確認へ進みます。申込内容を確認して申し込めばOKです。

これでドメインの取得は完了したので、さくらのレンタルサーバでこのドメインを使えるようにします。

お名前.comでネームサーバーの設定をする

さくらのレンタルサーバで今取得した独自ドメインを使うための紐づけをします。[ネームサーバーの設定]から取得したドメインにチェックを入れてさくらのレンタルサーバのものに設定しましょう。

OKボタンを押して完了です。

さくらのレンタルサーバに取得したドメインを追加する

さくらのレンタルサーバに今取得したドメインを追加します。[ドメイン/SSL]から[ドメイン新規追加]をクリック。

ここでドメインの追加ができるんだけど、一番下の他社で取得したドメインを移管せずに使うの追加を選択。

そしたら取得したドメインを入力して追加ボタンを押そう。

これでドメインの登録はOKです。

Webサイトを作成する

公開したいWebサイトを用意しましょう。今回はこのサイトを公開します。

上はhtmlファイルでできているものだけど、ReactとVueで作成した同じものもあるのでそれらを公開してみたいと思います。

サイトを作って用意しておきましょう。

Webサイトをさくらのレンタルサーバに公開する流れ

Webサイトを構成するファイルたちをアップロードすれば公開することができるんだけど、公開するための設定がいくつかあります。順番にやっていきましょう。

FTPソフトをインストールする

WebサイトのアップロードにはFTPソフトを使ってやります。FTPソフトはなんでもいいけど、自分はCyberduckをよく使うのでCyberduckでやりますね。

FTPソフトは色々あるけど、好きなものを使ってみるといいですよ。

FTP接続かSFTP接続する

WebサイトのファイルたちをアップロードするのにまずはさくらのレンタルサーばにFTPソフトで接続しないといけません。接続方法に関しては以下の記事で書いているので参考にどうぞ。

公開フォルダの設定をする

ドメインにアクセスされた時の公開フォルダを設定します。ドメインの[設定]ボタンをクリック。

Web公開フォルダの欄に好きな名前を設定します。何でもいいけど、今回は名前は分かりやすいようにドメイン名にしておきます。

Web公開フォルダの内容がアクセスされると表示されるようになるので、画像でいうとwww/magic.number.siteフォルダに公開したいファイルたちを入れればOKです。

公開フォルダを作成する

Web公開フォルダで指定した名称と同じものを作ります。作り方はSSH接続でもFTPソフトで接続して作ってもいいけど、Web公開フォルダで指定したものと同じ名称で作りましょう。

この作ったフォルダにWebサイトのファイルたちをアップロードしていきますよ。

Webサイトをさくらのレンタルサーバにアップロードする

Webサイトのファイルをアップロードする

FTPソフトでWebサイトのファイルたちをアップロードします。

これでサイトを確認してみるとちゃんと表示されましたね。

アドレス欄に鍵マークがついているけど、これはSSL設定をしているのでなっています。後でSSL設定の方法は書いておきます。

Reactで作成したサイトの場合

Reactで作成したWebサイトはbuildしたファイルたちをアップロードします。

Vueで作成したサイトの場合

Vueで作成したサイトもbuildしたファイルたちをアップロードします。

ちゃんと表示されましたね。

SSL設定をする

アップロードしただけだとhttpのままでhttpsにはなっていないと思います。ただhttpsにした方が安全で良いので設定しておきましょう。[ドメイン/SSL]から[ドメイン新規追加]をクリック。

登録設定を始めるSSL証明書の種類を選択をクリックして、Let's Encrypto（無料SSL）を利用するを選択します。

無料独自SSLを設定するをクリックすればOKです。

ちょっと経ってからサイトにhttpsでアクセスして鍵マークが表示されるか確かめてみましょう。

さくらのレンタルサーバで自作Webサイト公開のまとめ

今回はさくらのレンタルサーバでWebサイトを公開するっていうことをやってみたけど、以下のような流れでできました。

ドメインの設定をしたり、FTPソフトの接続をしたりちょっと面倒だけどアップロードするだけだから結構簡単に公開することができます。

何か自作のWebサイトを公開したかったらさくらのレンタルサーバで試してみるといいでしょう。2週間無料で使えます。