Step-by-Step Guide to Deploying a Front-End Project from Scratch Using Nginx and VMware

Many front‑end developers know how to write code but lack experience in deploying projects; this guide walks through the entire process from zero to a live site.

Environment Setup

The first step is to prepare a server and configure nginx . If you already have a server, you can connect to it directly; otherwise, you can create a virtual machine using VMware and a CentOS image.

Server

Use Xshell (or a similar SSH client) to connect to the remote server. For those without a physical server, install VMware, create a new VM, attach the CentOS ISO, set the username/password, and start the VM. Ensure that Intel VT‑x is enabled in the BIOS if you encounter related errors.

Remote Connection

Configure the virtual network in VMware, then check the host’s IP settings. The VM’s subnet must match the host’s subnet, and the gateway IP must align with the host’s default gateway. After configuring NAT mode, open the VM’s console and run ifconfig to obtain the VM’s IP address.

Use an FTP client such as Xftp to connect to the VM (username root ) and transfer files.

Front‑End Resources

Upload the built dist directory to the server, e.g., /var/www/test . After uploading, accessing the VM’s IP in a browser will show nothing because Nginx has not been configured to serve the files.

Nginx Configuration

Install Nginx on the VM:

sudo yum install epel-release
sudo yum install nginx

Start Nginx:

sudo systemctl start nginx

Edit the configuration file /etc/nginx/nginx.conf (or create a site‑specific file) to map the root to the uploaded front‑end directory:

server {
    listen 80;
    server_name localhost;
    location / {
        root /var/www/test/;
        index index.html index.htm;
    }
    # other default settings omitted for brevity
}

After saving the changes, restart Nginx:

sudo systemctl restart nginx

Now, opening the VM’s IP address in a browser should display the deployed front‑end application.