Step by Step Deploy Project in VPS

deploy-project.md

1. Clone the project into server & install it

2. install nginx

$ sudo apt install nginx

3. Config nginx file

$ sudo nano /etc/nginx/sites-available/your_domain

replace the config with this:
- for static

server {
    listen 80;
    server_name your_domain.com;

    location / {
        root /path/to/your/vue/project/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

- for reverse proxy

server {
    listen 80;
    server_name your_domain.com;

    location / {
        proxy_pass http://localhost:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

link the conf

sudo ln -s /etc/nginx/sites-available/your_domain /etc/nginx/sites-enabled/

don't forget to verify the nginx config is valid & no error

$ sudo nginx -t

if your project is static web, dont forget to make your project folder permission accessed, in this case i'm using vue 2 js project

$ ls -ld /home/your_username/ /home/your_username/your_project/
$ sudo chmod 755 /home/your_username/ /home/your_username/your_project/
$ sudo -u www-data ls /home/your_username/your_project/dist
$ sudo chmod -R 777 /home/your_username/your_project/dist
$ sudo chown -R www-data:www-data /home/your_username/your_project/dist

then restart or start the nginx

$ sudo service nginx restart # or sudo service nginx start

4. Install certbot for ssl

in this case im using ubuntu 22.04

$ sudo apt install certbot python3-certbot-nginx

after finish verify if certbot install

$ certbot --version

5. Config Certbot

run cerbot for generate the certificate ssl

$ sudo certbot --nginx -d your_domain

certbot automatic set the ssl config in nginx config

then make sure if nginx config no error

$ sudo nginx -t

after that restart the nginx

$ sudo service nginx restart

that all, now u can access your web with https