Svelteで作成したSPAアプリをWordPressテーマ化して無料レンタルサーバーで試す③〜XREA編


2022/07/13
2022/08/19
Svelteで作成したSPAアプリをWordPressテーマ化してWordPress無料レンタルサーバーで試す②〜StarServerFree編
Svelteで作成したSPAアプリをWordPress無料レンタルサーバーで試す③〜XREA編

自作のWordPressテーマが快適に動かせる著者理想のWordPressウェブサイト構築環境を求め、無償WordPressレンタルサーバープランを使ってみる話の第三弾です。

前回までの
「スターサーバーフリー」編は以下のリンク記事をご参考ください。

合同会社タコスキングダム|蛸壺の技術ブログ
Svelteで作成したSPAアプリをWordPressテーマ化してWordPress無料レンタルサーバーで試す②〜StarServerFree編

Svelteで自作したWordPressテーマを『スターサーバー』の無料レンタルプランで試す手順についてまとめます。

今回はGMOの試供する無償レンタルサーバープランの
「XREA Free(エクスリア フリー)」を使ったWordPressウェブサイトを作ってみます。


合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート】Javascript&Typescriptプログラミング入門のためのオススメ書籍&教材特集

XREA Free WordPress機能プラン

XREA by GMOのサイトから引用した無償プランとその上位の有償プラントの大まかな比較を見てみます。

XREAが提供するレンタルサーバーの特徴として、無償とはいえサーバー機ハードウェア的なスペックは、有償プランと同等の物が用意されているようです。

合同会社タコスキングダム|蛸壺の技術ブログ

スペック的には違いはないようですが、サーバーが使えるボリューム総量は1GBと少し少なめです。

また日割りで転送量に制限があることもXREAの特徴のひとつです。

他社の無料レンタルサーバープランと一番の違いは、独自SSLが基本機能として利用できることがXREA FREEの大きな魅力となっています。

また、XREA側からの広告は自動でウェブサイトに貼られるのは仕方がないようですが、無料なのにユーザーの商用利用も可能な点も、商用では使えない他社のサービスと比べて使い勝手が良い点です。

またXREAの上位レンタルサーバー・サービスにあたる
「CoreServer(コアサーバー)」への完全移行も見据えているのならば、元からXREAの有料プランのほうでWordPressウェブサイトを作っておいても良さそうです。

ちなみに、このコアサーバーのスペックとして、
64コア128スレッドの最新CPU・AMD EPYC1TBの大容量メモリを搭載したサーバー機が使えるようです。

サーバーがこれほどの処理速度を有するのなら、仮にサーバーサイドレンダリングなどのサーバー側に負荷のかかる処理を行わせても、全くものともしない異次元の通信速度が実現する気がします。

コアサーバーに関しては、まだその実力を正しく評価できるほど処理を必要とするアプリケーションを作成していないので、今後ウェブサイトのレンダリング速度が必要になることがあれば、実際のパフォーマンスも評価してみたいところです。

兎にも角にも、初心者であればWordPressの扱いに慣れるのが最優先です。

前置きはこの辺にしておいて、以降で無償版のXREA FREEでWordPressの学習を進めていきます。


合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート】Javascript&Typescriptプログラミング入門のためのオススメ書籍&教材特集

バリュードメインの会員を登録を行う

サーバーを利用するには、まずはなんと言っても利用者登録からのスタートです。XREAの場合、運営するGMOのバリュードメインのユーザー登録が先んじて必要になります。

XREA by GMOのホームページからXREA Freeのプラン表の下にある[無料アカウント作成]ボタンをクリックします。

合同会社タコスキングダム|蛸壺の技術ブログ

後は、バリュードメインのページに遷移して、ユーザーアカウント作成のページに移行するので、そこで
[ユーザー名][パスワード][メールアドレス]を適切に決めて[入力内容の確認]ボタンで決定します。

ユーザーの登録内容の確認後に登録を開始すると、指定したEメールアドレスに6桁の認証コードが届くので、このコードを認証コード入力にコピペして
[認証を行う]をクリックしましょう。

合同会社タコスキングダム|蛸壺の技術ブログ

本人認証が済んだら、ユーザー情報の入力本番フォームに移行することができます。

合同会社タコスキングダム|蛸壺の技術ブログ

必要登録事項を埋めて、内容を良く確認したら、
[ユーザー登録する]ボタンをおして、会員登録作業は完了です。

合同会社タコスキングダム|蛸壺の技術ブログ


合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート】Javascript&Typescriptプログラミング入門のためのオススメ書籍&教材特集

XREA Freeを申し込む

先程までで、バリュードメインユーザーの登録が完了しましたので、再びXREA Freeのページに戻って申し込み作業を再開します。

合同会社タコスキングダム|蛸壺の技術ブログ

ここで、
[XREAアカウントの取得・作成画面はこちら]をクリックすると、ユーザー登録が済んでいるのでバリュードメインのコントロールパネル画面に入ることができます。

合同会社タコスキングダム|蛸壺の技術ブログ

