ConoHa WINGでWebサイトを公開する方法【React・Vueの場合も】

ConoHa WINGでWebサイトってどうやって公開するの?

こんな疑問を解消するために今回はConoHa WINGでWebサイトを公開する方法っていうのをやっていこうと思います。ConoHa WINGでWebサイトを公開したい方は参考にしてみてください。

記事の内容
  • ConoHa WINGでHTML・CSS・JavaScriptで作ったサイトを公開する方法
  • ConoHa WINGでReactで作ったサイトを公開する方法
  • ConoHa WINGでVueで作ったサイトを公開する方法

 ワードプレスサイトを公開したい場合

ConoHa WINGでワードプレスを使ってサイト公開をする方法は以下の記事を参考にしてみてください。ConoHa WINGのWordPressかんたんセットアップを使ったワードプレスサイトの作り方を以下でやっていますよ。

通常料金ならかなり安く試せる
ConoHa WINGの通常料金プランは初期費用なし・最低利用期間なし・時間当たりの従量課金制で1時間2.2円~というかなりの安さで使うことができます。
ちょっと試してみたかったら通常料金プランでいきましょう。
ConoHa WINGでサイト公開していこう

使用するConoHa WINGのプランはベーシックプラン

今回試すConoHa WINGの契約しているプランはWINGパックの一番安いベーシックプランです。一番安いもので十分。

ConoHaWINGは初期費用がかからないのが良いですね。WINGパックだと3ヶ月が最低利用期間になります。

ConoHa WINGにWebサイトを公開する手順

手順
  1. 独自ドメインをConoHa WINGに追加する
  2. FTPソフトでConoHa WINGに接続
  3. ローカルにあるWebサイトのファイルたちをアップロード

    手順としてはConoHa WINGに接続してWebサイトのファイルたちを独自ドメインのフォルダにアップロードするだけだから簡単です。ただいきなりアップロードしても意味不明なので、ドキュメントルートやアップロードするWebサイトを確認します。

    アップロードする前にドキュメントルートやアップロードするWebサイトを確認しよう

     独自ドメインをConoHa WINGに追加していない場合

    Webサイトを公開するドメインをConoHa WINGに追加していない場合は、以下の記事などを参考にして追加してみるといいです。

    自分はお名前.comよく使いますよ

    ConoHa WINGでもドメインは管理画面から購入することができるから、管理画面でドメインの項目を見てみるといいですね。

    ConoHa WINGからWebサイトのドキュメントルートを確認しよう

    まずはConoHa WINGがどのファイルをドキュメントルートにするのかを確認する。

    ドキュメントルートに設置するファイルにつきましては、以下の優先順位で表示されます。

    1. index.html
    2. index.htm
    3. index.shtml
    4. index.cgi
    5. index.php

    Webサイト設定について

    これらのファイルが起点になるから、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ソフトを使ってやりたいと思います。

    SFTP接続したいので、認証鍵をまずは作るよ

    SSH接続する

    SSH鍵をConoHaWINGから取得しないといけないので、管理画面から取得しましょう。[SSH→SSH Key→保存]でキーをダウンロードすることができる。

    ダウンロードボタンを押せばキーをダウンロードすることができる。SSH接続で使う情報はKeyを作成すると見ることができる。

    これらのホスト名やポート番号、ユーザー名を使ってSSH接続してみよう。

    $ chmod 400 ダウンロードした秘密鍵のパス
    $ ssh ユーザー名@ホスト名 -p ポート番号 -i ダウンロードした秘密鍵のパス

    これで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配下に生成されますね。

    サイトにアクセスしてみると見れました。

     

    ConoHaWINGでサイトを公開するには

    ConoHaWINGでサイトを公開するには、public_html配下のドメイン名のフォルダにファイルたちを配置すればOKです。

    結構簡単にできるからConoHa WINGを使ってレンタルサーバーでサイトを公開するのもありかもしれませんね。

    ConoHa WING料金安いし管理画面も見やすくて良いよ

     ConoHa WINGは初心者におすすめの分かりやすいレンタルサーバー

    ConoHa WINGは管理画面が分かりやすく使いやすいです。今まで以下のレンタルサーバーを使ってきたけど、ConoHa WINGの管理画面の優しさは一番。

    使ったきたレンタルサーバー
    • エックスサーバー
    • mixhost
    • カラフルボックス
    • ロリポップ!
    • さくらのレンタルサーバ
    • バリューサーバー
    • コアサーバー

    ワードプレスでも自作のWebサイトでも公開したい人はConoHa WING使ってみるといいですよ。