ロリポップ!で自作のWebサイトを公開する方法を紹介します

ロリポップ!で自作したWebサイトを公開したいけどどうやるんだろう?

作ったWebサイトをせっかくならインターネットに公開したいですよね。

公開する手段はいくつかあるけど、その中でもレンタルサーバーのロリポップ!なら安いしどうだろう?と思ってこの記事を見ているのではないのでしょうか。

今回はそんな疑問を解消するために自作したWebサイトをロリポップ!で公開するっていうことをやっていきたいと思います。

記事の内容
  • HTML・CSS・JavaScriptのサイトをロリポップ!に公開する
  • React.jsで作成したサイトをロリポップ!に公開する
  • Vue.jsで作成したサイトをロリポップ!に公開する

Webサイトをロリポップ!で公開してみたかったらどういった流れでできるのか参考にしてみてください。

ワードプレスブログを公開する方法は以下の記事で書いているので、ワードプレスを使いたい場合は以下を参考にしてみてください。

公開自体はどれも簡単だからサクッとやっていこう

ロリポップ!でWebサイトを公開する手順

Webサイトを公開する手順としては以下。

Webサイトを公開する手順
  1. ドメインを取得して追加する
  2. 追加したドメインのフォルダにWebサイトのファイルをアップロードする

ロリポップ!にドメインを追加すると、そのドメインのフォルダが作られます。そのフォルダにWebサイトを構成するファイルたちを入れていけばOKです。

 使うべきロリポップ!のプランは?

サイトを公開するのにおすすめのロリポップ!!のプランはライトプランかスタンダードプランです。

静的なサイトでデータベースも使わないなら安いライトプランでもいけますが、SSH接続ができないのでスタンダードプランがお勧めです。

ライトプランとスタンダードプランの違いは以下の記事で書いているのでよかったら見てみてくださいね。

ここからはロリポップ!に契約している前提で話を進めるので、ロリポップ!の場合どういった流れでサイト公開することができるのか見ていってください。

ドメインを取得して追加する

既ににドメインをロリポップ!に追加している人は飛ばしてね

ドメインを取得するサイトはどこでもいいけど、お名前.comでやりますね。欲しいドメインの文字列を検索して取得可能か確認しましょう。

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

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

これでドメインの取得は完了したので、ロリポップ!でこのドメインを使えるようにします。

ロリポップ!に取得したドメインを追加する

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

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

  • uns01.lolipop.jp
  • uns02.lolipop.jp

これでOKボタンを押してやりましょう。

次はロリポップ!の管理画面から今取得した独自ドメインを登録するよ

取得したドメインをロリポップ!の管理画面から登録する

独自ドメイン設定から取得したドメインを設定しましょう。

  • 設定する独自ドメイン・・・取得した独自ドメイン
  • 公開(アップロード)フォルダ・・・公開先のフォルダ名。分かりやすいようにドメイン名と同じものがおすすめ。

ちなみにここ絵指定した公開(アップロード)フォルダはこんな風に作られます。ルートディレクトリ配下ですね。

独自ドメイン設定が終わるとこんな画面になります。

この設定したドメインにWebサイトのファイルたちをアップロードしていくよ

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

ドメインを追加したら追加したこのフォルダにWebサイトのファイルたちをアップロードします。

今回の例で言うとmagic-number.siteフォルダの中にアップロードしていきます。どういったファイル名でアップロードすればいいのか?だけどこれはロリポップ!に書かれていますね。

デフォルトドキュメント

デフォルトドキュメントとは、ブラウザで閲覧する場合にファイル名を省略することのできる特別な名前のファイルです。トップページに使用するHTMLファイルなどに使用します。ロリポップ!!では、以下のファイル名がデフォルトドキュメントとして設定されています。また、お客様が.htaccessファイルを設定し追加することもできます。

  • index.html
  • index.htm
  • index.shtml
  • index.shtm
  • index.php
  • index.cgi

同じディレクトリ内にこれらのファイルがある場合は、上記のファイルから優先的に適用されます。

Webサーバーの仕様

htmlファイルならindex.htmlという名称のファイルが起点になるように作るといいでしょう。

 ファイルのアップロードはFTPソフトを使ってやる

ロリポップ!にはロリポップ!!FTPっていうサーバー内にあるファイルを確認したりアップロードすることのできるものがあるんだけど、フォルダをアップロードできなかったりちょっと使いづらいのでFTPソフトを使ってやります。

FTPソフトはなんでもいいけど、Cyberduckでアップロードするね

FTPソフトを使ってWebサイトのファイルをアップロードして公開する

ここからはWebサイトのファイルたちをアップロードして公開していきます。

まずはHTML・CSS・JavaScriptでできたWebサイトをアップロードするよ

FTP接続の方法は以下の記事で書いたからよかったら参考にしてみてください。

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

パソコンにあるWebサイトのフォルダやファイルをFTPソフトを使って、ドメインのフォルダにアップロードします。

そうしてブラウザからドメインにアクセスしてみるとちゃんとサイトが表示されました。

次はReactとVueで作成したサイトをアップロードしてみましょう。

Reactで作成したWebサイトをアップロードしてロリポップ!で公開する

Reactの場合はbuildしたファイルたちをアップロードするよ

表示がミスっている部分もあるけど、Reactで作成したサイトも公開することができました。

Vueで作成したWebサイトをアップロードしてロリポップ!で公開する

Vueの場合はbuildしたファイルはdistフォルダの中に入るからそれらをアップロードするよ

Vueの場合も公開することができました。

自作のWebサイトをロリポップ!で公開する方法まとめ

ロリポップ!でWebサイトを公開するということをやってみましたが、今回やったことは以下です。

今回やった内容
  • HTML・CSS・JavaScriptのサイトをロリポップ!に公開する
  • React.jsで作成したサイトをロリポップ!に公開する
  • Vue.jsで作成したサイトをロリポップ!に公開する

もしかしたらちょっと面倒だな・・・と思うかもしれませんが、契約してしまえばアップロードするだけで公開できるので割と楽です。

ロリポップ!は料金も安いので、もし自分のサイトを公開してみたかったらやってみるといいですよ。

おすすめのプランはスタンダードです。(SSH接続できなくてもいいならライトプランもあり)