Can I connect to Rinkeby using remix and metamask?

Question

I've finished my dapp by deploying the contract to Remix, and it works well in Ganache.

Now I wanna connect my dapp to Rinkeby by web3.js. I deployed my contract in Remix, and when I wanna interact with contract, the metamask show the page of paying.

However, when I connect metamask to my dapp page and interact with contract by it, the paying page of metamask didn't show up.

And I also use metamask legacy-web3, the console shows:

I've confused of where should I deploy it, and how to connect it? Should I deploy my contract by geth rather than Remix?

the following is my code of web3.js

// Initialize Web3
web3 = new Web3(web3.currentProvider);

// Set Account
web3.eth.defaultAccount = 'my account on metamask';

// Set Contract Abi
var ABI = [abi];

// Set Contract Address
var contractAddress = 'the address I deployed in Remix';

// Set the Contract
var contract = new web3.eth.Contract(ABI, contractAddress);

Answer 1

In Contracts folder in Remix, make a new file (By clicking on Contracts folder and then clicking on folders above paper shaped icon).

Copy your contract and paste it in the file you made.

Compile the contract.

Change network of Metamask into Rinkeby.

In deployment page, instead of JavaScript VM (London) use Injected Web3. If it does not work, unlock Metamask and try it again.

Now just deploy the contract and wait for confirmation.

Edit:

I don't know much about web3.js (I use ethers.js) but it should be something like this:

const startFunction = async () => {
    await ethereum.request({ method: 'eth_requestAccounts'});
    await ethereum.request({ method: 'wallet_switchEthereumChain', params:[{chainId: '0x4'}]});
    web3.setProvider(window.ethereum);
}
startFunction();