カテゴリー
Svelteで作成したSPAアプリをWordPressテーマ化して無料レンタルサーバーで試す③〜XREA編
※ 当ページには【広告/PR】を含む場合があります。
2022/07/13
2022/08/19
自作のWordPressテーマが快適に動かせる著者理想のWordPressウェブサイト構築環境を求め、無償WordPressレンタルサーバープランを使ってみる話の第三弾です。
前回までの
今回はGMOの試供する無償レンタルサーバープランの
XREA Free WordPress機能プラン
「
XREAが提供するレンタルサーバーの特徴として、無償とはいえサーバー機ハードウェア的なスペックは、有償プランと同等の物が用意されているようです。
スペック的には違いはないようですが、サーバーが使えるボリューム総量は1GBと少し少なめです。
また日割りで転送量に制限があることもXREAの特徴のひとつです。
他社の無料レンタルサーバープランと一番の違いは、独自SSLが基本機能として利用できることがXREA FREEの大きな魅力となっています。
また、XREA側からの広告は自動でウェブサイトに貼られるのは仕方がないようですが、無料なのにユーザーの商用利用も可能な点も、商用では使えない他社のサービスと比べて使い勝手が良い点です。
☆無料から使えるレンタルサーバー☆
またXREAの上位レンタルサーバー・サービスにあたる「
ちなみに、このコアサーバーのスペックとして、
サーバーがこれほどの処理速度を有するのなら、仮にサーバーサイドレンダリングなどのサーバー側に負荷のかかる処理を行わせても、全くものともしない異次元の通信速度が実現する気がします。
☆次世代の高速・高安定・高機能レンタルサーバー☆
コアサーバーに関しては、まだその実力を正しく評価できるほど処理を必要とするアプリケーションを作成していないので、今後ウェブサイトのレンダリング速度が必要になることがあれば、実際のパフォーマンスも評価してみたいところです。
兎にも角にも、初心者であればWordPressの扱いに慣れるのが最優先です。
前置きはこの辺にしておいて、以降で無償版のXREA FREEでWordPressの学習を進めていきます。
バリュードメインの会員を登録を行う
サーバーを利用するには、まずはなんと言っても利用者登録からのスタートです。 XREAの場合、運営するGMOのバリュードメインのユーザー登録が先んじて必要になります。
[無料アカウント作成]
後は、バリュードメインのページに遷移して、ユーザーアカウント作成のページに移行するので、そこで
[ユーザー名][パスワード][メールアドレス][入力内容の確認]ユーザーの登録内容の確認後に登録を開始すると、指定したEメールアドレスに６桁の認証コードが届くので、このコードを認証コード入力にコピペして
[認証を行う]
本人認証が済んだら、ユーザー情報の入力本番フォームに移行することができます。
必要登録事項を埋めて、内容を良く確認したら、
[ユーザー登録する]
☆無料から使えるレンタルサーバー☆
XREA Freeを申し込む
先程までで、バリュードメインユーザーの登録が完了しましたので、再び
ここで、
[XREAアカウントの取得・作成画面はこちら]
見ての通りレンタルサーバーを利用することになるので、この場合どうしてもSMS認証が必要になるようです(※事情があってSMSが利用できない場合には、お問合せで事情を説明して登録もできるようです)。
まずは、SMS認証を有効にさせます。
この状態になれば、後はXREA Freeを申し込むだけです。
バリュードメインのコントロールパネル画面の左側メニューから
[サーバー] > [XREA]XREAの管理・購入[XREAの新規アカウントを作成]
次の
XREAのアカウント作成[XREA(無料)を取得]無料で提供されるサーバーの名前(アカウント名)を決めます。
なお、アカウント名以降の
@....
また、１年間無料で使える固定ドメイン(.comは固定)も併せて取得できます。
このブログ記事ではバックアップ機能は使いませんが、データの管理を自前で行わないなど、消えてしまったときの対策に不安がある場合には、有料のデータバックアップ機能も検討してください。
後は所々の細かい項目に同意して、
[登録]無料で貰えた.comドメインの注意点
著者個人の見解としては、
ウェブサイト運用を始めたての初心者からすると、「最初にドメインが無料で貰えたから、このドメインはこれからずっと無料で使えるのだろう」とうっかりしていると、２年目以降、知らぬ間に凄い額を請求される可能もあります。
.comドメインの場合、２年目以降の更新料はどのレジストラも
ということで、主要なレジストラに限らず、AWSのようなクラウドの従量課金サービスを使う上で、
バリュードメインでいうと、コントロールパネルから
[支払い] > [ドメイン・サーバーの自動更新・延長設定]
もしも継続的に利用するつもりが無い場合、
自動更新する☆無料から使えるレンタルサーバー☆
XREA FreeにWordPressをインストールする
デフォルトでは
まずは
[サーバー] > [XREA][新コントロールパネル]
すると、XREAサーバー内の管理ダッシュボードに遷移することができます。
この管理ダッシュボードより、
[サイト設定] > [ツール/セキュリティ] > CMSインストール
クリックするとインストールが開始されます。
WordPress以外のCMSも選択インストール可能ですが、他のプログラムは使う予定はないので、インストールパスをルートフォルダに指定します。
また、WordPressが反映されるドメインもサブドメインだけに限定することもできますが、サブドメインでの利用は考慮していないので、トップドメインでWordPressウェブサイトが反映されるようにします。
試しにこの状態で
http://<ドメイン名>
となるので、
[さあ、始めましょう！]この仕様が初心者にはとっつきにくいかも知れませんが、この画面で一旦作業を保留しておいて、先にMySQLデータベースを作成します。
MySQLデータベースのインスタンスを生成する
では手動でWordPress用のデータベースを作成します。
XREAのダッシュボードから、
[データベース] > [MySQL]当然、最初はデータベースも何もない状態です。
そこから
[データベースを新規作成]XREA Freeプランでは、データベース名はサーバー名と同じにしか設定できません。
なので、DBのアクセスパスワードとエンコードを決めて、
[データベースを新規作成する]データベースが出来たので、先程保留しておいた
[さあ、始めましょう！]
WordPressの使うデータベースに先程のデータベースを指定します(XREA Freeではデータベース名とユーザー名が同じ)。
パスワードもデータベースで先程決めたものを入力しましょう。
データベースのホスト名とプレフィックスはデフォルトのままでも良いでしょう。
[送信]WordPressのインストールを完了させる
ウェブページにアクセスすると、今度こそ正真正銘のWordPressのインストールが出来るようになっています。
ここはいつもの手順でWordPressのユーザー名、パスワード等を決めて、インストールを実行すると、WordPressウェブサイトの構築が完了です。
WordPressがインストール実行して暫くしてから、
☆無料から使えるレンタルサーバー☆
Svelteで作成したSPAをWordPressウェブページに移植する
では最後の一仕上げです。
とはいえ既にレンタルサーバーにWordPressがインストールされているので、
ということで、自作テーマのアップロードの手順の詳細は以前の記事の内容をご覧ください。
当然のことながら、WordPressのバージョンが同じなら表示される結果に全く違いはありません。
Svelteで作成したHTMLゲームがエラーを吐くこと無く動作していたら、ようやく今回の目的が達成されました。 めでたしめでたし。
Lighthouseでザックリとパフォーマンス計測
無料レンタルサーバー・
期待とは裏腹に、前回のスターサーバーフリーよりパフォーマンスが悪い...といった結果になりました。
アップロードしたテーマ(SPAアプリケーション)のサイズもほぼ空に近い軽量サイズですが、パフォーマンススコアが既に95なので、あまりスペック的な余裕が感じられない...。
パフォーマンススコアの詳細も確認すると、
ページ全体の読み込み時間で
他方で、
憶測ですが、必ず先頭に来るように配置される広告バーナーを表示するスクリプトの処理が重いのかな、と考えています。
有償プランにしたら、余計なリソースのコストがなくなり、現状より圧倒的に速くなるのでしょうが、もう少しSPAアプリの完成度を高くした後にでももう一度パフォーマンス計測してみたいところです。
☆無料から使えるレンタルサーバー☆
まとめ
今回はWordPressウェブサイトをJSフレームワークで作成したHTMLアプリケーションとして動かす方法をXREAの無償プラン・「
XREAのレンタルサーバーは他のレンタルサーバーサービスと比べて、若干WordPressのインストールまでの手順が複雑な面を感じましたが、WordPress入門を終え、中級者くらいからある程度サーバーの仕組みが分かってくるとカスタマイズしやすいのかも知れません。
今回はほぼ中身のないSPAアプリで試しましたが、まだサーバー側へのディスク容量にも余裕があるので、もう少し複雑なゲームアプリでも問題なく動作しそうです。
HTMLゲームは一般的に、JSファイルなどのリソースをクライアント側にダウンロードさせて、ブラウザで駆動させるタイプのアプリケーションです。
ユーザーによってゲームがサクサクに動くか、重い挙動になってしまうか、バランスの取りようが難しいですが、どうしても重くなってしまうようなら、軽量なアルゴリズムを導入できるか検討してみたり、Web Worker APIを使って処理負荷を分散するような処置が必要になるかも知れません。
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー