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

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

HTML・CSS・JavaScriptで作ったサイトとReact・Vueで作ったサイトをConoHa WINGで公開してみます。

ConoHa WINGのプラン

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

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

ConoHa WINGのドキュメントルートを確認しよう

まずは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。

FTPソフトでConoHa WINGにファイル群をアップロードする

作成したサイトのファイルたちをconoha WINGにアップロードしていきたいんだけど、SSH接続設定をしてからFTPソフトを使ってやりたいと思います。

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の場合も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です。

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