Deploy to Vercel

New Project Deployment Process

After completing the development of a new project based on ShipAny, you can refer to the following process to deploy your project to Vercel and start online operations.

Create Github Repository

Select an organization in Github, or create a code repository under your personal account to host the code of the new project.

Note: Be sure to select Private to create a private code repository. Do not publicly publish project code developed based on ShipAny.

Push Project Code

Enter the project created according to Quick Start, and execute the following command in the project root directory to set the project code hosting address.

git remote set-url origin git@github.com:your-org/your-repo.git

Replace your-org/your-repo with the code repository address you created in the previous step.

Then execute the following command to push the code to your code repository.

git add .
git commit -m "first version"
git push origin main
Deploy Project

Create a new project in Vercel and connect to your Github account. Select the code repository created in the previous step and import the code to start deployment.

You can set the environment variables used online during the first deployment. You can also modify the environment variables after the project is deployed.

Here, we do not set environment variables first, and directly click the Deploy button after importing the project to start deployment. The first deployment takes about 2 minutes.

After the deployment is complete, click the Continue to Dashboard button to enter the project management page.

View Project

On the project management page, you can see the access domain assigned by Vercel to your project. Click the domain to access your project.

At this point, your project has been successfully deployed via Vercel.

Next, you can let the new project officially go online by binding a custom domain, setting environment variables, configuring access statistics, etc.

Bind Custom Domain

Add Custom Domain

Click the Domains button in the upper right corner of the project management page to enter the domain management page.

Enter your custom domain and click the Save button to add the custom domain.

Here you can use a root domain or a subdomain.

Configure DNS Resolution

After adding the domain, click on the newly added domain to view the DNS resolution guide. Here you may be prompted to set a CNAME record or an A record.

Open the DNS resolution page of your domain registrar and add DNS resolution according to the above guide.

Access Project

Wait for the DNS resolution to take effect (usually within half an hour, but it may take up to 48 hours), and Vercel will generate an SSL certificate for the custom domain you added.

Access your custom domain, and you can see the online version of the website.

Set Environment Variables

You can set environment variables when creating a Vercel deployment for the first time, or modify environment variables after the project is deployed.

Fill in Environment Variable Content

You can create a .env.production file in the local project root directory, and then fill in the project's production environment variables.

# app
NEXT_PUBLIC_APP_URL = "https://your-domain.com"
NEXT_PUBLIC_APP_NAME = "Your App Name"

# theme
NEXT_PUBLIC_THEME = "default"

# appearance
NEXT_PUBLIC_APPEARANCE = "dark"

# database
DATABASE_URL = "postgresql://user:password@domain:port/database"
DATABASE_PROVIDER = "postgresql"
DB_SINGLETON_ENABLED = "false"

# auth
AUTH_SECRET = "xxx"

Remember to modify the above environment variable values according to your project information.

Set Environment Variables in Vercel

In the Setting -> Environment Variables page of Vercel project management, paste the environment variable content from the local .env.production file, and click the Save button to set the environment variables.

Redeploy

After setting the environment variables each time, select the latest deployment on the Deployments page of project management, and click the Redeploy button to redeploy the project.

After redeployment, the newly set environment variables will take effect.

Configure Access Statistics

You can choose to use Vercel's built-in access statistics or use third-party access statistics services.

You can configure Vercel's built-in access statistics by following these steps:

Enable Web Analytics

On the Analytics page of project management, click the Enable button to enable Vercel's Web Analytics access statistics function.

Note: Vercel's built-in access statistics function is a paid feature. Please evaluate whether to enable it yourself.

Configure Vercel Statistics Function

Enter the project management background, scroll to the Vercel Analytics panel on the Settings -> Analytics page, click the Enabled button to enable it, and then click the Save button to save the configuration.

You need to Configure Admin Access first to perform the above configuration.