vueアプリケーションをsubdirectoryに配置してCloudflareのworkersでリバースプロキシした

目標

  1. cloudflareで一つのドメインで複数のworkers、pagesを使用したい。
  2. vueで作成したSPAは、cloudflareのpagesを使用し、サブディレクトリで動作させたい。
  3. apiは、cloudflareのwokersを使用し、サブディレクトリで動作させたい。

ドメインAのディレクトリ構成は下記のようなイメージ

A 静的ページ (/)  
   |  
   |-B アプリ(/B)  
   |-C API(/C)

A：静的ページ - pages-A
B：vueで作成したSPA - pages-B
C：api - workers-C

リバースプロキシ

リクエストを A、B、C に振り分けるのは workers で行います。

処理は下記のようなイメージ

X リバースプロキシ
   |-A 静的ページ(/)
   |-B アプリ(/B)  
   |-C API(/C)

X：リバースプロキシ
A：静的ページ - pages-A
B：vueで作成したSPA - pages-B
C：api - workers-C

リバースプロキシ処理内容

/B サブディレクトリへのリクエストは、pages-Bへ転送します。
pages-B では、/ 配下にvueアプリを配置するので、転送する際にサブディレクトリの「/B」は、取り除きます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

async fetch(request, env, ctx) {
    let res
    const origin = new URL(request.url)
    const forward = new URL(request.url)
	const isB = (origin.pathname.startsWith('/B'))
    if (isB) {
        forward.hostname = 'pagesVueApp'
        forward.pathname = origin.pathname.replace('/B', '')
        res = await fetch(forward.toString(), request)
    } else {
        res = await fetch(request)
    }
    return res;
}

vue

  • サブディレクトリとして動作させるため、baseを変更します。
  • ファイルはpagesの直下に置きます。

vue変更内容

base の変更

viteを使用しています。

1
2
3
4
5
6
7
8
9

export default defineConfig(
    ({ command, mode, isSsrBuild, isPreview }) => {
        const config = {
            plugins: [vue()],
            base: "/B/"
        }
        return config
    }
)

vue router

vueのファイルはpagesのルートに配置するので、vue routerが処理するリンクはルートを基準に設定します。

1
2
3
4
5
6
7
8

const router = createRouter({
    history: createWebHistory("B"),
    routes: [
        { path: '/', name : 'Home' , component: Home, meta: { requiresAuth: true } },
        { path: '/callback/', name : 'AuthCallback' , component: AuthCallback, meta: { requiresAuth: false } },
        { path: '/my-profile/', name : 'MyProfile' , component: UserProfile, meta: { requiresAuth: true } },
    ]
})

その他

外部の認証システムを使用しました。外部に渡すリンクは、プロキシが処理するURLを設定します。
auth0を使用しています。

1
2
3
4
5
6
7

const auth = createAuth0({
    domain: import.meta.env.VITE_AUTH_DOMAIN,
    clientId: import.meta.env.VITE_AUTH_CLIENT_ID,
    authorizationParams: {
        redirect_uri: "https://A/B/callback/"
    }
})

Last Mod: May 5, 2024