Gridsome(Vue)とFirebaseとWordpressでHPを高速化

updated 2021-7-28
editmeko

Wordpressだけじゃダメなの？

ダメということはないです
プラグインとかAdsenseとか入れた時にPageSpeed Insightsで遅くなるのが気になったからやりました
サイトを作成していて高速化に困っている人に役立つかなと思い、まとめました

PageSpeed Insights

逆にWordpressを無くして他のHeadlessCMSって手もありました。 しかし、Wordpressは記事を作成する上で必要なコンテンツがどっさり搭載されているので記事の作成はWordpressを使うことに。

ちなみにContentfulやStrapiを使ってみたのですが、Wordpressほど手軽さを感じなかったのでやめています
Wordpressの用にサーバーを用意せずに、無料で使えるので試してみるのはありだと思います

Gridsomeとは

簡単にいうと見た目の部分を作るフレームワークです。言語はJavascriptでライブラリのVueを使います。

Gridsome

まだJavascriptのReactで作られたフレームワークのGatsby.jsほどAPIなどそのまま使えるライブラリが出揃っている訳ではなかったのですが、 Vueを使ってみたかったのとSEOの観点で良いというのとWordpressのスターターキットがあるのでGridsomeにしました。

ガワなので使えないってなったらまた置き換えればいい話ですし、個人制作の良いところですね。

Firebaseとは

Hostingサービスと呼ばれる実際にアプリやホームページなど置いておくサーバー１つです。 Github Pagesでも構わないですし、GridsomeだとNetlify推奨のようです。

これは単に使ったことがあるからで、選んでます。学習コスト少なめで始めたい。 まだ開発段階ですが、URLもHostingサービスで変わるので実際使っていく場合は検討してどれか１つに絞った方がいいです。

（Firebaseなら他アプリとつなげて遊べそうだなとかは思っています。）

設定手順

Gridsomeの導入

コマンドラインからインストールしたいフォルダ内で

npm install --global @gridsome/cli

Gridsomeのアプリをwordpressのスターターキットで作成

gridsome create my-gridsome-site wordpress

フォルダに移動して実行

cd my-gridsome-site
gridsome develop

...動かん...!? どうして

gridsome-firebase-wordpress-01

baseURL...Wordpressの置いてあるサーバーのURLですね。 どうやらこれを入れておかないと、記事の情報が得られなくて何も表示されてないようです。(当たり前か)

気を取り直してgridsome developしたらうまくいきました。 ブラウザでURLをlocalhost:8080と入力すると見られます。 とりあえずCSSとかSEOとか何も入ってない状態の記事一覧が取れました。

Firebaseの設定

Firebaseの設定を知ってる人はすっ飛ばして良いところ。 Firebase initしたフォルダ直下に入ってるpublicフォルダにGridsomeでビルドした中身を入れてdeployするだけ。 (Github Pagesならbuildフォルダをdocsに改名してGridsomeのフォルダごとアップするだけ)

やることは３つ

  • FirebaseのCLIを入れる
  • Firebaseの設定をする
  • FirebaseにGridsomeをdeployする

FirebaseのCLIを入れる

npm install -g firebase-tools

npmは既にインストールされている前提

curl -sL firebase.tools | bash

curlでも取れなくはないけどJavascriptを使うならnpmは入れておいた方が良いです。 (yarnでも可)

Firebaseの設定をする

コマンドラインから実行もできるのだけど途中で失敗するのでブラウザからやります。

Firebase

ここでログインしてコンソールが使える状態にまでしておく。 要望などがあれば現状の設定方法などの記事も書きます。

設定できるようになったら新しいプロジェクトの名前とIDを設定して作成。 ダッシュボードが自動的に開くので、開いたら左上の歯車マークから「プロジェクトを設定」を選ぶ

全般のタブの中にGoogle Cloud Platform(GCP)リソースロケーションという項目があるので鉛筆マークを押して設定する。（asia-northease1にすると無難、us-centralでもOK）

firebaseにGridsomeをdeployする

Gridsomeで作成されたmy-gridsome-siteフォルダの外側にもう一個新しいフォルダを作る（ここではsample-web）

sample-webの中で以下のコマンドを実行。

firebase init

そうすると質問がたくさん出てくるので以下のように設定する。 意味が分かる人はカスタムしてもらっても大丈夫です。

  • どのCLIを使う？（Database, Firebase......）Hosting
  • プロジェクトのセットアップ
    • Use an existing project
    • sample-web-(なんかID)(sample-web)
  • Hostingのセットアップ　何も考えずに全部エンターでOK

このままsample-webフォルダの中でfirebase deployするとそのままfirebaseのsample-web-(なんかID).web.appにデプロイされるんですが、今回はGridsomeをデプロイしたいので、

sample-webフォルダの中にmy-gridsome-siteをドラッグ&ドロップでコピー（移動）します。このフォルダの中で作っても良かったんですが、その時はインストールに結構時間がかかったのでこの順番にしました。

firebase.jsonファイルを開いて、

    {
        "hosting": {
            "public": "public",
            "ignore": [
            "firebase.json",
            "**/.*",
            "**/node_modules/**"
            ]
        }
    }

これを

    {
        "hosting": {
            "public": "my-gridsome-site/dist",
            "ignore": [
            "firebase.json",
            "**/.*",
            "**/node_modules/**"
            ]
        }
    }

publicフォルダを変更してあげます。 これでデプロイするフォルダがpublicからmy-gridsome-site/distに変更されたので、あとはgridsomeをビルドするだけです。

cd my-gridsome-site
npm run build

ビルドが終わったら

cd ../
firebase deploy

これでコマンドラインでdeploy完了が確認できればデプロイ完了です。 sample-web-(登録した時のID).web.appを開いたらwordpressの記事が出てくるはずです。

しょぼいサイトですが一応デプロイしてSEOやらCSSを多少いじった奴がここに。

mekolabo

これからやること

  • レイアウトなど主にCSS周りを作っていく
  • SEO周りを綺麗にする。
  • 広告とかの設定をどうするか考える
  • 他のアプリと連帯できないか検証
  • いづれwordpressのエディターも移植

問題は多分もっと出てくるのですが、今のところ考えられるのはこれくらいです。 スピードはSpeedInsightでモバイルでも90後半くらいでした。 作成してるサイトですが、実はちゃっかりstorybookが入ってて開発しやすいようにはしてます。 VueはNuxtで少し触っただけなのでほぼ初心者でangularの知識を頼りに勉強中です。

とりあえず早いからストレスたまらないです。

書いた人

カテゴリー

タグ