Information about Deployment of website projects from A-Z

In short, the Server is essentially like your computer and it will run 24/7.

Step I.1 — Rent a server

Usually running the Linux operating system (usually Ubuntu) instead of Windows/MacOS like my computer, there will be no GUI (desktop screen, icons, mouse, ...) but will have to use a command line window (like a terminal), so you will have to get a little familiar with the server's operating system.

Server costs range from cheap to expensive, from a few $/month to infinite, for example some parties include:

• Vultr
• Hostinger
• DigitalOcean
• Linode
• AWS
• Contabo — Recently I often use this guy for production projects, good configuration, cheap price (but the admin page looks like it's from 2000)

Before, I used to buy AWS Lightsail to install side projects, but my account was locked so I switched to another one

Step I.2 — Get into that server

Essentially, it's about getting into that server for remote control (Team Viewer, Ultra View style). Here you should know the term SSH — SSH helps you control another Linux computer (server) from the command line window. Usually, after renting a server, you will be provided with information about SSH.

ssh root@IP_Public_Của_Server

Step I.3 — Play around if you're not familiar

Most servers are Linux, and will operate using a command line window instead of a GUI. Need to build 2 habits here:

• When you encounter a command you don't know → search to understand/memorize
• Search to convert familiar actions to server commands (for example: create a directory on Ubuntu, check if a package exists, install git, install nodejs, ...)

There are many ways to do this, but the most common is to use Git. Clone the project on the local machine and on the Server it will be the same (but remember, the operating system may be different).

For example, locally you need to install git, setup authentication with git or add an SSH key, or the easiest way is to use personal access token — then on the server the steps are the same, the only difference is the operation of another operating system — just search and you'll find it.

At this step, there will usually be 2 main types:

1. Static frontend — static frontend code or static output (HTML/CSS/JS or ReactJs, VueJs, ...)
2. Dynamic Backend / Frontend — dynamic backend or frontend code (with running process, with port instead of static build, NextJs, NuxtJs, ...)

Static frontend

If the project is pure HTML/CSS/JS, you don't need to do this step anymore → jump to the next step.

If they are frontend libraries/frameworks (ReactJs, VueJs), they will all provide the build function and when built, there will be folders like build, dist, output, etc. Read the docs related to building or running production to know.

The principle is that the technologies, running processes, accessing ports... are to make it easier for us to develop, but when running in production, it will build pure HTML/CSS/JS.

Dynamic Backend / Frontend

This one will be a bit more difficult than the frontend, but in essence it will be exactly the same way you make local code run.

Let's go back to the beginning when you started learning to code - what did you need to do to install the environment for the project to run (for example, you need to install Git, NodeJs, MongoDB, Postgres, ..., note that for the project to run, but for the devs, you don't need to - like you don't need to install an IDE ) you will have to do the same thing on the server (but the operating system may be different).

This place will need to do 2 main things: Run and check that it works.

III.1 — Environment settings

For example, the project needs NodeJs → check to see if NodeJs is available. If not, install it. The project needs MongoDB → check to see if MongoDB is available. If not, install it. After installing, check again. Almost every library has a way to check the version and status.

III.2 — Setup database if necessary

If the project needs a database, learn how to install the database, set it up and test it to see if the database is working - just one search will turn up a lot. For example: "Setup MongoDB Ubuntu".

III.3 — Setup Env if necessary

There will be information placed in env. If the project has this file, now you need to create an env file and configure it. Need to know commands and tools to edit files (style vi, vim, nano, ... choose 1, easiest is vi).

III.4 — Install dependencies if needed

Usually, the source code will use Dependency management tools — the NodeJs type is npm or yarn, PHP is composer, Python is pip, ... Now we will run the dependency installation command (type npm install).

III.5 — Test run dev mode

This is a dev test run to see if it works, the purpose is to check if the setup was correct. Exactly the same as running locally, why does it run here — for example npm run dev, yarn dev, ... etc. After running the test, turn it off.

▲ Next.js 16.0.7 (Turbopack)
- Local:    http://localhost:3000
- Network:  http://192.168.2.7:3000
- Environments: .env

✓ Starting...
✓ Ready in 981ms

III.6 — Run prod mode

This will be the mode that helps our website run 24/7. Instead of running additional tools to help devs effectively, Prod mode will optimize and only run the necessary parts. Frameworks have instructions for building and running this way — for example npm run build. There may be tools to help projects run code without needing to maintain a terminal, for example NodeJs will have PM2 - this depends on the library/framework.

The domain name is like a home address and the server is like a house - you already have a home, but if you want others to find it easily, you need an easy-to-read and easy-to-remember home address. Just buy 1 domain name.

There are many domain name providers like tenten, matbao, hostinger, ... (I often buy from hostinger). Actually, buying a domain name is the same, you can buy it wherever you like. Prices range from a few tens of thousands to several million. Free is also up to you.

After purchasing the domain name, look for a section called DNS. The purpose of this function is to set where this domain name will point. Just imagine DNS as a phone book — it stores and directs where a domain name will lead. Now you will need to point the domain name to your server IP.

For example: Record A → 123.456.789.xxx

This place is divided into 2 branches: Static Frontend and Dynamic Backend / Frontend. But basically you will need to know something called Reverse Proxy and the basic request diagram is as follows:

User/Browser → Domain → DNS → Server → Reverse Proxy → Your App

In the previous step, we have already pointed the domain to the server. When accessing the domain name, it will be pointed to the server, but how to get the server to accept and receive that request and then point it to our code requires a guy called Reverse Proxy. If you have heard of guys like Nginx, Apache, ... then these guys have such functions.

V.1 — Reverse Proxy Settings

It's up to you to choose, but usually it also follows the ecosystem: NodeJs uses Nginx a lot, PHP uses Apache a lot, ... and so on (I often use Nginx).

Similar to installing libraries - after installation, check to see if it has been installed, check the status.

V.2 — Config Reverse Proxy

We have made the domain name point to the server in the step above, now we need to define in the reverse proxy config file: which domain name to accept, when this domain name arrives, where to point. There will be 2 major styles:

• Static frontend: points to the HTML/CSS/JS folder
• Dynamic Backend / Frontend: points to port (eg localhost:3000)

Nginx config example for Dynamic Backend / Frontend:

server {
    listen 80;
    server_name your_domain;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

This is the Nginx file to point to the port, and pointing to the directory is the same, please try searching.

In theory, at this step, when accessing the domain name, you will see the application, and deploying here is basically done. But if you are a newbie, this rate will be very low — so I have one more section called "A few extra things" please read on.

Life is not like a dream, and the code on the server often crashes the first time you press run. This section will equip you with thinking to handle things when things don't work, and make the website more "reputable".

VI.1 — Basic Debug

When typing the domain name and the website doesn't appear, don't panic and type the code haphazardly. Let's calmly imagine Request's path:

Browser → Domain → Server → Nginx (Guardian) → Your App (Code)

Wherever the error is, fix it there:

• "Site can't be reached": The security guard (Nginx) is sleeping or dead. Check if Nginx is running.
• Error 502 Bad Gateway: This is the most common error. That means the security guard (Nginx) is still alive, but your App inside is dead, or the App is running on the wrong port than Nginx knows.
• Error 500 or App crash: If you can access the website but the page is blank or shows a logic error, it's due to your code. At this time, you must Read Logs. Every server has a file that saves error history (Error Log). When you open it, you will immediately know which line of code is wrong.

VI.2 — SSL/HTTPS — The green lock

In this day and age, if the website displays the word "Not Secure" in red, no one dares to access it. You need to install SSL so that the website has a green lock (HTTPS protocol).

• Essence: It is a certificate to authenticate that your website is safe.
• How ​​to do it: No need to buy anything complicated, use a free tool called Certbot (Let's Encrypt). Just run it, it will automatically ask for a certificate and automatically configure Nginx for you. Very leisurely.

VI.3 — Firewall — Door blocker

Many times, the website is still not accessible after just setting up from A-Z. The reason is that the Server (or Server provider like AWS, Vultr...) is closed and no one is allowed in.

• Essence: By default, all server ports are closed for security.
• How ​​to do: If you want people to visit the website, you must Open Port: port 80 (for HTTP) and port 443 (for HTTPS).