- 自作のWebサイトをカラフルボックスで公開する方法
HTML・CSS・JavaScriptでできたWebサイトを公開していくから、同じようなことをしたかったら参考にしてみてください。
ワードプレスサイトを公開したかったら
ワードプレスサイトをカラフルボックスで公開したかったら以下の記事で紹介しているので、参考にしてみてください。
カラフルボックスに公開するWebサイト
今回カラフルボックス
に公開してみるWebサイトはこれです。
HTML・CSS・JavaScriptでできているやるでファイルはこんな感じ。
├── images
│ └── html_css_js.png
├── index.css
├── index.html
└── lib
│ └── app.js
│ └── particles.min.js
この単純なやつをカラフルボックスで公開しよう。
カラフルボックスで自作Webサイトを公開する手順
カラフルボックスで自作Webサイトを公開するのは大まかに以下の流れで行うことができます。
- 独自ドメインを取得する
- DNSゾーンの設定をする
- 独自ドメインをカラフルボックスに追加する
- Webサイトをカラフルボックスにアップロード
公開する独自ドメインをカラフルボックスに追加したら、後はWebサイトのファイルたちをカラフルボックスにアップロードすればいいだけです。
アップロードにはFTPソフトを使う
ファイルたちのアップロードにはFTPソフトを使います。この記事ではCyberduckを使ってやるけど、使うソフトは何でもいいです。好きなものを使ってアップロードしてみてください。
Webサイトをアップロードするディレクトリ
Webサイトのファイルたちをどこにアップロードすれば公開できるかだけど、ドキュメントルートにアップロードすればOK。ドキュメントルートはpublic_html配下ならドメインの設定時に設定することができる。
ドキュメントルートは、public_html配下であれば、お好きなフォルダを指定いただけます。独自ドメインまたはサブドメインの設定時にご指定下さい。
そんな難しいことはなく、ドメイン設定時のディレクトリにアップロードすればいいだけです。ドメイン追加時に書いてきます。
サイトに使う独自ドメインを取得する
お名前.com
でドメインを取得したらそのドメインのネームサーバーをカラフルボックスのものに変更します。
- ns1.cbsv.jp
- ns2.cbsv.jp
OKを押せばお名前.comでの設定は完了です。
カラフルボックスでドメインのDNS設定を行う
次はカラフルボックスでDNS設定を行いましょう。
他のレンタルサーバーだとお名前.comでネームサーバー情報変更すれば使えるものが多いけど、カラフルボックスはDNSゾーンというものを設定しないといけない様子。
[ドメイン→DNSの管理]と進んで[新しいゾーンを追加]をクリック。他社管理ドメインの場合、カラフルボックスのサーバーをご利用いただくDNS設定にしていただく必要がございます。
ここにゾーン名とレコードセットを入力します。
- ゾーン名・・・お名前.comで取得したドメイン名（○○.com等）
- レコードセットを選択・・・自分のサーバー名を選択
レコードセットで何を選べばいいか分からなかったら、cPanelのサーバー情報から確認することができるから確認しよう。
サーバー名の確認方法
cPanelの右側にある一般情報からサーバー情報を確認することができます。
このサーバー名と一致するレコードセットを選択すればOKです。ちなみにゾーンを設定したらゾーンの状態が確認できるまで最大15分かかります。
設定したらこれでDNSの設定は終わりです。
カラフルボックスでドメインを追加する
カラフルボックスのcPanelからドメインを追加しましょう。[アドオン ドメイン]からドメインを追加することができる。
ここにお名前.comで取得したドメイン名を入力してやればOKです。
- 新しいドメイン名・・・お名前.comで取得したドメイン名
- サブドメイン・・・そのままでOK
- ドキュメントルート・・・そのままでOK
基本そのままでOKですが、ドキュメントルートなんかを変えたい人は設定してあげてもいいですね。ただ個人的にはそのままのドキュメントルートが一番わかりやすくていいと思います。
設定したドキュメントルートにWebサイトのファイルたちをアップロードするよ
ここで設定したドキュメントルートにWebサイトのファイルたちをアップロードすれば公開することができます。上の画像でいえば、/public_html/green-wall.siteにWebサイトのファイルたちをアップロードすればOK。
Webサイトをカラフルボックスにアップロードする
アップロードするディレクトリの確認
ドメインを追加したときに設定したドキュメントルートにアップロードすればいいだけだけど、ドメインからドキュメントルートは確認することができる。
このドキュメントルートに記載されているディレクトリにアップロードすればOKです。
アップロードにはFTPソフトを使う
アップロードにはFTPソフトを使って行います。FTPソフトを使ってカラフルボックスに接続する方法は以下の記事で書いているから、やり方がわからなかったら参考にしてみてください。
FTPソフトでWebサイトをアップロードする
FTPソフトで接続したら公開したいドメインのドキュメントルートにWebサイトのファイルたちをアップロードします。
これでアクセスすると無事Webサイトが表示されました。
SSL化は自動で行われる
最初はhttpでしかアクセスできないかもしれないけど、https化は自動で行われます。もしSSL設定のステータスを見たかったらcPanelからSSL/TLS Statusという項目を見れば確認することができる。赤色の場合は反映がまだだから気長に待とう。
無料独自SSLが有効化されるまでは、ドメインの追加後10分から最大24時間程度の時間が必要となります。ドメインの追加後、時間が経過していない場合は、しばらくお待ちいただいた上で再度ご確認下さい。
ただSSL設定を早く設定したい場合には[AutoSSLを実行する]をクリック。
緑色になったらOKです。
ただ[AutoSSLを実行する]を押しても赤色のままの場合もあるから、その場合は時間が経ってからもう一度見てみましょう。
カラフルボックスでWebサイト公開まとめ
今回はカラフルボックスでWebサイトを公開するっていうことをやってみたけど、大まかな流れはこんな感じでした。
- 独自ドメインを取得する
- カラフルボックスに独自ドメインを追加する
- Webサイトのファイルたちをアップロードする
Webサイトの公開はファイルをアップロードさえすれば簡単だけど、ドメインの設定をしたりっていうのがちょっと面倒だね。カラフルボックスでWebサイト公開したかったら試してみるといいですよ。