見ての通りレンタルサーバーを利用することになるので、この場合どうしてもSMS認証が必要になるようです(※事情があってSMSが利用できない場合には、お問合せで事情を説明して登録もできるようです)。

まずは、SMS認証を有効にさせます。

合同会社タコスキングダム|蛸壺の技術ブログ

この状態になれば、後はXREA Freeを申し込むだけです。

バリュードメインのコントロールパネル画面の左側メニューから
[サーバー] > [XREA]のページに進み、XREAの管理・購入の項目にある[XREAの新規アカウントを作成]をクリックしましょう。

合同会社タコスキングダム|蛸壺の技術ブログ

次の
XREAのアカウント作成の項目で[XREA(無料)を取得]ボタンがあるので、これをクリックします。

無料で提供されるサーバーの名前(アカウント名)を決めます。

なお、アカウント名以降の
@....の部分は空きのあるサーバーのどれか一つが選択されるので、サーバーの候補が複数あってもスペック的には全て同じです。

合同会社タコスキングダム|蛸壺の技術ブログ

また、1年間無料で使える固定ドメイン(.comは固定)も併せて取得できます。

このブログ記事ではバックアップ機能は使いませんが、データの管理を自前で行わないなど、消えてしまったときの対策に不安がある場合には、有料のデータバックアップ機能も検討してください。

後は所々の細かい項目に同意して、
[登録]ボタンをクリックすると、XREA Freeのレンタルサーバーが作成されます。

無料で貰えた.comドメインの注意点

著者個人の見解としては、XREA Freeの登録時に漏れなく貰える固定ドメインは、初心者練習用の捨てドメインのように捉えています。

ウェブサイト運用を始めたての初心者からすると、「最初にドメインが無料で貰えたから、このドメインはこれからずっと無料で使えるのだろう」とうっかりしていると、2年目以降、知らぬ間に凄い額を請求される可能もあります。

合同会社タコスキングダム|蛸壺の技術ブログ
【キャンセル&返金不可】 お名前.comでのドメイン自動更新かつ15日前に完了されてしまう問題

お名前.comで取得したドメインを解約前に注意すべき契約事項について解説します。

.comドメインの場合、2年目以降の更新料はどのレジストラも
1,100〜1,500円/年の範囲ですが、プレミアムなドメイン名なら、数万円/年のものも結構存在します。

ということで、主要なレジストラに限らず、AWSのようなクラウドの従量課金サービスを使う上で、
「自動更新」の設定を事前に良く把握しておく必要があります。

バリュードメインでいうと、コントロールパネルから
[支払い] > [ドメイン・サーバーの自動更新・延長設定]のページから自動更新の設定を確認することができます。

合同会社タコスキングダム|蛸壺の技術ブログ

もしも継続的に利用するつもりが無い場合、
自動更新するになってしまっていないか、しっかりと確認しておきましょう。


合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート】Javascript&Typescriptプログラミング入門のためのオススメ書籍&教材特集

XREA FreeにWordPressをインストールする

デフォルトではXREA FreeにはWordPressがインストールされていません。

まずは
バリュードメインのコントロールパネルから[サーバー] > [XREA]のページから稼働しているサーバー一覧にある[新コントロールパネル]をクリックします。

合同会社タコスキングダム|蛸壺の技術ブログ

すると、XREAサーバー内の管理ダッシュボードに遷移することができます。

合同会社タコスキングダム|蛸壺の技術ブログ

この管理ダッシュボードより、
[サイト設定] > [ツール/セキュリティ] > CMSインストールと辿ると、WordPressのインストールオプションがあります。

合同会社タコスキングダム|蛸壺の技術ブログ

クリックするとインストールが開始されます。

WordPress以外のCMSも選択インストール可能ですが、他のプログラムは使う予定はないので、インストールパスをルートフォルダに指定します。

また、WordPressが反映されるドメインもサブドメインだけに限定することもできますが、サブドメインでの利用は考慮していないので、トップドメインでWordPressウェブサイトが反映されるようにします。

合同会社タコスキングダム|蛸壺の技術ブログ

試しにこの状態で
http://<ドメイン名>でブラウザからURLにアクセスすると、WordPressの初期設定画面が現れます。

合同会社タコスキングダム|蛸壺の技術ブログ

となるので、
[さあ、始めましょう!]ボタンで次にいきたいところですが、XREAの場合、WordPressが使うMySQLデータベースが自動では生成してくれません。

この仕様が初心者にはとっつきにくいかも知れませんが、この画面で一旦作業を保留しておいて、先にMySQLデータベースを作成します。

MySQLデータベースのインスタンスを生成する

では手動でWordPress用のデータベースを作成します。

XREAのダッシュボードから、
[データベース] > [MySQL]でMySQLのデータベースを表示します。

当然、最初はデータベースも何もない状態です。

合同会社タコスキングダム|蛸壺の技術ブログ

そこから
[データベースを新規作成]ボタンをクリックすると、データベースの設定メニューが表示されます。

XREA Freeプランでは、データベース名はサーバー名と同じにしか設定できません。

