How can I make Apollo Federation rover work on localhost endpoint?

I am trying to use rover to compose subgraph from a Apollo server running in my local. But I got 400 request when rover tries to resolve the subgraph schema.

The code I have in the Apollo server is:

import { ApolloServer } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone';
import { dateScalar } from './scalar';

// A schema is a collection of type definitions (hence "typeDefs")
// that together define the "shape" of queries that are executed against
// your data.
const books = [
  {
    title: 'The Awakening',
    author: 'Kate Chopin',
  },
  {
    title: 'City of Glass',
    author: 'Paul Auster',
  },
];

const typeDefs = `#graphql
  # Comments in GraphQL strings (such as this one) start with the hash (#) symbol.
  scalar AWSDateTime

  # This "Book" type defines the queryable fields for every book in our data source.
  type Book {
    title: String
    author: String
  }

  # The "Query" type is special: it lists all of the available queries that
  # clients can execute, along with the return type for each. In this
  # case, the "books" query returns an array of zero or more Books (defined above).
  type Query {
    books: [Book]
  }
`;

// Resolvers define how to fetch the types defined in your schema.
// This resolver retrieves books from the "books" array above.
const resolvers = {
  Query: {
    books: () => books,
  },
  AWSDateTime: dateScalar,
};

const startServer = async () => {
  // The ApolloServer constructor requires two parameters: your schema
  // definition and your set of resolvers.
  const server = new ApolloServer({
    typeDefs,
    resolvers,
  });

  // Passing an ApolloServer instance to the `startStandaloneServer` function:
  //  1. creates an Express app
  //  2. installs your ApolloServer instance as middleware
  //  3. prepares your app to handle incoming requests
  const { url } = await startStandaloneServer(server, {
    listen: { port: 4000 },
  });

  console.log(`🚀  Server ready at: ${url}`);
};
startServer();

The rover configuration yaml file is:

federation_version: 2
subgraphs:
test:
routing_url: http://localhost:4000/
schema:
subgraph_url: http://localhost:4000/graphql

The error I have is:

rover supergraph compose --config ./supergraph.yaml
⌛ resolving SDL for subgraphs defined in ./supergraph.yaml
error[E038]: Encountered 1 build error while trying to build a supergraph.
Caused by:
E004: HTTP status client error (400 Bad Request) for url (http://localhost:4000/graphql) while resolving the schema for the 'test' subgraph
Make sure the endpoint is accepting connections and is spelled correctly
See https://www.apollographql.com/docs/rover/commands/supergraphs#yaml-configuration-file for information on the config format.

I have tried to change the url to http://localhost:4000 but get the same error.

I am able to open http://localhost:4000 in my browser to send graphql request. Not sure how I can make rover connects to the right endpoint.

The Apollo server you have setup is not ready to be polled by Router yet.
You need to use @apollo/subgraph library to make sure your service works with Router.
Apollo's document specifies on how to implement a subgraph step by step - https://www.apollographql.com/docs/apollo-server/using-federation/apollo-subgraph-setup/#1-install-and-import-apollosubgraph