😽

Next.jsじゃなくて良くない?WordPressを着実に育てていく[過去の俺]

2022/01/19に公開約4,400字

問い言いつつ
2022年9月26日現在は、Wordpressはメディア系のサイトであれば有料テーマを購入し運用。それ以外のWebAppはNext.jsと言う立場です。

割とミーハーなエンジニアです。
触ってきた技術は数しれず。

で、Next.jsとか色々触ってみたけれどなんだかんだ覚えることあるし全然サービスリリースまでテンポよく行かない。

あ、先に断っておくのですが自分はフロントが本職じゃなくて、本業でもNext.jsを使っていないという立場からの発言です。

なんだろWordPressって結構みんな避けてる?

今回始めてWordPressをちゃんと調べてみたのですが、Next.jsの覚えることとWordPressの覚えることはどちらかというと僅差でWordPressのほうが少ないのでは?というレベルに感じました。

Next.js自体はそこまで覚えることがなかったとしても、周辺技術で死ぬほどキャッチアップする必要があるので。WordPressはWordPress以外BlockEditorのためのReactくらいで完結します。

着実に育てていくためのローカル環境構築

最初はdockerで構築しようと思ったが、localはWordPress特化なので色々便利機能があって、wordpressのローカル環境構築にdockerを使用するのはナンセンスだなと思いました。

CI環境構築

Next.jsの最大のメリットは、ISR、SSG、SSRをいい感じに組み合わせることができてパフォーマンス良くコンテンツを提供できることだと思います。

じゃあそれをwordpressでできるのかというと、SSGはちょっときついですね。ただ、CDNでCloudFront周りを使ったらお安く仕上がるじゃないですか!

まだ検証中ではありますが、WorPressのhookとinvalidationを組み合わせたら編集したものなどはほぼリアルタイムで反映できるでしょうし。

ということで、必要なのはcore web vitalsのスコアを上げていくことという結論に至ったのでそのための環境を作ります。

lighthouse ciを採用

https://github.com/GoogleChrome/lighthouse-ci

アーキテクチャはこちらです。永続化したストレージで履歴を残しつついつでも見れないとどの修正がどこに効いてるかわからないですよね。

https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/architecture.md

個人でWordPressを育てていく分にはお金をかけたくないのでherokuにて公開します。
というのも永続化ストレージとしてサポートされているのは、sqllite, mysql, postgresなので、herokuのhobby目的でpostgresを無料で使わせてもらいます。

※詳しい使い分けは把握してないですが、個人の趣味目的を逸脱する場合はちゃんと課金しませう。

公式が用意しているherokuへのlighthouse-ciサーバーのデプロイ方法はこちらです。

https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/recipes/heroku-server/README.md

事前にherokuのセットアップはする必要があります。

https://devcenter.heroku.com/articles/heroku-cli

WordPressをどうお安く構築するか

AWSで構築するのは、ビジネス目的ならセキュリティや管理の面からそうなると思います。
がしかし、個人でやるならレンタルサーバー一択だと思います。

だって、awsで構築したらrds(mysql),ec2/ecs, ロードバランサー, efs( fargateの時)などどんなに頑張ってもrdsが常時稼働で多分5000円超える気がします。

おすすめはmixhostです。

テーマのアップロードのあとにciを走らせる

自分で色々テーマやプラグインを作成して、WordPressは育てていきます。なので、rsyncやscpなどでファイルをアップロードしてテーマをレンタルサーバーに反映します。

やり方は何でもいいですがgithub actionが無料で使えてお手軽です。

※実行時間の制限はあります。

30分位で切り貼りして適当に作ったので申し訳ないですが、github actionのファイルを置いていきます。

name: Deploy into production server

on:
  push:
    branches:
    - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: prepare .ssh dir
        run: mkdir -p .ssh && chmod 700 .ssh
      - name: ssh key generate
        run: echo "$SSH_KEY" > .ssh/id_rsa && chmod 600 .ssh/id_rsa
        env:
          SSH_KEY: ${{ secrets.SSH_KEY }}
      - name: Cache node modules
        uses: actions/cache@v2
        env:
          cache-name: cache-node-modules
        with:
          # npm キャッシュファイルは Linux/macOS の `~/.npm` に保存される
          path: ~/.npm
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-
      - name: install packages
        run: npm install
      - name: build
        run: npm run build
      - name: delete  node_modules
        run: rm -rf node_modules
      - name: delete  .git
        run: rm -rf .git
      - name: push with scp
        run: scp -r -o StrictHostKeyChecking=no -P $SSH_PORT -i .ssh/id_rsa ./. $SSH_USER@$SSH_HOST:$DIR
        env:
          SSH_HOST: ${{ secrets.SSH_HOST }}
          SSH_USER: ${{ secrets.SSH_USER }}
          SSH_PORT: 22
          DIR: ~/public_html/wp-content/themes/custom-themes
          SSH_KEY: ${{ secrets.SSH_KEY }}
  lighthouseci:
    runs-on: ubuntu-latest
    # deployのjobのあとに実行する
    needs: deploy
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 14
      - run: npm install -g @lhci/cli
      # ここでmetricsを取得
      - run: lhci collect
      # ここでherokuに立てたlight house ciサーバーにデータ送信
      - run: lhci upload

備考

wordpressのデータをgraphqlとして取得できるちゃんとしたプラグインもあるので、もしWordPressでやることで割に合わないことが出てきたらそれこそ、Next.jsなどで構築したら良いのではないでしょうか?

CloudFront - wordpress
|- Next.js

って感じにしたらいいのでは?と思っています。Next.jsをAmplifyでデプロイできるのでAWSできますし。

まとめ

最終的に何を伝えたいかというと、エンジニアって課題解決をするために存在すると思うのでチームの状況(得意な言語)やはじめのデリバリーの速度等によって適切な技術を採用するのが重要だと思ってます。ほかのノーコードCMSと比較してもWordPressのブロックエディターによる記事の見せ方の柔軟性などは一つ頭を抜いているので、しばらくWordPressを触ってない人やWordPress使ったことない人は一度検証してみてルト面白いと思います。

参考

https://zenn.dev/mryhryki/articles/2020-11-02-hatena-lighthouse-ci

https://blog.zelkova.cc/2019/09/rsync-over-ssh-on-github-actions.html

Discussion

ログインするとコメントできます