なので、DBのアクセスパスワードとエンコードを決めて、
[データベースを新規作成する]をクリックすると、空のデータベースが作成されます。

データベースが出来たので、先程保留しておいた
[さあ、始めましょう!]ボタンより先に進みます。

合同会社タコスキングダム|蛸壺の技術ブログ

WordPressの使うデータベースに先程のデータベースを指定します(XREA Freeではデータベース名とユーザー名が同じ)。

パスワードもデータベースで先程決めたものを入力しましょう。

データベースのホスト名とプレフィックスはデフォルトのままでも良いでしょう。

[送信]ボタンを押すと、WordPressと通信可能なMySQLデータベースが用意出来ました。

WordPressのインストールを完了させる

他のレンタルサーバーの無料プランと比べて、MySQLデータベースが手動で用意するのは割と面倒ですが、無料で高機能なサーバーを提供頂いているのでそこは慣れるしかないかも知れません。

ウェブページにアクセスすると、今度こそ正真正銘のWordPressのインストールが出来るようになっています。

合同会社タコスキングダム|蛸壺の技術ブログ

ここはいつもの手順でWordPressのユーザー名、パスワード等を決めて、インストールを実行すると、WordPressウェブサイトの構築が完了です。

WordPressがインストール実行して暫くしてから、
http://tacokin05.com/にアクセスすると、確かにXREA FreeでWordPressページが立ち上がっています。

合同会社タコスキングダム|蛸壺の技術ブログ


合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート】Javascript&Typescriptプログラミング入門のためのオススメ書籍&教材特集

Svelteで作成したSPAをWordPressウェブページに移植する

では最後の一仕上げです。

とはいえ既にレンタルサーバーにWordPressがインストールされているので、
前回のブログ記事で扱ったように、全く同一の手順でSvelteから拡張したWordPressテーマをローカル環境からリモートサーバーへ送り出すことになります。

ということで、自作テーマのアップロードの手順の詳細は以前の記事の内容をご覧ください。

合同会社タコスキングダム|蛸壺の技術ブログ
Svelteで作成したSPAアプリをWordPressテーマ化してWordPress無料レンタルサーバーで試す①〜XFree編

Svelteで自作したWordPressテーマを『XFree』の無料レンタルサーバープランで試します。

当然のことながら、WordPressのバージョンが同じなら表示される結果に全く違いはありません。

合同会社タコスキングダム|蛸壺の技術ブログ

Svelteで作成したHTMLゲームがエラーを吐くこと無く動作していたら、ようやく今回の目的が達成されました。めでたしめでたし。

Lighthouseでザックリとパフォーマンス計測

無料レンタルサーバーで立てたWordPressサイトのパフォーマンスが現状でいかほどのものなのかLighthouseで簡単に計測しておきましょう。

合同会社タコスキングダム|蛸壺の技術ブログ

期待とは裏腹に、前回のスターサーバーフリーよりパフォーマンスが悪い...といった結果になりました。

アップロードしたテーマ(SPAアプリケーション)のサイズもほぼ空に近い軽量サイズですが、パフォーマンススコアが既に95なので、あまりスペック的な余裕が感じられない...。

パフォーマンススコアの詳細も確認すると、

合同会社タコスキングダム|蛸壺の技術ブログ

ページ全体の読み込み時間で
Speed Indexが2.1sとなり、他の試したフリープランと比較しても、オーバーヘッド時間にそれなりのロスが出ているようです。

他方で、
First Contentful Paintが0.4sがフリープランとは思えないほど速いため、初速は良いのに、最終的なページ読み込みまでにとても手間取っていることも分かります。

憶測ですが、必ず先頭に来るように配置される広告バーナーを表示するスクリプトの処理が重いのかな、と考えています。

有償プランにしたら、余計なリソースのコストがなくなり、現状より圧倒的に速くなるのでしょうが、もう少しSPAアプリの完成度を高くした後にでももう一度パフォーマンス計測してみたいところです。


合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート】Javascript&Typescriptプログラミング入門のためのオススメ書籍&教材特集

まとめ

今回はWordPressウェブサイトをJSフレームワークで作成したHTMLアプリケーションとして動かす方法をXREAの無償プラン・「XREA Free」でやってみました。

XREAのレンタルサーバーは他のレンタルサーバーサービスと比べて、若干WordPressのインストールまでの手順が複雑な面を感じましたが、WordPress入門を終え、中級者くらいからある程度サーバーの仕組みが分かってくるとカスタマイズしやすいのかも知れません。

今回はほぼ中身のないSPAアプリで試しましたが、まだサーバー側へのディスク容量にも余裕があるので、もう少し複雑なゲームアプリでも問題なく動作しそうです。

HTMLゲームは一般的に、JSファイルなどのリソースをクライアント側にダウンロードさせて、ブラウザで駆動させるタイプのアプリケーションです。

ユーザーによってゲームがサクサクに動くか、重い挙動になってしまうか、バランスの取りようが難しいですが、どうしても重くなってしまうようなら、軽量なアルゴリズムを導入できるか検討してみたり、Web Worker APIを使って処理負荷を分散するような処置が必要になるかも知れません。