作ったWebサイトをせっかくならインターネットに公開したいですよね。
公開する手段はいくつかあるけど、その中でもレンタルサーバーのロリポップ！なら安いしどうだろう？と思ってこの記事を見ているのではないのでしょうか。
今回はそんな疑問を解消するために自作したWebサイトをロリポップ！で公開するっていうことをやっていきたいと思います。
- HTML・CSS・JavaScriptのサイトをロリポップ！に公開する
- React.jsで作成したサイトをロリポップ！に公開する
- Vue.jsで作成したサイトをロリポップ！に公開する
Webサイトをロリポップ！で公開してみたかったらどういった流れでできるのか参考にしてみてください。
ワードプレスブログを公開する方法は以下の記事で書いているので、ワードプレスを使いたい場合は以下を参考にしてみてください。
目次
ロリポップ！でWebサイトを公開する手順
Webサイトを公開する手順としては以下。
- ドメインを取得して追加する
- 追加したドメインのフォルダにWebサイトのファイルをアップロードする
ロリポップ！にドメインを追加すると、そのドメインのフォルダが作られます。そのフォルダにWebサイトを構成するファイルたちを入れていけばOKです。
使うべきロリポップ！のプランは？
サイトを公開するのにおすすめのロリポップ！！のプランはライトプランかスタンダードプランです。
静的なサイトでデータベースも使わないなら安いライトプランでもいけますが、SSH接続ができないのでスタンダードプランがお勧めです。
ライトプランとスタンダードプランの違いは以下の記事で書いているのでよかったら見てみてくださいね。
ここからはロリポップ！に契約している前提で話を進めるので、ロリポップ！の場合どういった流れでサイト公開することができるのか見ていってください。
ドメインを取得して追加する
ドメインを取得するサイトはどこでもいいけど、お名前.comでやりますね。欲しいドメインの文字列を検索して取得可能か確認しましょう。
既に取得されているものは使うことができないので、いくつか検索してみるといいです。
欲しいドメインにチェックを入れて料金確認へ進みます。申込内容を確認して申し込めばOKです。
これでドメインの取得は完了したので、ロリポップ！でこのドメインを使えるようにします。
ロリポップ！に取得したドメインを追加する
お名前.comでネームサーバーの設定をする
ロリポップ！で今取得した独自ドメインを使うための紐づけをします。[ネームサーバーの設定]から取得したドメインにチェックを入れてロリポップ！のものに設定しましょう。
- uns01.lolipop.jp
- uns02.lolipop.jp
これでOKボタンを押してやりましょう。
取得したドメインをロリポップ！の管理画面から登録する
独自ドメイン設定から取得したドメインを設定しましょう。
- 設定する独自ドメイン・・・取得した独自ドメイン
- 公開（アップロード）フォルダ・・・公開先のフォルダ名。分かりやすいようにドメイン名と同じものがおすすめ。
ちなみにここ絵指定した公開（アップロード）フォルダはこんな風に作られます。ルートディレクトリ配下ですね。
独自ドメイン設定が終わるとこんな画面になります。
Webサイトのファイルをアップロードする流れ
ドメインを追加したら追加したこのフォルダにWebサイトのファイルたちをアップロードします。
今回の例で言うとmagic-number.siteフォルダの中にアップロードしていきます。どういったファイル名でアップロードすればいいのか？だけどこれはロリポップ！に書かれていますね。
デフォルトドキュメント
デフォルトドキュメントとは、ブラウザで閲覧する場合にファイル名を省略することのできる特別な名前のファイルです。トップページに使用するHTMLファイルなどに使用します。ロリポップ！！では、以下のファイル名がデフォルトドキュメントとして設定されています。また、お客様が.htaccessファイルを設定し追加することもできます。
- index.html
- index.htm
- index.shtml
- index.shtm
- index.php
- index.cgi
同じディレクトリ内にこれらのファイルがある場合は、上記のファイルから優先的に適用されます。
htmlファイルならindex.htmlという名称のファイルが起点になるように作るといいでしょう。
ファイルのアップロードはFTPソフトを使ってやる
ロリポップ！にはロリポップ！！FTPっていうサーバー内にあるファイルを確認したりアップロードすることのできるものがあるんだけど、フォルダをアップロードできなかったりちょっと使いづらいのでFTPソフトを使ってやります。
FTPソフトを使ってWebサイトのファイルをアップロードして公開する
ここからはWebサイトのファイルたちをアップロードして公開していきます。
FTP接続の方法は以下の記事で書いたからよかったら参考にしてみてください。
Webサイトのファイルをアップロード
パソコンにあるWebサイトのフォルダやファイルをFTPソフトを使って、ドメインのフォルダにアップロードします。
そうしてブラウザからドメインにアクセスしてみるとちゃんとサイトが表示されました。
次はReactとVueで作成したサイトをアップロードしてみましょう。
Reactで作成したWebサイトをアップロードしてロリポップ！で公開する
表示がミスっている部分もあるけど、Reactで作成したサイトも公開することができました。
Vueで作成したWebサイトをアップロードしてロリポップ！で公開する
Vueの場合も公開することができました。
自作のWebサイトをロリポップ！で公開する方法まとめ
ロリポップ！でWebサイトを公開するということをやってみましたが、今回やったことは以下です。
- HTML・CSS・JavaScriptのサイトをロリポップ!に公開する
- React.jsで作成したサイトをロリポップ!に公開する
- Vue.jsで作成したサイトをロリポップ!に公開する
もしかしたらちょっと面倒だな・・・と思うかもしれませんが、契約してしまえばアップロードするだけで公開できるので割と楽です。
ロリポップ！
は料金も安いので、もし自分のサイトを公開してみたかったらやってみるといいですよ。
おすすめのプランはスタンダードです。（SSH接続できなくてもいいならライトプランもあり）
