[WordPress on EC2 → Next.js on Now] 個人ブログをリプレイスしました

Ryoma

2020年4月9日 21:28

個人ブログをリプレイスしました。

リプレイスのモチベーション・流れ（主にリダイレクト）について簡単にまとめます。

モチベーション

①EC2の維持コスト

ここが一番

お手軽にbitnami-wordpress-linux-ubuntuのイメージで立てていました。
こちらが先月の請求書。

約4,000円。なんとかしたい...

②技術スタックの解放

WordPressを立てた頃は右も左もわからなく、とりあえずやってみるか！って感じでやっていました。

まがいなりにもエンジニア（おもにフロント）としてやってきたので、いい感じのブログを構築したくなりました。

パフォーマンスむちゃくちゃいいブログもほしかった。

このあたりをみて。

新ブログのアーキテクチャ

Next.js x MDX x Now x AMPなブログです。

- AMP
- PWA
- High Performance
- SSG or SSR
- 管理が楽
- Markdown

この辺りを同時に満たしたいなあと考えてました。

AMPとローコストを軸に考えるとNext or Nuxtに絞られるのか。

AMP周りは、Nextの方がハンドリングやバリデーションがしやすかったのでNextに軍配。(NuxtはAMP用HTMLにリプレイスする記述周りが辛かった。)

あとMDX。MarkdownとJSXを共存できる点がむちゃくちゃよかった。
Headless CMSはこれができなかった。

そしてPaaS。
Next.jsといったらZeit、ZeitといったらNow。NowのZero Config Deployに感動しました。

now

これでデプロイ完了。
GithubとのIntegrationも簡単で、Push＆Deployの仕組みもNowで構築できる。

Next.jsやる場合、FirebaseとかだとFunctionsのリライト周りを設定する必要がありますが、NowはNext.jsの環境が整っているので優しい。

旧ブログ→新ブログへのリダイレクト

小規模かつAWSだったので、めちゃくちゃ簡単。
ちなみに旧ブログのドメインはRoute53を使用。

1. リダイレクト処理
2. Google Analytics設定

1. リダイレクト処理

a. 旧ブログから新ブログへリダイレクト

①S3バケット作成

新しくバケットを作成し、Static website hostingをONにする。

「リクエストをリダイレクトする」にチェックを入れる
「ターゲットバケットまたはドメイン」に新ブログのドメインを入れる
「プロトコル」はhttps

これで完了。
しかし、S3のみでのリダイレクト設定はhttpのみしか対応していないので、httpsに対応させるためにはCloudfrontの設定が必要となります。

②Cloudfront設定

httpsに対応させるために、CloudfrontをS3の前段に構えます。

「Origin Domain Name」に①で作成したバケットの静的サイトホスティングのエンドポイント ([バケット名].s3-website-[リージョン名].amazonaws.com)を入力
「Alternate Domain Names」に旧ブログドメイン
「SSL Certificate」にて、Custom SSL Certificateにチェック。
ここで証明書が必要となるので作成する

「ドメイン名」には旧ブログのドメインを設定

リクエストしたら認証を行ってください。

これでCloudfrontの設定は完了。

③Route53

旧ブログへのアクセスをCloudfrontへルーティングするための設定です。

「レコードセットの作成」から
「名前」を旧ブログドメイン名
「タイプ」をA - IPv4 アドレス
「エイリアス先」を設定したCloudfrontのディストリビューションドメイン

これで旧ブログ側の設定は完了です！

b. 新ブログでのリダイレクト設定

このままでは、旧ブログの記事へのアクセスが新ブログのTopへリダイレクトされてしまいます。

新ブログにおいてもリダイレクト設定を行います。
そんなに数が多くなかったので手作業で。

◯旧ブログ
https://www.ohoshi-tech.io/2019/06/15/ios-pwa-splash

◯新ブログ
https://blog.ohoshi.me/blog/ios-pwa-splash

このようなURLの構成となっていました。

next.config.jsにリダイレクト設定を書きます。

const nextConfig = {
 experimental: {
   redirects() {
     return [
       {
         source: '/2019/06/15/ios-pwa-splash{/}?',
         statusCode: 301,
         destination: '/blog/ios-pwa-splash'
       },
     ];
   }
 },

こんな感じ！

これでリプレイスの設定は完了です！
旧ブログへの検索流入も、新ブログへ自動で流れてくれます。

ちなみにWordPressの記事はもともとMarkdownで記述していたのでだいぶ楽でした。

Next.jsはプロジェクト構成がそのままURLになってくれるので、記事ごとにmdxファイルを追記していくだけでOKです。

パフォーマンス

いいかんじ〜！

コンテンツも少ないので100点はちょろいなあと思います。

このNoteには主に美容に関することを書いてきたぼくですが、たまにはこういうものも良いだろうと思って書いてみました。

技術的なことについては

これからこちらに書いていこうと思います〜！

それでは。

親にデパコスを贈りたいです。