Deploy Ionic + Vue application with Nginx

How-to's Deploy Ionic + Vue application with Nginx

1. 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