稼働中のサービスをフルリニューアルする手順と実況
更新日:2022年12月3日
labelmake.jpはGatsby + Netlify という構成でアプリを提供していたが、今回のリニューアルでNext.js + Vercelという構成に変更した。
現状新しい構成のBETA版を https://beta.labelmake.jp/ で提供しているが、2022/12/03に https://labelmake.jp/ へ完全に移行する。
別に公開しなくていいんだけど、なんとなく公開した。
やること
ドメイン移行: https://beta.labelmake.jp/ で運用しているサービスを https://labelmake.jp/ に移行する。
コード内のFIXMEの変更(外部連携用のTOKENを開発用から本番用にする)
外部サービスのwebhookの変更: カラーミーショップ・Shopifyの拡張機能のwebhookのURLを修正する。
現状の整理
ドメインについて
https://labelmake.jp/ は Netlifyのネームサーバーを使っている。
お名前.com Navi > ネームサーバー より確認可能。
これにより、NetlifyのDNS設定にある設定が使われる。
現状NetlifyのDNS設定で設定されているドメイン(サブドメイン)は
api.labelmake.jp (Firebase hosting)
beta.labelmake.jp (Vercel)
labelmake.jp (Netlify)
である。
あと、
メール転送(お名前.com > 転送 Plus > メール転送設定)
Googleのサイト認証
の設定もある。
ネームサーバーはVercelを参照するようにし、現状のNetlifyのDNSの設定をVercelに移していく。
コード内のFIXMEの変更
外部連携用のTOKENを開発用を使っているので本番用に変更する必要がある。対応アプリは下記
BASE
カラーミーショップ
freee
各サービスのアプリ開発者画面の設定にてコピーする。
Webhookについて
カラーミーショップ・Shopifyにはアプリのインストール時やデータ削除の通達のためのWebhookを設定しており、これまではNetlify functionsを使ってそのエンドポイントを設定していた。
そのため、URLは
labelmake.jp/.netlify/functions/~
と設定されている。
しかし、Next.jsのAPI Routesを使うため、
labelmake.jp/api/~
となる。
この変更をカラーミーショップ・Shopifyのアプリの設定画面にて行う。
作業手順
下記の手順で作業を進めていく
コード内のFIXMEを修正し、デプロイ
お名前.comの ネームサーバーの変更 からNetlifyのネームサーバーの値からVercelのネームサーバーの値へと変更する
変更が確認されるとVercelのプロジェクト > ドメイン設定で接続確認ができる
Netlify DNSパネルからVercelのDNSパネルへと値を移していく
外部サービスのwebhookを変更する
動作確認・デバッグ
上記の作業手順が完了したらlabelmake.jpで提供しているすべてのサービスが正常に動作するかチェックを行う。チェック項目は下記
通常のサービス利用
ラベル作成画面
ログイン
アカウント解約
アカウント契約
お問い合わせのメール
サービス連携利用
Shopify
BASE
カラーミーショップ
freee
API連携利用
https://api.labelmake.jp/v1/pdf
https://api.labelmake.jp/v1/pdfTokyo
https://api.labelmake.jp/v1/templates
https://api.labelmake.jp/v1/templatesTokyo
気になっているところ
Vercelのプロジェクトにドメインを割り当てるとAレコードをお勧めされているが、ネームサーバーの値でもいいのか? <- とりあえず ネームサーバーの値 で実施する
そもそもVercelのプロジェクトにサブドメインしか割り当てたことがなかったので一度サブじゃないドメイン割り当ててみよう。(余っているドメインを使う) <- やった
12/03 20:00~ メンテナンス作業実施
とうとうやってきました。
作業ログがてら書いていきます。
実施タスク
コード内のFIXMEを修正し、デプロイ
修正し、デプロイした
お名前.comの ネームサーバーの変更 からNetlifyのネームサーバーの値からVercelのネームサーバーの値へと変更する
実施した。20:07。反映されるまでしばらく待つ。
変更が確認されるとVercelのプロジェクト > ドメイン設定で接続確認ができる
なんか設定が進んでSSL証明書の発行まで進んだっぽい 20:19

Netlify DNSパネルからVercelのDNSパネルへと値を移していく
さて、もろもろの設定を移していく
とりあえず写せた
外部サービスのwebhookを変更する
カラーミーショップ -> OK
Shopify -> OK
その他作業
Vercel ドメイン設定にてbetaのサブドメインをlabelmake.jpへリダイレクトをかける -> OK
Vercel ドメイン設定にてwwwのサブドメインをlabelmake.jpへリダイレクトをかける -> OK
確認タスク
通常のサービス利用
ラベル作成画面 -> OK
ログイン -> OK
アカウント解約 -> OK
アカウント契約 -> OK
お問い合わせのメール -> OK
サービス連携利用
freee -> OK
BASE -> OK
カラーミーショップ -> OK
Shopify -> データの取得でエラーが発生した。保護された顧客データへのアクセス が承認されておらず Admin APIバージョン2022-10 が使用できなった。承認されるまで 2022-07 を使用する。-> 修正済み OK
API連携利用
https://api.labelmake.jp/v1/pdf -> OK
https://api.labelmake.jp/v1/pdfTokyo -> OK
https://api.labelmake.jp/v1/templates -> OK
https://api.labelmake.jp/v1/templatesTokyo -> OK
おわったーーーーー!!21:44!!