※ 当ページには【広告/PR】を含む場合があります。
2022/07/13
2022/08/19
Svelteで作成したSPAアプリをWordPressテーマ化してWordPress無料レンタルサーバーで試す②〜StarServerFree編
Svelteで作成したSPAアプリをWordPressテーマ化してWordPress無料レンタルサーバーで試す②〜StarServerFree編Svelteで自作したWordPressテーマを『スターサーバー』の無料レンタルプランで試す手順についてまとめます。
Javascript(js)＆Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍＆教材の手引き
XREA Free WordPress機能プラン
「」のサイトから引用した無償プランとその上位の有償プラントの大まかな比較を見てみます。XREAが提供するレンタルサーバーの特徴として、無償とはいえサーバー機ハードウェア的なスペックは、有償プランと同等の物が用意されているようです。スペック的には違いはないようですが、サーバーが使えるボリューム総量は1GBと少し少なめです。また日割りで転送量に制限があることもXREAの特徴のひとつです。他社の無料レンタルサーバープランと一番の違いは、独自SSLが基本機能として利用できることがXREA FREEの大きな魅力となっています。また、XREA側からの広告は自動でウェブサイトに貼られるのは仕方がないようですが、無料なのにユーザーの商用利用も可能な点も、商用では使えない他社のサービスと比べて使い勝手が良い点です。またXREAの上位レンタルサーバー・サービスにあたる「」への完全移行も見据えているのならば、元からXREAの有料プランのほうでWordPressウェブサイトを作っておいても良さそうです。ちなみに、このコアサーバーのスペックとして、64コア128スレッドの最新CPU・AMD EPYCと1TBの大容量メモリを搭載したサーバー機が使えるようです。サーバーがこれほどの処理速度を有するのなら、仮にサーバーサイドレンダリングなどのサーバー側に負荷のかかる処理を行わせても、全くものともしない異次元の通信速度が実現する気がします。コアサーバーに関しては、まだその実力を正しく評価できるほど処理を必要とするアプリケーションを作成していないので、今後ウェブサイトのレンダリング速度が必要になることがあれば、実際のパフォーマンスも評価してみたいところです。兎にも角にも、初心者であればWordPressの扱いに慣れるのが最優先です。前置きはこの辺にしておいて、以降で無償版のXREA FREEでWordPressの学習を進めていきます。
Javascript(js)＆Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍＆教材の手引き
バリュードメインの会員を登録を行う
サーバーを利用するには、まずはなんと言っても利用者登録からのスタートです。XREAの場合、運営するGMOのバリュードメインのユーザー登録が先んじて必要になります。のホームページからXREA Freeのプラン表の下にある[無料アカウント作成]ボタンをクリックします。後は、バリュードメインのページに遷移して、ユーザーアカウント作成のページに移行するので、そこで[ユーザー名]、[パスワード]、[メールアドレス]を適切に決めて[入力内容の確認]ボタンで決定します。ユーザーの登録内容の確認後に登録を開始すると、指定したEメールアドレスに６桁の認証コードが届くので、このコードを認証コード入力にコピペして[認証を行う]をクリックしましょう。本人認証が済んだら、ユーザー情報の入力本番フォームに移行することができます。必要登録事項を埋めて、内容を良く確認したら、[ユーザー登録する]ボタンをおして、会員登録作業は完了です。
Javascript(js)＆Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍＆教材の手引き
XREA Freeを申し込む
先程までで、バリュードメインユーザーの登録が完了しましたので、再びのページに戻って申し込み作業を再開します。ここで、[XREAアカウントの取得・作成画面はこちら]をクリックすると、ユーザー登録が済んでいるのでバリュードメインのコントロールパネル画面に入ることができます。見ての通りレンタルサーバーを利用することになるので、この場合どうしてもSMS認証が必要になるようです(※事情があってSMSが利用できない場合には、お問合せで事情を説明して登録もできるようです)。まずは、SMS認証を有効にさせます。この状態になれば、後はXREA Freeを申し込むだけです。バリュードメインのコントロールパネル画面の左側メニューから[サーバー] > [XREA]のページに進み、XREAの管理・購入の項目にある[XREAの新規アカウントを作成]をクリックしましょう。次のXREAのアカウント作成の項目で[XREA(無料)を取得]ボタンがあるので、これをクリックします。無料で提供されるサーバーの名前(アカウント名)を決めます。なお、アカウント名以降の@....の部分は空きのあるサーバーのどれか一つが選択されるので、サーバーの候補が複数あってもスペック的には全て同じです。また、１年間無料で使える固定ドメイン(.comは固定)も併せて取得できます。このブログ記事ではバックアップ機能は使いませんが、データの管理を自前で行わないなど、消えてしまったときの対策に不安がある場合には、有料のデータバックアップ機能も検討してください。後は所々の細かい項目に同意して、[登録]ボタンをクリックすると、XREA Freeのレンタルサーバーが作成されます。無料で貰えた.comドメインの注意点
著者個人の見解としては、の登録時に漏れなく貰える固定ドメインは、初心者練習用の捨てドメインのように捉えています。ウェブサイト運用を始めたての初心者からすると、「最初にドメインが無料で貰えたから、このドメインはこれからずっと無料で使えるのだろう」とうっかりしていると、２年目以降、知らぬ間に凄い額を請求される可能もあります。【キャンセル&返金不可】 お名前.comでのドメイン自動更新かつ15日前に完了されてしまう問題お名前.comで取得したドメインを解約前に注意すべき契約事項について解説します。
[支払い] > [ドメイン・サーバーの自動更新・延長設定]のページから自動更新の設定を確認することができます。もしも継続的に利用するつもりが無い場合、自動更新するになってしまっていないか、しっかりと確認しておきましょう。
Javascript(js)＆Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍＆教材の手引き
XREA FreeにWordPressをインストールする
デフォルトではには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(js)＆Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍＆教材の手引き
Svelteで作成したSPAをWordPressウェブページに移植する
では最後の一仕上げです。とはいえ既にレンタルサーバーにWordPressがインストールされているので、前回のブログ記事で扱ったように、全く同一の手順でSvelteから拡張したWordPressテーマをローカル環境からリモートサーバーへ送り出すことになります。ということで、自作テーマのアップロードの手順の詳細は以前の記事の内容をご覧ください。Svelteで作成したSPAアプリをWordPressテーマ化してWordPress無料レンタルサーバーで試す①〜XFree編Svelteで自作したWordPressテーマを『XFree』の無料レンタルサーバープランで試します。
Lighthouseでザックリとパフォーマンス計測
無料レンタルサーバー・で立てたWordPressサイトのパフォーマンスが現状でいかほどのものなのかLighthouseで簡単に計測しておきましょう。期待とは裏腹に、前回のスターサーバーフリーよりパフォーマンスが悪い...といった結果になりました。アップロードしたテーマ(SPAアプリケーション)のサイズもほぼ空に近い軽量サイズですが、パフォーマンススコアが既に95なので、あまりスペック的な余裕が感じられない...。パフォーマンススコアの詳細も確認すると、ページ全体の読み込み時間でSpeed Indexが2.1sとなり、他の試したフリープランと比較しても、オーバーヘッド時間にそれなりのロスが出ているようです。他方で、First Contentful Paintが0.4sがフリープランとは思えないほど速いため、初速は良いのに、最終的なページ読み込みまでにとても手間取っていることも分かります。憶測ですが、必ず先頭に来るように配置される広告バーナーを表示するスクリプトの処理が重いのかな、と考えています。有償プランにしたら、余計なリソースのコストがなくなり、現状より圧倒的に速くなるのでしょうが、もう少しSPAアプリの完成度を高くした後にでももう一度パフォーマンス計測してみたいところです。
Javascript(js)＆Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍＆教材の手引き
まとめ
今回はWordPressウェブサイトをJSフレームワークで作成したHTMLアプリケーションとして動かす方法をXREAの無償プラン・「」でやってみました。XREAのレンタルサーバーは他のレンタルサーバーサービスと比べて、若干WordPressのインストールまでの手順が複雑な面を感じましたが、WordPress入門を終え、中級者くらいからある程度サーバーの仕組みが分かってくるとカスタマイズしやすいのかも知れません。今回はほぼ中身のないSPAアプリで試しましたが、まだサーバー側へのディスク容量にも余裕があるので、もう少し複雑なゲームアプリでも問題なく動作しそうです。HTMLゲームは一般的に、JSファイルなどのリソースをクライアント側にダウンロードさせて、ブラウザで駆動させるタイプのアプリケーションです。ユーザーによってゲームがサクサクに動くか、重い挙動になってしまうか、バランスの取りようが難しいですが、どうしても重くなってしまうようなら、軽量なアルゴリズムを導入できるか検討してみたり、Web Worker APIを使って処理負荷を分散するような処置が必要になるかも知れません。
