Modul praktis Level 2 VibeKoding: Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur).Modul praktis Level 2 VibeKoding: Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur).
> 💡 What does "putting a website online" mean? Also called "going live" or "deploying/publishing". A website you built on your own computer can only be opened by you. Putting it online means placing it on a server that runs 24/7, so anyone can type a URL in their browser and visit it — just like a Word doc only you can read becomes visible to everyone once you post it to a blog; the difference is that this time you're publishing a full website.> 💡 What does "putting a website online" mean? Also called "going live" or "deploying/publishing". A website you built on your own computer can only be opened by you. Putting it online means placing it on a server that runs 24/7, so anyone can type a URL in their browser and visit it — just like a Word doc only you can read becomes visible to everyone once you post it to a blog; the difference is that this time you're publishing a full website.
In this tutorial, we'll walk through the easiest way to get a site online — no server to buy, no DevOps to learn. Just connect your GitHub repo, click a few buttons, and your site is live. We cover four popular platforms: Tencent Cloud CloudBase, Vercel, Netlify, and Zeabur.In this tutorial, we'll walk through the easiest way to get a site online — no server to buy, no DevOps to learn. Just connect your GitHub repo, click a few buttons, and your site is live. We cover four popular platforms: Tencent Cloud CloudBase, Vercel, Netlify, and Zeabur.
You might wonder: if everything ends up "on a server," why not just buy your own server and deploy there? The answer: platforms handle all the messy parts for you.You might wonder: if everything ends up "on a server," why not just buy your own server and deploy there? The answer: platforms handle all the messy parts for you.
If you deploy everything manually, a project usually involves many steps:If you deploy everything manually, a project usually involves many steps:
You first need to buy or rent a cloud server from a provider such as Alibaba Cloud, Tencent Cloud, or AWS EC2. Then you choose its region, CPU, memory, and storage, and learn how to connect to it remotely, often through SSH.You first need to buy or rent a cloud server from a provider such as Alibaba Cloud, Tencent Cloud, or AWS EC2. Then you choose its region, CPU, memory, and storage, and learn how to connect to it remotely, often through SSH.
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
Web apps only run under the correct environment. A Node.js project needs Node installed. A Python project needs Python and its dependencies. If the versions do not match, the app may fail to start.Web apps only run under the correct environment. A Node.js project needs Node installed. A Python project needs Python and its dependencies. If the versions do not match, the app may fail to start.
You need to move your local code and assets to the server, often via Git or file-transfer tools. Large projects can make this step frustrating if uploads break halfway through.You need to move your local code and assets to the server, often via Git or file-transfer tools. Large projects can make this step frustrating if uploads break halfway through.
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
After upload, you need to start the app and check whether the assigned address works. If not, the problem may be a firewall-blocked port, or it may be an application bug. In that case, you need to inspect logs.After upload, you need to start the app and check whether the assigned address works. If not, the problem may be a firewall-blocked port, or it may be an application bug. In that case, you need to inspect logs.
Every code update usually means another upload and restart. If the server crashes, you may need to restart services manually or configure a process manager to keep them alive.Every code update usually means another upload and restart. If the server crashes, you may need to restart services manually or configure a process manager to keep them alive.
Platforms such as CloudBase, Vercel, Netlify, and Zeabur exist to eliminate much of that complexity. They automate the boring parts:Platforms such as CloudBase, Vercel, Netlify, and Zeabur exist to eliminate much of that complexity. They automate the boring parts:
In many cases, you just connect a GitHub repository or upload your code, and the platform does the rest.In many cases, you just connect a GitHub repository or upload your code, and the platform does the rest.
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
------
| Platform | Main strengths | Best for | Free tier |
|---|---|---|---|
| Tencent Cloud CloudBase | Fast access within mainland China, strong WeChat ecosystem integration | China-focused users, WeChat Mini Program support | Yes |
| Vercel | Excellent support for frontend frameworks, tight GitHub integration | Modern React/Vue/Next.js frontend projects | Yes |
| Netlify | Broad feature set, great Git workflow, form handling, auth support | Static sites that also need forms or auth | Yes |
| Zeabur | Flexible service combinations and many templates | More complex projects, including tools like Dify and n8n | About $5/month in free quota |
------
Tencent Cloud CloudBase is Tencent's integrated cloud backend platform and is especially friendly for developers targeting domestic Chinese users.Tencent Cloud CloudBase is Tencent's integrated cloud backend platform and is especially friendly for developers targeting domestic Chinese users.
Its advantages include:Its advantages include:
Visit the [Tencent Cloud CloudBase Console](https://console.cloud.tencent.com/tcb) and log in with WeChat or QQ.Visit the [Tencent Cloud CloudBase Console](https://console.cloud.tencent.com/tcb) and log in with WeChat or QQ.
Click Create Environment and choose an environment name such as my-web-app.Click Create Environment and choose an environment name such as my-web-app.
> ⚠️ Note: the free trial version of CloudBase often requires a redemption code. You usually need to follow the CloudBase official account and obtain a code there.> ⚠️ Note: the free trial version of CloudBase often requires a redemption code. You usually need to follow the CloudBase official account and obtain a code there.
Inside the environment management screen, enable the Static Website Hosting feature. Once enabled, you will receive a default public domain.Inside the environment management screen, enable the Static Website Hosting feature. Once enabled, you will receive a default public domain.
CloudBase supports several deployment methods:CloudBase supports several deployment methods:
CloudBase offers three main workflows:CloudBase offers three main workflows:
Option 1: upload a local projectOption 1: upload a local project
Local Project Deploymentchoose Local Project Deploymentdist or build directorytypically upload a dist or build directoryOption 2: use a templateOption 2: use a template
Option 3: deploy from GitOption 3: deploy from Git
npm run buildset the build command, such as npm run build> 💡 Tip: you can also deploy from the command line:> 💡 Tip: you can also deploy from the command line:
>>
> ```bash> ```bash
> # Install CloudBase CLI> # Install CloudBase CLI
> npm install -g @cloudbase/cli> npm install -g @cloudbase/cli
> # Log in> # Log in
> tcb login> tcb login
> # Deploy> # Deploy
> tcb hosting deploy ./dist -e your-env-id> tcb hosting deploy ./dist -e your-env-id
> ```> ```
CloudBase also supports binding your own domain and applying a free HTTPS certificate.CloudBase also supports binding your own domain and applying a free HTTPS certificate.
------
Vercel is one of the most popular frontend deployment platforms in the world and is especially good for React, Vue, and Next.js projects.Vercel is one of the most popular frontend deployment platforms in the world and is especially good for React, Vue, and Next.js projects.
Its main strengths:Its main strengths:
> ⚠️ Note: in some mainland-China network environments, Vercel may be less stable than domestic options such as CloudBase.> ⚠️ Note: in some mainland-China network environments, Vercel may be less stable than domestic options such as CloudBase.
Visit [Vercel](https://vercel.com) and sign in with GitHub.Visit [Vercel](https://vercel.com) and sign in with GitHub.
Add New ProjectClick Add New ProjectVercel often detects the framework automatically:Vercel often detects the framework automatically:
| Framework | Build command | Output directory |
|---|---|---|
| React | npm run build | build |
| Vue | npm run build | dist |
| Next.js | next build | - |
| Plain HTML | - | project root |
If detection fails, configure it manually:If detection fails, configure it manually:
Click Deploy and wait for the build to complete. A successful project receives a xxx.vercel.app domain.Click Deploy and wait for the build to complete. A successful project receives a xxx.vercel.app domain.
Use the Domains section in project settings to bind your own domain. HTTPS is handled automatically.Use the Domains section in project settings to bind your own domain. HTTPS is handled automatically.
------
Netlify is another strong frontend deployment platform, especially for static sites and single-page applications.Netlify is another strong frontend deployment platform, especially for static sites and single-page applications.
Its strengths:Its strengths:
> ⚠️ Note: Netlify may not be as fast as CloudBase for domestic Chinese users.> ⚠️ Note: Netlify may not be as fast as CloudBase for domestic Chinese users.
Visit [Netlify](https://www.netlify.com) and sign up with GitHub, GitLab, Bitbucket, or email.Visit [Netlify](https://www.netlify.com) and sign up with GitHub, GitLab, Bitbucket, or email.
Add new site → Import an existing projectClick Add new site → Import an existing project| Framework | Build command | Publish directory |
|---|---|---|
| React | npm run build | build |
| Vue | npm run build | dist |
| Angular | ng build | dist/ |
| Next.js | next build | out |
| Plain HTML | - | . |
Click Deploy site. Once it succeeds, you will receive a xxx.netlify.app domain.Click Deploy site. Once it succeeds, you will receive a xxx.netlify.app domain.
Domain managementGo to Domain managementNetlify can capture form submissions without requiring a dedicated backend.Netlify can capture form submissions without requiring a dedicated backend.
html <form name="contact" netlify> <p> <label>Name: <input type="text" name="name" /></label> </p> <p> <label>Email: <input type="email" name="email" /></label> </p> <p> <label>Message: <textarea name="message"></textarea></label> </p> <p> <button type="submit">Send</button> </p> </form>
After deployment, Netlify automatically stores submission data and can forward it to email or other services.After deployment, Netlify automatically stores submission data and can forward it to email or other services.
Netlify also supports serverless functions, which are useful for small APIs without maintaining a full backend.Netlify also supports serverless functions, which are useful for small APIs without maintaining a full backend.
For example:For example:
javascript exports.handler = async (event, context) => { return { statusCode: 200, body: JSON.stringify({ message: "Hello from Netlify!" }) }; };
After deployment, the function is accessible at:After deployment, the function is accessible at:
https://your-domain/.netlify/functions/hellohttps://your-domain/.netlify/functions/hello
Netlify provides a CLI:Netlify provides a CLI:
bash # Install Netlify CLI npm install -g netlify-cli # Log in netlify login # Start local development netlify dev # Test functions locally netlify functions:serve
This lets you simulate Netlify forms and function behavior locally before deploying.This lets you simulate Netlify forms and function behavior locally before deploying.
------
Zeabur is a newer deployment platform that is especially useful for more complex projects involving multiple services.Zeabur is a newer deployment platform that is especially useful for more complex projects involving multiple services.
Its main strengths:Its main strengths:
In earlier chapters, we already touched on Dify briefly. Now we can launch a full Dify service through [Zeabur](https://zeabur.com/projects) very easily.In earlier chapters, we already touched on Dify briefly. Now we can launch a full Dify service through [Zeabur](https://zeabur.com/projects) very easily.
First, open the [console page](https://zeabur.com/projects):First, open the [console page](https://zeabur.com/projects):
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
In that interface, you will see a set of service blocks. At the top are options such as Agent, Servers, Docs, and Templates:In that interface, you will see a set of service blocks. At the top are options such as Agent, Servers, Docs, and Templates:
> An image can be understood as a packaged runtime environment + application state. If a service has already been configured successfully on one machine, it can be packed into an image and reused elsewhere.> An image can be understood as a packaged runtime environment + application state. If a service has already been configured successfully on one machine, it can be packed into an image and reused elsewhere.
In the upper-right corner, you can also see your balance. By default, Zeabur usually gives you a small monthly free quota, roughly around 5 USD worth of usage.In the upper-right corner, you can also see your balance. By default, Zeabur usually gives you a small monthly free quota, roughly around 5 USD worth of usage.
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
You can click the balance to inspect daily usage:You can click the balance to inspect daily usage:
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
Now let's create a Dify service.Now let's create a Dify service.
Start by clicking New Project on the [console homepage](https://zeabur.com/projects):Start by clicking New Project on the [console homepage](https://zeabur.com/projects):
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
Zeabur supports several ways to create a service:Zeabur supports several ways to create a service:
Connect your GitHub account and deploy directly from a repository.Connect your GitHub account and deploy directly from a repository.
Start from a built-in app template such as Dify or n8n.Start from a built-in app template such as Dify or n8n.
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
Deploy databases such as MySQL or MongoDB.Deploy databases such as MySQL or MongoDB.
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
Deploy JavaScript or Python functions.Deploy JavaScript or Python functions.
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
Upload a local folder and let Zeabur detect how to run it.Upload a local folder and let Zeabur detect how to run it.
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
Deploy from an already built Docker image.Deploy from an already built Docker image.
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
Deploy directly from a project you are editing in Cursor.Deploy directly from a project you are editing in Cursor.
If you want to deploy Dify, the easiest path is Template. Search for dify, choose a version you like, and continue.If you want to deploy Dify, the easiest path is Template. Search for dify, choose a version you like, and continue.
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
Then choose any project name. Zeabur will generate a temporary domain based on that name.Then choose any project name. Zeabur will generate a temporary domain based on that name.
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
After creation, you will see multiple services starting one after another. Dify is not a single program, but rather a group of coordinated services, so you need to wait until they are all running.After creation, you will see multiple services starting one after another. Dify is not a single program, but rather a group of coordinated services, so you need to wait until they are all running.
In many setups, you can click the main Dify app to get the access address. In this example, however, the final entry point is exposed through nginx, so you need to open the nginx service and find the public service address there.In many setups, you can click the main Dify app to get the access address. In this example, however, the final entry point is exposed through nginx, so you need to open the nginx service and find the public service address there.
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
After waiting a bit, you should see the Dify login screen. Register an account with your email and password, and your own Dify service is ready.After waiting a bit, you should see the Dify login screen. Register an account with your email and password, and your own Dify service is ready.
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
You can also launch n8n in a similar way if you want another AI workflow tool:You can also launch n8n in a similar way if you want another AI workflow tool:
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
To explore Zeabur's more advanced usage, let's deploy something simpler first: a Snake game generated with Trae.To explore Zeabur's more advanced usage, let's deploy something simpler first: a Snake game generated with Trae.
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
Trae can generate a browser-based Snake game from plain HTML very easily. Once the project is created locally, you can upload the whole folder to Zeabur using the local-project deployment method described above.Trae can generate a browser-based Snake game from plain HTML very easily. Once the project is created locally, you can upload the whole folder to Zeabur using the local-project deployment method described above.
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
After deployment, you will enter the service details page:After deployment, you will enter the service details page:
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
Click Network on the left, find Public Address, and click Generate Domain to create a public URL.Click Network on the left, find Public Address, and click Generate Domain to create a public URL.
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
Once that address is generated, opening it in the browser will let you play your Snake game publicly:Once that address is generated, opening it in the browser will let you play your Snake game publicly:
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
This same method works well for other static HTML-based web apps too.This same method works well for other static HTML-based web apps too.
Now let's deploy a React app instead of a plain HTML app. Compared with static HTML, React is a more modern and component-based frontend framework, and it is common in production applications.Now let's deploy a React app instead of a plain HTML app. Compared with static HTML, React is a more modern and component-based frontend framework, and it is common in production applications.
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
In Trae, you can simply say:In Trae, you can simply say:
Help me refactor this code into a React architecture.Help me refactor this code into a React architecture.
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
However, React apps are a bit more demanding to deploy because they rely on a build toolchain and a more structured project layout.However, React apps are a bit more demanding to deploy because they rely on a build toolchain and a more structured project layout.
One especially important issue is the port. A local React development server often listens on port 3000 by default. Zeabur, however, expects the deployed app to listen on port 8080.One especially important issue is the port. A local React development server often listens on port 3000 by default. Zeabur, however, expects the deployed app to listen on port 8080.
If your React app still listens on 3000, the deployment may fail because Zeabur cannot route traffic to it correctly.If your React app still listens on 3000, the deployment may fail because Zeabur cannot route traffic to it correctly.
You can think of the IP address as the building address and the port number as the room number. Together, IP:port points to a specific service.You can think of the IP address as the building address and the port number as the room number. Together, IP:port points to a specific service.
Most websites do not explicitly show a port because browsers automatically assume the default ports:Most websites do not explicitly show a port because browsers automatically assume the default ports:
80 for HTTP80 for HTTP443 for HTTPS443 for HTTPSBut for app-specific services such as React development servers (3000) or Zeabur deployments (8080), the port becomes important.But for app-specific services such as React development servers (3000) or Zeabur deployments (8080), the port becomes important.
When a program listens on a port, it is telling the operating system:When a program listens on a port, it is telling the operating system:
I am waiting here for incoming network requests. Send them to me.I am waiting here for incoming network requests. Send them to me.
In the building analogy, the IP is the building address, and the port is the room number. The React dev server opens room 3000 and tells the building manager, "Any requests addressed to room 3000 should be delivered to me."In the building analogy, the IP is the building address, and the port is the room number. The React dev server opens room 3000 and tells the building manager, "Any requests addressed to room 3000 should be delivered to me."
When you run npm start locally, React commonly chooses port 3000. Zeabur, however, is designed to work with apps listening on 8080, so you need to change the default.When you run npm start locally, React commonly chooses port 3000. Zeabur, however, is designed to work with apps listening on 8080, so you need to change the default.
The easiest way is simply to ask Trae:The easiest way is simply to ask Trae:
Please help me change the default port of this React project to 8080.Please help me change the default port of this React project to 8080.
Trae can modify the relevant configuration for you. After that, rebuild the project and upload it to Zeabur again.Trae can modify the relevant configuration for you. After that, rebuild the project and upload it to Zeabur again.
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
Once you configure the public network address just as you did for the HTML project, the React app can also be served successfully.Once you configure the public network address just as you did for the HTML project, the React app can also be served successfully.
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
The same idea applies to any other app that needs a port adjustment before deployment.The same idea applies to any other app that needs a port adjustment before deployment.
------
Because server resources cost money, you should always get in the habit of stopping services you are no longer using.Because server resources cost money, you should always get in the habit of stopping services you are no longer using.
Open the project's Settings:Open the project's Settings:
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
Scroll to the bottom, and you will see controls like the following:Scroll to the bottom, and you will see controls like the following:
🖼️ Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)Rilis Web Mudah: Deploy 1-Klik PaaS (Vercel / Zeabur)
You can:You can:
Suspend All Services to pause everything and reduce costclick Suspend All Services to pause everything and reduce costRestart All Services to restart services if something is stuckclick Restart All Services to restart services if something is stuckDelete Project if you are sure you no longer need itclick Delete Project if you are sure you no longer need it------
In this tutorial, we introduced four common deployment platforms:In this tutorial, we introduced four common deployment platforms:
Which one you choose depends on your needs:Which one you choose depends on your needs:
No matter which platform you choose, the deployment workflow is conceptually similar:No matter which platform you choose, the deployment workflow is conceptually similar:
prepare the code → choose a platform → configure the build → deploy itprepare the code → choose a platform → configure the build → deploy it
Once you understand that loop, you can start publishing your own projects for the world to use.Once you understand that loop, you can start publishing your own projects for the world to use.