Deploy Nuxt 3 static site with Nginx

How-to's Deploy Nuxt 3 static site with Nginx

1. Clone the Nuxt project into the web root directory

/var/www/html

git clone git@github_development:kevenclient/get-go.git

2. Disable the server-side rendering (SSR)

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  ...
  ssr: false,
})

3. Generate the static files

/var/www/html/get-go

npm run generate

4. Verify that the dist folder has been created

/var/www/html/get-go

ls -la

total 548
drwxr-xr-x  17 root root   4096 Jul 11 11:35 .
drwxr-xr-x   4 root root   4096 Jul 11 13:01 ..
drwxr-xr-x   8 root root   4096 Jul 11 11:34 .git
-rw-r--r--   1 root root    193 Jul 11 11:33 .gitignore
drwxr-xr-x   7 root root   4096 Jul 11 11:35 .nuxt
drwxr-xr-x   3 root root   4096 Jul 11 11:35 .output
-rw-r--r--   1 root root    842 Jul 11 11:33 README.md
drwxr-xr-x   4 root root   4096 Jul 11 11:33 assets
drwxr-xr-x   2 root root   4096 Jul 11 11:33 components
drwxr-xr-x   2 root root   4096 Jul 11 11:33 composables
drwxr-xr-x   2 root root   4096 Jul 11 11:33 data
lrwxrwxrwx   1 root root     35 Jul 11 11:35 dist -> /var/www/html/get-go/.output/public
drwxr-xr-x   2 root root   4096 Jul 11 11:33 enums
drwxr-xr-x   2 root root   4096 Jul 11 11:33 interfaces
drwxr-xr-x   2 root root   4096 Jul 11 11:33 layouts
drwxr-xr-x   2 root root   4096 Jul 11 11:33 middleware
drwxr-xr-x 570 root root  20480 Jul 11 11:34 node_modules
-rw-r--r--   1 root root    383 Jul 11 11:33 nuxt.config.ts
-rw-r--r--   1 root root 448627 Jul 11 11:34 package-lock.json
-rw-r--r--   1 root root    477 Jul 11 11:33 package.json
drwxr-xr-x   5 root root   4096 Jul 11 11:33 pages
drwxr-xr-x   2 root root   4096 Jul 11 11:33 public
drwxr-xr-x   2 root root   4096 Jul 11 11:33 server
-rw-r--r--   1 root root    281 Jul 11 11:33 tailwind.config.js
-rw-r--r--   1 root root     94 Jul 11 11:33 tsconfig.json

5. Update the default Nginx site configuration

/etc/nginx/sites-available/default

# Default server configuration
server {
  listen 80 default_server;
  listen [::]:80 default_server;

  root /var/www/html/get-go/dist;

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

  server_name _;

  location / {
    try_files $uri $uri/ /index.php?$query_string /index.html;
  }
}

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://get-go.dev and you should see the Nuxt 3 project