こんな疑問を解消するために今回はConoHa WINGでWebサイトを公開する方法っていうのをやっていこうと思います。ConoHa WINGでWebサイトを公開したい方は参考にしてみてください。
- ConoHa WINGでHTML・CSS・JavaScriptで作ったサイトを公開する方法
- ConoHa WINGでReactで作ったサイトを公開する方法
- ConoHa WINGでVueで作ったサイトを公開する方法
ワードプレスサイトを公開したい場合
ConoHa WINGでワードプレスを使ってサイト公開をする方法は以下の記事を参考にしてみてください。ConoHa WINGのWordPressかんたんセットアップを使ったワードプレスサイトの作り方を以下でやっていますよ。
使用するConoHa WINGのプランはベーシックプラン
今回試すConoHa WING
の契約しているプランはWINGパックの一番安いベーシックプランです。一番安いもので十分。
ConoHaWINGは初期費用がかからないのが良いですね。WINGパックだと3ヶ月が最低利用期間になります。結構キャンペーンやっているので、気になったらサイト覗いてみるといいです。
ちょっと公開を試したいなら通常料金プランがおすすめ
もしサイト公開を試しにどんなもんか試してみたい！っていうぐらいなら通常料金プランがおすすめです。
の通常料金プランは初期費用なし・最低利用期間なし・時間当たりの従量課金制で1時間2.2円～というかなりの安さで使うことができます。ちょっと試してみたかったら通常料金プランでいきましょう。
数時間試しに使うぐらいなら数十円とか済みます。サーバーを削除すればそれ以上料金はかからないからかなり使いやすいです。
ConoHa WINGにWebサイトを公開する手順
- 独自ドメインをConoHa WINGに追加する
- FTPソフトでConoHa WINGに接続
- ローカルにあるWebサイトのファイルたちをアップロード
手順としてはConoHa WINGに接続してWebサイトのファイルたちを独自ドメインのフォルダにアップロードするだけだから簡単です。ただいきなりアップロードしても意味不明なので、ドキュメントルートやアップロードするWebサイトを確認します。
独自ドメインをConoHa WINGに追加していない場合
Webサイトを公開するドメインをConoHa WINGに追加していない場合は、以下の記事などを参考にして追加してみるといいです。
ConoHa WINGでもドメインは管理画面から購入することができるから、管理画面でドメインの項目を見てみるといいですね。
ConoHa WINGからWebサイトのドキュメントルートを確認しよう
まずはConoHa WINGがどのファイルをドキュメントルートにするのかを確認する。
ドキュメントルートに設置するファイルにつきましては、以下の優先順位で表示されます。
1. index.html
2. index.htm
3. index.shtml
4. index.cgi
5. index.php
これらのファイルが起点になるから、index.htmlという名称でファイル作って置けばそのファイルが表示される。Webサイトでhtmlファイルを作る際にはindex.htmlという名称で作っておこう。
ConoHa WINGで公開したいWebサイトを用意する
ConoHaで公開したいサイトを用意しよう。今回は前にエックスサーバーでやった時と同じものを使います。今回公開するサイトは下のやつです。
ファイルはindex.htmlからcssや画像などを読み込んで表示しています。
ファイル構成はこんな感じ。単純にhtmlとcssとjavascriptだけです。
├── images
│ └── html_css_js.png
├── index.css
├── index.html
└── lib
│ └──app.js
│ └──particles.min.js
ConoHaのドキュメントルートはindex.htmlが最優先として表示されるから、名称はindex.html。
React・Vueで作成したサイトも同じようなサイトです
後でReactとVueのサイトも公開するっていうことを書いていくけど、同じようなWebサイトを作って公開しています。どちらもビルドしたファイルたちをアップロードするだけなので簡単です。
FTPソフトでConoHa WINGにWebサイトのファイル群をアップロードする
作成したサイトのファイルたちをconoha WINGにアップロードしていきたいんだけど、SSH接続設定をしてからFTPソフトを使ってやりたいと思います。
SSH接続する
SSH鍵をConoHaWINGから取得しないといけないので、管理画面から取得しましょう。[SSH→SSH Key→保存]でキーをダウンロードすることができる。
ダウンロードボタンを押せばキーをダウンロードすることができる。SSH接続で使う情報はKeyを作成すると見ることができる。
これらのホスト名やポート番号、ユーザー名を使ってSSH接続してみよう。
これでConoHaWINGのサーバー内に入れたらOK。
FTPソフトでファイルたちをアップロードする
SSH接続が可能になったら、SSH接続してWebサイトのファイルたちをConoHaWINGのサーバーにアップロードします。FTPソフトはなんでもいいけど、今回はCyberduckを使ってやりたいと思う。Cyberduckの設定はConoHaのCyberduckの設定に書かれていますね。
せっかく鍵を取得したので鍵を使ってSFTP接続にしてやってみる。
するとConoHaWINGに接続することができました。
このpublic_html配下にドメイン名のフォルダがあるので見てみましょう。
このドメイン名の配下にファイルを置いていけば表示されるはずだから突っ込みます。
サイトを確認する
これでサイトを見てみると・・・ちゃんと表示されました。
ちゃんとConoHaWINGに設定した独自ドメインでサイトを見ることができました。
React・Vueで作成したWebサイトの場合もConoHa WINGで公開する
サイトをReactやVueで作って公開したい場合もあるでしょう。同じデザインでReactでもVueでも作ったのでそれらも公開してみましょう。
React
Reactの場合はビルドしたファイルを公開する必要があるからまずはbuildしよう。
buildしたらbuildフォルダはいかにbuidlされたファイルが生成されるから、それをConoHaWINGのサーバーにアップロードする。
ファイルをアップロードして確認してみると表示されましたが、Particle部分が死んでいますね。
ただサイトの表示は確認できたから良しとしましょう。
Vue
Vueの場合もReactと同じようにbuildしたファイルをアップロードすればOK。vueの場合はdist配下に生成されますね。
サイトにアクセスしてみると見れました。
まとめ
ConoHa WINGで以下のWebサイトを公開するっていうことをやってみました。
- ConoHa WINGでHTML・CSS・JavaScriptで作ったサイトを公開する方法
- ConoHa WINGでReactで作ったサイトを公開する方法
- ConoHa WINGでVueで作ったサイトを公開する方法
静的なWebサイトならFTPソフトでアップロードするだけで公開することができるので楽ですよね。
自分で作成したサイトを公開したかったらConoHa WING
使ってみるといいでしょう。
