そんな思いを叶えるべく。今回はConoHa WINGを使ってWebサイトやポートフォリオサイトを公開するっていうことをやっていきたいと思います。どんなサイトを公開するの？っていうところだけで以下のサイトです。
- 静的なWebサイト(HTML・CSS・JavaScript/React/Vue)
- データベースを使ったサイト（Laravel/Flask）
- ワードプレス
ConoHa WINGでサイトを公開したい人やレンタルサーバーを検討している人は参考にしてみてください。
今回ConoHaWINGで使用するプラン
今回ConoHa WINGで使用するプランなんだけど、WINGパックの一番安いベーシックプランです。
| ベーシック | スタンダード | プレミアム | リザーブド | |
|---|---|---|---|---|
| 3ヶ月 | 1210円/月 | 2,530 円/月 | 5,060 円/月 | 1540円/月 |
| 6ヶ月 | 1,100 円/月 | 2,365 円/月 | 4,730 円/月 | 1430円/月 |
| 12ヶ月 | 911 円/月 | 2,145 円/月 | 4,290 円/月 | 1320円/月 |
| 24ヶ月 | 683 円/月 | 2,035 円/月 | 4,070 円/月 | 1265円/月 |
| 36ヶ月 | 493 円/月 | 1,925 円/月 | 3,850 円/月 | 1210円/月 |
ConoHa WING
は他のサイトで使っているんですが、一番安いベーシックプランで十分すぎます。おすすめ。
ConoHaWINGのWINGパックなら独自ドメインが永久無料
上で挙げたConoHa WINGのWINGパックだと独自ドメインが2つまで無料で使うことができる。
WINGパックは、Webサイトを作成するために必要なレンタルサーバーと独自ドメインがセットになったお得なパックです。WINGパックの契約中は、お好きな独自ドメインを2つまで永久無料でご利用いただけます。複数の独自ドメインを取得することで、分野別に特化したWebサイトを並行運用することができます。
これを使わない手はないのでWINGパックを使う場合にはこのドメインを使って公開してしまうのが楽です。
ConoHaWINGに申し込む
契約する際にはConoHa WING
から必要事項を入力して料金を支払えばOKです。WINGパックなら3ヶ月~の利用期間になるから好きな契約期間を選ぼう。
WordPressかんたんセットアップはWordPressですぐにサイトを作りたい！っていう場合には使うと楽です。契約後にワードプレスがインストールされた状態で始めることができます。
WordPressサイトのご利用をサポートする機能です。サーバーのお申し込みと同時に「無料独自ドメイン」「WordPress」「WordPressテーマ」「SSL」をまとめて取得・設定できるほか、既に他社サーバーで利用しているWordPressをConoHa WINGへ移行できます。
WordPressを使わない場合は利用しないにチェックを入れておきましょう。後でもWordPressをインストールすることはできます。ワードプレスを使う場合は以下の記事を参考に進めてみてください。
後は情報を入力していくだけですね。
SMS/電話認証は好きな方を選んで認証しましょう。
支払い方法を入力して申し込めばOKです。
独自ドメイン設定をする
契約すると独自ドメインを設定することができるからドメイン新規取得からドメインを取得しましょう。
自分のサイトを公開したい好きなドメイン名を入力して取得してやればOK。
ConoHa WINGでファイルをアップロードして公開する方法を知る
ConoHaWINGのどこにサイトをアップロードすればいいのか
ConoHaWINGと契約してドメインを取得してもどこにWebサイトのファイルたちをアップロードしたらいいのか分からないですよね。
ConoHaWINGのファイルマネージャーを見てみると、public_html配下に取得したドメイン名のファイルがあります。
このドメイン名のフォルダにファイルを置くとそれが表示されるっていう流れです。ファイル名は以下の優先順位で表示される。
だからサイトを公開したい時には例えばindex.htmlっていうファイルを作って置いて、そのドメインにアクセスすればそれが表示される。
ドメインにアクセスすると表示されます。
ConoHaWINGへのファイルアップロード方法
ConoHa WINGでサイトを公開するためにファイルマネージャーからファイルを作って・・・とかでもできなくはないけど、しんどいのでアップロードする際にはFTPソフトを使ってファイルたちをアップロードしましょう。
まずはSSH接続できるようにします。
SSH接続する
SSH KeyをConoHaWINGから取得しないといけないので、管理画面から取得しましょう。[SSH→SSH Key→保存]でキーをダウンロードすることができる。
ダウンロードボタンを押せばキーをダウンロードすることができる。SSH接続で使う情報はKeyを作成すると見ることができる。
これらのホスト名やポート番号、ユーザー名を使ってSSH接続してみよう。
これでConoHaWINGのサーバー内に入れたらOK。
FTPソフトでファイルたちをアップロードする
SSH接続が可能になったら、SSH接続してWebサイトのファイルたちをConoHaWINGのサーバーにアップロードします。FTPソフトはなんでもいいけど、今回はCyberduckを使ってやりたいと思う。Cyberduckの設定はConoHaのCyberduckの設定に書かれていますね。
せっかく鍵を取得したので鍵を使ってSFTP接続にしてやってみる。
するとConoHaWINGに接続することができました。
このpublic_html配下にドメイン名のフォルダがあるので見てみましょう。ここにWebサイトのファイルたちをアップロードすればConoHaWINGのサーバーに配置されます。
接続が確認できたら、あとは自分が公開したいサイトのファイル群をアップロードしていけばいいだけだからやっていきましょう。
ConoHa WINGでWebサイト・ポートフォリオを公開する
ここではデータベースを使わないフロントだけで完結するサイトをConoHaWINGに公開する方法を書いていきます。
上で書いたようにindex.htmlという名前でHTMLファイルを作ってやれば表示されるから、その中でCSSやJavaScriptを呼び出せばOK。
HTML・CSS・JavaScriptで作ったサイトの場合
HTML・CSS・JavaScriptで作成したサイトの場合。ConoHaWINGに設定したドメインで公開したいサイトを作ります。
ファイル構成はこんな感じ。単純にhtmlとcssとjavascriptだけです。
├── images
│ └── html_css_js.png
├── index.css
├── index.html
└── lib
└── particles.min.js
これをFTPソフトでアップロードしてやればOK。サイトが表示されます。
Reactで作ったサイトの場合
Reactの場合はビルドしたファイルを公開する必要があるからまずはbuildしよう。
buildしたらbuildフォルダはいかにbuidlされたファイルが生成されるから、それをConoHaWINGのサーバーにアップロードする。
ファイルをアップロードして確認してみると表示されました。
ちょっと表示されない部分もあるから何かミスっているけど、Reactで作ったサイトの公開もbuildしたファイル突っ込めばいけます。
Vueで作ったサイトの場合
Vueの場合もReactと同じようにbuildしたファイルをアップロードすればOK。vueの場合はdist配下にbuildされたファイルが生成されます。
サイトにアクセスしてみると見れました。
データベースを使ったポートフォリオサイトを公開する
データベースを使ってサイトを構築したいっていう場合もありますよね。ConoHa WINGではデータベースからデータベースやユーザーを作成することができる。
ここで作成したデータベースに接続してアプリケーションを動かすといったことも一応可能。
Laravelで作成した場合
ConoHaWINGでLaravelアプリケーションを公開するっていうことを以下の記事でやったから、Laravel使いたい人は参考にできる部分は参考にしてみてください。
Flaskで作成した場合
Flaskでやりたい場合は以下の記事にFlaskアプリケーションを公開するっていうことを書いたので、参考にしてみてください。
ConoHa WINGでWordPressサイトを公開したい場合
WordPressかんたんセットアップを使ったワードプレスサイトの構築をこちらの記事でやっているから、ワードプレスをこれから始めたい場合は見てみてください。
ポートフォリオ向きのテーマ・プラグイン
ポートフォリオサイトを作る上で使えそうなテーマやプラグインも紹介しているからよかったらどうぞ。
ドメインのSSL設定をしておこう
ConoHaWINGでドメインを取得したら最初からSSL設定がされていると思うけど、一応確認しておきましょう。
設定するとhttpsに自動でリダイレクトしてくれるからありがたいですね。楽です。
SSLを設定すると自動的にhttpsのURLへリダイレクトされるようになります。お客様自身で.htaccess等でリダイレクト設定するとリダイレクトのループが発生しエラーとなるケースがございます
自動デプロイの設定もしておくとさらに良い
ポートフォリオサイトを作るのなら、おそらく作成したコードはGithubなどで管理しているんじゃないかなと思います。ポートフォリオの変更を加えた後に手動でデプロイするのは面倒なので自動デプロイするように設定しておくといいです。
以下でGithubActionsを使った方法をやっているから、プルリクをマージしたり特定のブランチに変更があったときにデプロイしたい方は参考にしてみるといいかもしれないぞ。
ConoHaWINGでポートフォリオサイトを公開できる
いくつかConoHa WINGを使ってサイトを公開するっていうことをやってみたけど、静的なWebサイトを公開するのはファイル突っ込むだけだから簡単にできますね。何か公開したいものがあればやってみるといいでしょう。
ベーシックプランがおすすめです。
