AWS Amplify Hosting のワイルドカードサブドメインをマルチテナントアプリで利用する

npx create-next-app@latest with-wildcard-subdomains --app

{
  "name": "with-wildcard-subdomains",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "^14.0.1",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10",
    "eslint": "^8",
    "eslint-config-next": "13.5.6",
    "postcss": "^8",
    "tailwindcss": "^3",
    "typescript": "^5"
  }
}

amplify pull --appId <app-id> --envName staging

Do you plan on modifying this backend? Yes

 .
+├── amplify/
 ├── app/
+│   ├─ (auth)/
+│   │     └─ login/
+│   │         ├─ BioForm.tsx
+│   │         └─ page.tsx
+│   │
+│   ├─ users/
+│   │   └─ [username]/
+│   │       └─ page.tsx     
 │   ├─ layout.tsx
 │   ├─ page.tsx
 │   └─ ...
+├── middleware.ts
 ├── node_modules/
 ├── public/
 ├── next.config.js 
 ... 
 └─ README.md

amplify add auth

amplify add api 

type User
  @model
  @auth(rules: [{ allow: public, operations: [read] }, { allow: owner }]) {
  id: ID!
  username: String! @index(name: "byUsername", queryField: "byUsername")
  description: String
  link: String
}

amplify push

"use client";

// ...imports...

export default function App() {
  return (
    <div>
      <Authenticator
        initialState="signUp"
        components={{
          SignUp: {
            FormFields() {
              return (
                <>
                  <Authenticator.SignUp.FormFields />
                </>
              );
            },
          },
        }}
        services={{
          async validateCustomSignUp(formData) {
            // this is important
            if (!formData.username) {
              return {
                acknowledgement: "Username is invalid.",
              };
            }

            // match subdomain pattern
            const subdomainRegex = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;

            // check if subdomain is valid
            if (!subdomainRegex.test(formData?.username)) {
              return {
                acknowledgement: "Username is invalid.",
              };
            }
          },
        }}
      >
        {({ signOut, user }) => (
          <div>
            <main>
              <h1>Hello, {user?.username}.</h1>
              <div>
                <button onClick={signOut}>Sign out</button>
              </div>
            </main>
          </div>
        )}
      </Authenticator>
    </div>
  );
}

// /app/(auth)/login/BioForm.tsx
"use client";

import { useEffect, useState } from "react";
import type { FormEvent } from "react";

import { Amplify } from "aws-amplify";
import { createUser, updateUser } from "@/src/graphql/mutations";
import * as queries from "@/src/graphql/queries";
import { getCurrentUser } from "@aws-amplify/auth";
import { generateClient } from "aws-amplify/api";

import awsExports from "@/src/aws-exports";

Amplify.configure(awsExports);

const client = generateClient();

export default function BioForm() {
  const [loggedInUser, setLoggedInUser] = useState<any>(null);
  const [userProfile, setUserProfile] = useState<any>(null);
  const [userProfileExists, setUserProfileExists] = useState<boolean>(false);
 
  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    const form = new FormData(event.currentTarget);
    const description = form.get("description") || userProfile?.description;
    const link = form.get("link") || userProfile?.link;

    if (userProfileExists) {
      await onUpdate({
        id: userProfile?.id,
        username: loggedInUser?.username,
        description,
        link,
      });
    } else {
      await onCreate({
        username: loggedInUser?.username,
        description,
        link,
      });
    }
  }

  // include mutation handlers to update user profile
  const onCreate = async (formData: {
    username: string;
    description: string;
    link: string;
  }) => {
    const { username, description, link } = formData;
    const input = { username, description, link };
    await client.graphql({
      query: createUser,
      variables: { input },
      authMode: "userPool",
    });
  };

  const onUpdate = async (formData: {
    id: string;
    username: string;
    description: string;
    link: string;
  }) => {
    const { id, username, description, link } = formData;
    const input = { id, username, description, link };
    await client.graphql({
      query: updateUser,
      variables: { input },
      authMode: "userPool",
    });
  };

  const getUserProfile = async (username: string) => {
    return await client.graphql({
      query: queries.byUsername,
      variables: { username },
      authMode: "userPool",
    });
  };

  useEffect(() => {
    const getUser = async () => {
      const user = await getCurrentUser();
      if (user) {
        setLoggedInUser(user as any);

        const { data } = await getUserProfile(user?.username);

        const profile = data?.byUsername?.items[0];

        if (profile) {
          setUserProfileExists(true);
          setUserProfile(profile as any);
        }
      }
    };

    getUser();
  }, []);

  return (
    <form onSubmit={onSubmit}>
      <div>
        <input
          type="text"
          name="username"
          id="username"
          value={loggedInUser?.username}
          disabled={true}
        />
      </div>

      <div>
        <textarea name="description" id="description" />
      </div>

      <div>
        <label htmlFor="link">Link</label>
        <input type="url" name="link" id="link" />
      </div>

      <div>
        <button type="submit">
          {userProfileExists ? "Update" : "Create"}
        </button>
      </div>
    </form>
  );
}

const { data } = await client.graphql({
  query: queries.byUsername,
  variables: { username },
})

import { NextRequest, NextResponse } from "next/server";

export const config = {
  matcher: [
    /*
     * Match all paths except for:
     * 1. /api routes
     * 2. /_next (Next.js internals)
     * 3. /_static (inside /public)
     * 4. all root files inside /public
     */
    "/((?!api/|_next/|_static/|[\\w-]+\\.\\w+).*)",
  ],
};

export default async function middleware(req: NextRequest) {
  const url = req.nextUrl;

  const hostname = req.headers.get("host")!;

  const path = url.pathname;

  let subdomain = hostname.split(".")[0];

  subdomain = subdomain.replace("localhost:3000", "");

  // handle no subdomain or www with base path
  if ((subdomain === "www" || subdomain === "") && path === "/") {
    return NextResponse.rewrite(new URL("/", req.url));
  }

  // profile login
  if (subdomain === "app" && path === "/login") {
    return NextResponse.rewrite(new URL("/login", req.url));
  }

  // subdomains
  if (subdomain !== "app") {
    return NextResponse.rewrite(
      new URL(`/users/${subdomain}${path === "/" ? "" : path}`, req.url)
    );
  }

  return NextResponse.next();
}