1. 背景

業務で現在NuxtからReact(+vite)にリプレイスしています。
現在リプレイスの進め方はパス単位で検討しています。

2. パス単位で検討している理由

大規模なリプレイスかつ、マニュアルテストが殆どのためバグのリスクが大きいです
現在リプレイス作業者は私のみ（インフラはインフラチームと連携）の為、まめに進め、運用チームに機能追加、修正を引き継ぎたい為です
ページ間でstateの引き継ぎの処理が少なかったです

3. 同一ドメインでパスの切り替えをする

3.1. 前提

レガシーサイト（Nuxt）とリニューアルサイト（React）のパス切り替えでlocalStorageを保持したい

3.2. localで検証

以下のようなイメージです

リバースプロキシーを使います。
これによりレガシーサイト（Nuxt）とリニューアルサイト（React）のドメインを同一にでき、localstorageを保持できます。

リバースプロキシーにはnginxを使用しました。

docker-compose.yml

version: '3'

services:
  reverse-proxy:
    image: nginx
    volumes:
      - ./reverse-proxy/nginx.conf:/etc/nginx/nginx.conf
    ports:
      - 80:80

reverse-proxy/nginx.conf

events{

}

http {
    server {
        listen 80;
        server_name localhost;

        #############↓リニューアルサイト##################
        location /user/history {
            proxy_pass http://host.docker.internal:3001/;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }

        location /@vite/ {
            proxy_pass http://host.docker.internal:3001/@vite/;
        }

        location /src/ {
            proxy_pass http://host.docker.internal:3001/src/;
        }

        location /node_modules/ {
            proxy_pass http://host.docker.internal:3001/node_modules/;
        }

        location /@react-refresh {
            proxy_pass http://host.docker.internal:3001/@react-refresh;
        }

        location /public/ {
            proxy_pass http://host.docker.internal:3001/public/;
        }
        #############↑リニューアルサイト##################

        #############↓レガシーサイト##################
        location / {
            proxy_pass http://host.docker.internal:3000/;
            proxy_http_version 1.1;
            # 転送先にアクセス元のIPやホスト情報を再定義・追加
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
        ###############################################
    }
}

viteの設定

【Vue3】Viteで起動したローカル開発サーバーにIPアドレスで外部からアクセスする方法

strictPort、hmrの設定は以下を参考にしました
Vite サーバーオプション

vite.config.ts


server: {
    port: 3001,
    host: true,
    strictPort: true,
    hmr: {
      protocol: "ws",
      clientPort: 3001,
    },
  },

nuxtの設定

Nuxt.js の起動時に外部アクセス可能なIPを指定する

nuxt.config.js

server: {
    host: '0.0.0.0',
  },

3.3. CloudFrontで検証

Behaviors

Behaviorsを以下のようにしました

Precedence	Path pattern	Origin or origin group
0	/assets*	renewal
1	/user/history*	renewal
2	Default (*)	legacy

また、BehaviorのCache policyをCachingDisabledにしました

CloudFunctions

user/historyでアクセスしてもSPAではhistoryというファイルはない為、404 NotFoundになってしまいます

そこでCloudFunctionsでindex.htmlにリダイレクトさせます。

var indexPage = "index.html"

function handler(event) {
    console.log(event);
    var request = event.request;
    var currentUri = request.uri;
    var doReplace = request.method === "GET" && currentUri.indexOf('.') === -1;
    if(doReplace) {
        var indexPath = `/${indexPage}`;
        request.uri = indexPath;
    }
    return request;
}

4. その他

4.1. リバースプロキシーとは

以下の記事を引用します
リバースプロキシとは？|プロキシサーバーの説明

1つ以上のWebサーバーの前に置かれ、クライアントからのリクエストを傍受するサーバーです。
リバースプロキシは配信元サーバーの前にあり、クライアントがその配信元サーバーと直接通信しないようにします。

上の図は関係するリバースプロキシーのフローです。

D：任意の数のユーザーのホームコンピューター
E：これはリバースプロキシサーバーです
F：1つ以上の配信元サーバー

リバースプロキシを使用しない場合
DからのすべてのリクエストはFに直接送られ、FはDに直接応答を送信します
リバースプロキシを使用する場合
DからのすべてのリクエストはEに直接送られ、EはFにリクエストを送受信します
その後、Dに適切な応答を渡します

5. 最後に

リプレイス中はページ遷移で毎回reloadが走るのでそれがどれくらいユーザに負担かを考える必要があると思いました
インフラ、サーバーの知識がないので業務を通して少しづつ深めたいです
弊社のインフラエンジニアの方に色々と助けて頂いたのでここに感謝の意を示します

6. 参考

本記事を読んで頂き、ありがとうございました。
いいねいただけると記事執筆の励みになりますので、参考になったと思われた方は是非よろしくお願い致します🙏

パス単位でVueからReactにリプレイスする