4. Project deployment and CI/CD

In the previous chapter, we ran the local database and the simplest login locally. In this chapter, we started to run the remote deployment and CI/CD.

Main logic of deployment

The main logic for deployment is concentrated in scripts/deploy/index.ts. The entire logic is relatively simple and clear with comments, so there is no need to waste space in the article. Go to Github to view the logic yourself.

/**
 * Main function
 */
const main = async () => {
  try {
    console.log('🚀 Starting deployment process...')

    validateEnvironment()
    setupEnvFile()
    setupWranglerConfigs()
    await checkAndCreateDatabase()
    migrateDatabase()
    // await checkAndCreateKVNamespace()
    await checkAndCreatePages()
    pushPagesSecret()
    deployPages()

    console.log('🎉 Deployment completed successfully')
  } catch (error) {
    console.error('❌ Deployment failed:', error)
    process.exit(1)
  }
}

main()
```

## Environment variable settings

In .env, these environment variables must be obtained from cloudflare.

```
CLOUDFLARE_ACCOUNT_ID=""
CLOUDFLARE_API_TOKEN=""
PROJECT_NAME=""
DATABASE_NAME=""
DATABASE_ID=""
```

The process is as follows:

1. Log in to [Cloudflare console](https://dash.cloudflare.com/)
2. Get the ID from the URL. When you log in, your URL will look like this: https://dash.cloudflare.com/[acoutId]/home/domains. The middle part is your `CLOUDFLARE_ACCOUNT_ID`. Of course, there are other places to look, but this is the fastest.
3. As shown in the figure, click the little man on the right -> drop-down box -> configuration file -> api token -> create token

![](https://ik.imagekit.io/ixou4q6nu/cloudflare-create-api-token.png)

Then select these permissions (you can select more such as R2 bucket, Quest queue, and AI to avoid adding them later). After the creation is successful, you will get a secret key. Remember to save it. There is only one chance to view it. Fill it in `CLOUDFLARE_API_TOKEN`.

![](https://ik.imagekit.io/ixou4q6nu/premission.png)

4. `PROJECT_NAME` takes the name you want for a project
5. `DATABASE_NAME` and `DATABASE_ID`, fill in the value of d1 generated locally in the previous section.

> Pay attention to `PROJECT_NAME`. This is where I stepped into a trap when writing this article. When I was running CI, I always thought there was a problem with the environment variable settings of my github. Until I went through the source code of cloudflare, the requirements are as follows:
> The project name can be 1-58 lowercase characters and can contain hyphens, but cannot start or end with a hyphen, for example: `cloudflare-next-template`.

## Execute the deployment script and verify the results

`pnpm deploy:pages` is executed, as shown in the figure.

![](https://ik.imagekit.io/ixou4q6nu/success-excuete.png?updatedAt=1745851458326)

Check it on cloudflare. The location is `Workers` and `D1`. Enter from the left sidebar:

![](https://ik.imagekit.io/ixou4q6nu/cloudflare-success-pages.png)

![](https://ik.imagekit.io/ixou4q6nu/d1-success.png)

Finally, I hung this `Workers` under one of my second-level domain names (you can directly enter the domain you own here, but the domain must be on cloudflare, and cloudflare will automatically handle it for you).

![](https://ik.imagekit.io/ixou4q6nu/domain.png)

Visit address: https://demo.getwhynot.org/

## Migrate the database to remote D1

Obviously we still have something to do, which is to migrate

Main logic of deployment

Subscribe to unlock the full article