PostsProjectsAbout
Saturday, June 21, 2025Deploy Ionic + Vue application with Nginx
Keven Client A. Cataluña @LinkedIn
Introduction

This guide provides step-by-step instructions for deploying an Ionic + Vue application using Nginx, from preparing the project build and configuring the server to enable the site and confirming the deployment.

Steps1. Clone the Ionic project into the web root directory
/var/www/html
    git clone git@github_development:kevenclient/kakeibo.git
2. Build the Ionic project
/var/www/html/kakeibo
    npm run build
3. Verify that the dist folder has been created
/var/www/html/kakeibo
    ls -la
  
      total 464
  drwxr-xr-x   9 root root   4096 Jul 14 04:46 .
  drwxr-xr-x   4 root root   4096 Jul 14 04:44 ..
  -rw-r--r--   1 root root     74 Jul 14 04:44 .browserslistrc
  -rw-r--r--   1 root root    256 Jul 14 04:44 .eslintignore
  -rw-r--r--   1 root root    483 Jul 14 04:44 .eslintrc.cjs
  drwxr-xr-x   8 root root   4096 Jul 14 04:44 .git
  -rw-r--r--   1 root root    417 Jul 14 04:44 .gitignore
  drwxr-xr-x   2 root root   4096 Jul 14 04:44 .vscode
  -rw-r--r--   1 root root    185 Jul 14 04:44 capacitor.config.ts
  -rw-r--r--   1 root root    483 Jul 14 04:44 cypress.config.ts
  drwxr-xr-x   3 root root   4096 Jul 14 04:46 dist
  -rw-r--r--   1 root root    903 Jul 14 04:44 index.html
  -rw-r--r--   1 root root     91 Jul 14 04:44 ionic.config.json
  drwxr-xr-x 441 root root  20480 Jul 14 04:46 node_modules
  -rw-r--r--   1 root root 370436 Jul 14 04:46 package-lock.json
  -rw-r--r--   1 root root   1094 Jul 14 04:44 package.json
  drwxr-xr-x   2 root root   4096 Jul 14 04:44 public
  drwxr-xr-x   5 root root   4096 Jul 14 04:44 src
  drwxr-xr-x   4 root root   4096 Jul 14 04:44 tests
  -rw-r--r--   1 root root    535 Jul 14 04:44 tsconfig.json
  -rw-r--r--   1 root root    184 Jul 14 04:44 tsconfig.node.json
  -rw-r--r--   1 root root    421 Jul 14 04:44 vite.config.ts
4. Create a new Nginx site configuration
/etc/nginx/sites-available/kakeibo
    server {
  root /var/www/html/kakeibo/dist;

  # Add index.php to the list if you are using PHP
  index index.html index.htm index.nginx-debian.html;

  server_name kakeibo.get-go.dev;

  location / {
    try_files $uri $uri/ /index.php?$query_string /index.html;
  }
}
5. Create a symlink to enable the new site configuration
/etc/nginx/sites-enabled
    sudo ln -s /etc/nginx/sites-available/kakeibo
6. Test the Nginx configuration
    sudo nginx -t
  
      nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
  nginx: configuration file /etc/nginx/nginx.conf test is successful
7. Reload Nginx to apply the changes
    sudo systemctl reload nginx
8. Verify the deployment by navigating to https://kakeibo.get-go.dev and you should see the Ionic + Vue project
Tags
IonicVue.jsNginx
Previous postDeploy Nuxt 3 static site with Nginx
Next postPoint Namecheap domain to DigitalOcean droplet
← Back to the posts