カテゴリー
Svelteで作成したSPAアプリをWordPressテーマ化してWordPress無料レンタルサーバーで試す②〜StarServerFree編
※ 当ページには【広告/PR】を含む場合があります。
2022/07/12
2022/08/19
自作のWordPressテーマを、無償WordPressレンタルサーバープランを使ってみる話の第二弾です。
前回までの
今回はStarServerの無償試供版サービスの位置付けの
StarServerFree WordPress機能プラン
この無償レンタルサーバープランがどのようなものか少し掘り下げてみるところから話を初めてみます。
上の図は公式のプラン比較表をそのまま拝借させていただいたものです。
StarServerの本サービスの代表的な商品は、小規模の個人のウェブサイト構築に最適な
☆国内最安級のWordPressサーバー・プラン☆
他にも、「ライト」の低機能版で業界最安クラスの月額138円が売りの
どのプランが適しているかは、WordPressサイトの運用が軌道に乗ってからでも適宜プランの切り替えが可能ですので、追々考えて行ってください。
兎にも角にも、初心者であればWordPressの扱いに慣れるのが最優先です。
ネットオウルの会員を登録を行う
無料レンタルサーバーのプランを申し込む前に事前に、
StarServerのウェブサイト共通で、ページ右上の
[お申し込み]
そこで、
[新規会員登録][認証IDを取得]すると
認証ID
このID値を控えて登録画面の認証ID入力ボックスに貼り付けると、申込情報の入力フォームに移行します。
登録者の個人情報等を入力し、アカウントパスワードなども設定した後で、
[確認画面へ]
見ての通り入力内容を確認して終わりではなく、ここで設定の最大の関門である
今でこそSMS認証が普通な世の中ですが、個人で通話機能付き携帯端末が無ければ、基本的に
THE ENDお問合せ以降はSMSメッセージを受け取れる環境前提で、ネットオウル会員登録を作業を進めます。
SMS認証用の携帯電話番号を入力し、SMSメッセージに届いた５桁の番号を入力すると、会員登録作業が確定されます。
これでネットオウルの会員用ダッシュボードにもログイン可能ですが、会員ダッシュボードからでは無料レンタルサーバーへの登録はできないので、ここで一旦終わりです。
☆国内最安級のWordPressサーバー・プラン☆
StarServerFreeを申し込む
ネットオウルの会員登録が済んだら、再び
サイト内の数カ所に設置されている、
[今すぐ始める]
ログインしている状態であれば、スターサーバーのフリープランが選択できる画面に移行します。
ここで、
[お申込み]デフォルトで選択することのできるのは
starfree.jp
次に進むと、最終確認の画面なります。
様々な機能の制限が無償のレンタルサーバープランに存在していることを十分理解した上で、プランを申し込みます。
もちろん後々有償のプランに移行することは可能ですが、より高性能な有償プランも最初の２週間無料ですので、１年以上はサイトを持続させるつもりなら先に有償プランを試した方が賢明と言えます。
☆国内最安級のWordPressサーバー・プラン☆
無料レンタルサーバープランの申し込みが終わったら、
メンバー管理ツール[契約管理] > [トップ]提供サービス一覧
無料サーバーが稼働中の場合、
メンバー管理ツールスターサーバー管理無料プラン管理
この項目の
[サーバー管理ツール]
スターサーバーを管理画面を使い慣れていないと中々面倒な手順でしたが、さらにここからWordPressプログラム本体をセットアップしてくことになります。
☆国内最安級のWordPressサーバー・プラン☆
StarServerサーバーにWordPressをインストールする
デフォルトではスターサーバーフリーにはWordPressがインストールされていません。
まずは管理ダッシュボードの左ペインから
[ホームページ] > [簡単インストール]初回では
[インストール済み一覧][追加インストール][インストール設定]
インストール設定はデフォルトの値で良いのですが、WordPressのID名とログインパスワードは事前に自分で決めて置く必要があります。
またインストール完了後に、データベース用のユーザー名とパスワードは自動で提供されます。
WordPressをインストール後に暫く待つと、いつものWordPress画面が表示されます。
管理画面へはURLアドレスに
/wp-admin/wp-loginこれで無事WordPress利用可能になりました。
☆国内最安級のWordPressサーバー・プラン☆
Svelteで作成したSPAをWordPressウェブページに移植する
では最後の一仕上げです。
とはいえ既にレンタルサーバーにWordPressがインストールされているので、
ということで、自作テーマのアップロードの手順の詳細は以前の記事の内容をご覧ください。
当然のことながら、WordPressのバージョンが同じなら表示される結果に全く違いはありません。
Svelteで作成したHTMLゲームがエラーを吐くこと無く動作していたら今回の目的が達成されました。 めでたしめでたし。
Lighthouseでザックリとパフォーマンス計測
せっかくですので、無料レンタルサーバーで立てたWordPressサイトのパフォーマンスが現状でいかほどのものなのかLighthouseで簡単に計測しておきましょう。
...予想に反して、
Lighthouseで計測できる指標の内、サーバーのスペックを反映しているものは「パフォーマンス」になります。
アップロードしたアプリケーションのサイズもほぼ空に近い軽量サイズですが、ページの総合パフォーマンスにはまだスペック的な余裕が感じられるほどです。
パフォーマンススコアの詳細も確認すると、
のようになり、ページ全体の読み込み時間は0.6sと、フリープランとは思えないほど高速な通信処理速度が出ているようです。
有償プランにしたらここから更に速くなるのでしょうが、もう少しSPAアプリの完成度を高くした後にでももう一度パフォーマンス計測してみたいところです。
===affi1% ~[ネットオウル株式会社] ~[1] ~{ <a href="https://px.a8.net/svt/ejp?a8mat=3NCQW3+7YDMM2+1WTI+60OXE" rel="nofollow">月額138円(税込)からのクラウド型高速レンタルサーバー、スターサーバー</a>
☆国内最安級のWordPressサーバー・プラン☆
まとめ
今回はWordPressウェブサイトをJSフレームワークで作成したHTMLアプリケーションとして動かす方法をStarServerの無償プラン・「スターサーバーフリー」でやってみました。
HTMLアプリケーションの規模にもよりますが、まだサーバー側へのディスク容量にも余裕があるので、もう少し複雑なゲームアプリが作れそうです。
HTMLゲームは一般的に、JSファイルなどのリソースをクライアント側にダウンロードさせて、ブラウザで駆動させるタイプのアプリケーションです。
ユーザーによってゲームがサクサクに動くか、重い挙動になってしまうか、バランスの取りようが難しいですが、どうしても重くなってしまうようなら、軽量なアルゴリズムを導入できるか検討してみたり、Web Worker APIを使って処理負荷を分散するような処置が必要になるかも知れません。
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー