ConoHa WINGでポートフォリオ・サイトを公開する【静的・動的・ワードプレス】

今回はConoHa WINGを使ってWebサイトやポートフォリオサイトを公開するっていうことをやっていきたいと思います。どんなサイトを公開するの?っていうところだけで以下のサイトです。

  • 静的なWebサイト(HTML・CSS・JavaScript/React/Vue)
  • データベースを使ったサイト(Laravel/Flask)
  • ワードプレス

ConoHa WINGでサイトを公開したい人やレンタルサーバーを検討している人は参考にしてみてください。

今回ConoHaWINGで使用するプラン

今回ConoHa WINGで使用するプランなんだけど、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。

ConoHaWINGのどこにサイトをアップロードすればいいのか

ConoHaWINGと契約してドメインを取得してもどこにWebサイトのファイルたちをアップロードしたらいいのか分からないですよね。ConoHaWINGのファイルマネージャーを見てみると、public_html配下に取得したドメイン名のファイルがあります。

このドメイン名のフォルダにファイルを置くとそれが表示されるっていう流れです。ファイル名は以下の優先順位で表示される。

Web設定について

だからサイトを公開したい時には例えばindex.htmlっていうファイルを作って置いて、そのドメインにアクセスすればそれが表示される

ConoHaWINGへのアップロードはFTPソフトを使おう

ConoHa WINGでサイトを公開するためにファイルマネージャーからファイルを作って・・・とかでもできなくはないけど、しんどいのでFTPソフトを使ってファイルたちをアップロードしましょう。

SSH接続する

SSH Keyを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配下にドメイン名のフォルダがあるので見てみましょう。ここに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
    └── app.js
└── 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アプリケーションを公開するっていうことを書いたので、参考にしてみてください。

WordPressで作成したい場合

WordPressかんたんセットアップを使ったワードプレスサイトの構築をこちらの記事でやっているから、ワードプレスをこれから始めたい場合は見てみてください。

ポートフォリオ向きのテーマ・プラグイン

ポートフォリオサイトを作る上で使えそうなテーマやプラグインも紹介しているからよかったらどうぞ。

SSL設定をしておこう

ConoHaWINGでドメインを取得したら最初からSSL設定がされていると思うけど、一応確認しておきましょう。

設定するとhttpsに自動でリダイレクトしてくれるからありがたいですね。楽です。

SSLを設定すると自動的にhttpsのURLへリダイレクトされるようになります。お客様自身で.htaccess等でリダイレクト設定するとリダイレクトのループが発生しエラーとなるケースがございます

無料独自SSLを設定する

自動デプロイの設定もしておこう

ポートフォリオサイトを作るのなら、おそらく作成したコードはGithubなどで管理しているんじゃないかなと思います。ポートフォリオの変更を加えた後に手動でデプロイするのは面倒なので自動デプロイするように設定しておくといいです。

以下でGithubActionsを使った方法をやっているから、プルリクをマージしたり特定のブランチに変更があったときにデプロイしたい方は参考にしてみるといいかもしれないぞ。

ConoHaWINGでポートフォリオサイトを公開できる

いくつかConoHa WINGを使ってサイトを公開するっていうことをやってみたけど、静的なWebサイトを公開するのはファイル突っ込むだけだから簡単にできますね。何か公開したいものがあればやってみるといいでしょう。