[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"global-header-tutorials-static":3,"article-configure-nginx-as-reverse-proxy-in-nuxt":4,"initial-similar-fetch":18},[],{"alias":5,"title":6,"description":7,"content":8,"thumbnail":9,"keywords":10,"categories":14,"tags":16,"createdAt":17},"configure-nginx-as-reverse-proxy-in-nuxt","Configure Nginx as a reverse proxy in Nuxt application","Deploy and set up the nginx in Nuxt application","{\"type\":\"doc\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"In this tutorial, we are going to set up nginx in our Nuxt application. Nginx allows for managing the SSL, load balancing, port forwarding, static file caching, etc.\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Importance of using Nginx\"}]},{\"type\":\"bulletList\",\"content\":[{\"type\":\"listItem\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"Port Mapping\"},{\"type\":\"text\",\"text\":\": It allows mapping the Nuxt default port 3000 to 80\u002F443 i.e user can access the site using example.com, not example.com:3000\"}]}]},{\"type\":\"listItem\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"Security\"},{\"type\":\"text\",\"text\":\": It hides the internal app server\"}]}]},{\"type\":\"listItem\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"SSL Setup\"},{\"type\":\"text\",\"text\":\": It handles easy SSL setup for our app\"}]}]}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Prerequisites\"}]},{\"type\":\"bulletList\",\"content\":[{\"type\":\"listItem\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Ready to use the Nuxt application setup deployed to the server. Here is the full guide on \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https:\u002F\u002Fcsbyte.com\u002Fblog\u002Fhow-to-deploy-nuxt-app-in-ubuntu-server\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null,\"title\":null}}],\"text\":\"deploying a Nuxt app in an Ubuntu server\"}]}]}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Install Nginx\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Installing nginx is straight forward to ubuntu server\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"sudo apt update\\nsudo apt install nginx\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Configure Nginx\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":3},\"content\":[{\"type\":\"text\",\"text\":\"Create a configuration file\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Navigate to the nginx directory:\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"cd \u002Fetc\u002Fnginx\u002Fsites-available\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Create a config file \"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"sudo vm nuxt-app\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Here, give your file name instead of nuxt-app, like \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"csbyte.com\"},{\"type\":\"text\",\"text\":\" or \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"csbyte\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Add the following configuration:\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"server {\\n    listen 80;\\n    server_name yourdomain.com www.yourdomain.com;\\n\\n    location \u002F {\\n        # This points to your Nuxt Nitro server\\n        proxy_pass http:\u002F\u002Flocalhost:3000;\\n        proxy_http_version 1.1;\\n        proxy_set_header Upgrade $http_upgrade;\\n        proxy_set_header Connection 'upgrade';\\n        proxy_set_header Host $host;\\n        proxy_cache_bypass $http_upgrade;\\n    }\\n}\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Now save the file, press Esc and use the following command: \"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\":wq!\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":3},\"content\":[{\"type\":\"text\",\"text\":\"Enable and test status\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"The config file needs to create a symbolic link to be used by nginx. Use the following command:\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"sudo ln -s \u002Fetc\u002Fnginx\u002Fsites-available\u002Fmy-nuxt-app \u002Fetc\u002Fnginx\u002Fsites-enabled\u002F\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"sudo nginx -t\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"The successful output will look like this:\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"nginx: the configuration file \u002Fetc\u002Fnginx\u002Fnginx.conf syntax is ok\\nnginx: configuration file \u002Fetc\u002Fnginx\u002Fnginx.conf test is successful\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":3},\"content\":[{\"type\":\"text\",\"text\":\"Reload Nginx\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"sudo systemctl restart nginx\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Now, if you open your domain, you can see the Nuxt app running.\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Set up SSL (HTTPS)\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"For SSL setup, we are using certbort\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Install Certbort:\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"sudo apt install python3-certbot-nginx\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Run the domain to connect to HTTPS\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"sudo certbot --nginx -d yourdomain.com\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"This will automatically update your previously created nginx config file with SSL certificates and set up a redirect from HTTP to HTTPS.\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"You can verify that the config file looks like this: \"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"        proxy_set_header X-Real-IP $remote_addr;\\n        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\\n        proxy_set_header X-Forwarded-Proto $scheme;\\n    }\\n\\n    listen 443 ssl; # managed by Certbot\\n    ssl_certificate \u002Fetc\u002Fletsencrypt\u002Flive\u002Fyour-domain.com\u002Ffullchain.pem; # managed by Certbot\\n    ssl_certificate_key \u002Fetc\u002Fletsencrypt\u002Flive\u002Fyour-domain.com\u002Fprivkey.pem; # managed by Certbot\\n    include \u002Fetc\u002Fletsencrypt\u002Foptions-ssl-nginx.conf; # managed by Certbot\\n    ssl_dhparam \u002Fetc\u002Fletsencrypt\u002Fssl-dhparams.pem; # managed by Certbot\\n\\n}\\nserver {\\n    if ($host = your-domain.com) {\\n        return 301 https:\u002F\u002F$host$request_uri;\\n    } # managed by Certbot\\n\\n\\n    listen 80;\\n    server_name your-domain.com;\\n    return 404; # managed by Certbot\\n\\n\\n}\\n\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Nginx Commands\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Syntax check:\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"sudo nginx -t\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Check the Nginx service status:\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"sudo systemctl status nginx\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Apply the changes:\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"sudo systemctl reload nginx\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Restart Nginx:\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"sudo systemctl restart nginx\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"View the error logs:\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"sudo tail -f \u002Fvar\u002Flog\u002Fnginx\u002Ferror.log\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"View the user access\u002Frequest logs:\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"bash\"},\"content\":[{\"type\":\"text\",\"text\":\"sudo tail -f \u002Fvar\u002Flog\u002Fnginx\u002Faccess.log\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"We had set up our Nuxt app to open with our domain with a fully secure HTTPS\"}]}]}","\u002Fuploads\u002Fthumbnails\u002F23c9fd84-6a39-40f1-876f-ba81011ccf06_nginx_nux.jpeg",[11,12,13],"deploy","nuxt","nginx",[15],"NuxtJS",[12],"2026-05-03T10:00:48.702Z",[19,26,32,38,44],{"alias":20,"title":21,"description":22,"thumbnail":23,"createdAt":24,"tutorialAlias":25,"lessonAlias":25},"securing-nuxt-ssr-app-with-cookies-sessions","Securing Nuxt SSR Apps with cookies sessions","Nuxt 4 App how to create an authentication system in SSR mode","\u002Fuploads\u002Fthumbnails\u002F6088642b-8dcb-4d13-bb68-f90084ddbe04_nuxt_ssr_logi.jpeg","2026-05-18T14:36:54.441Z",null,{"alias":27,"title":28,"description":29,"thumbnail":30,"createdAt":31,"tutorialAlias":25,"lessonAlias":25},"static-assets-vs-dynamic-routing-collision","Static Assets vs. Dynamic Routing Collision","Resolving the Static Assets vs. Dynamic Routing Collision","\u002Fuploads\u002Fthumbnails\u002F0f4d63d1-8ca4-472f-8f6d-9bd6919a88b9_nuxt_collisio.jpeg","2026-05-16T08:36:46.316Z",{"alias":33,"title":34,"description":35,"thumbnail":36,"createdAt":37,"tutorialAlias":25,"lessonAlias":25},"environment-variables-in-nuxt","The Definitive Guide to Environment Variables in Nuxt 4","How to create Environment Variables in Nuxt 4","https:\u002F\u002Fapi.csbyte.com\u002Fuploads\u002Feditor\u002Fe8a3c4e7-98a6-4114-a8c8-49ebb4a9522f_nuxt_env_cloudflare.png","2026-05-04T12:35:52.854Z",{"alias":39,"title":40,"description":41,"thumbnail":42,"createdAt":43,"tutorialAlias":25,"lessonAlias":25},"how-to-deploy-nuxt-app-in-ubuntu-server","How to deploy Nuxt app in Ubuntu Server","Deploy Nuxt App in Linux VM","https:\u002F\u002Fapi.csbyte.com\u002Fuploads\u002Feditor\u002F808571e8-1ce9-4e1b-901f-7afd81f4c7df_pm2.png","2026-05-02T08:11:55.437Z",{"alias":45,"title":46,"description":47,"thumbnail":48,"createdAt":49,"tutorialAlias":25,"lessonAlias":25},"how-to-deploy-our-nuxt-application-to-cloudflare","How to deploy our nuxt application to cloudflare","Deploy our Nuxt application to Cloudflare using Wrangler","https:\u002F\u002Fapi.csbyte.com\u002Fuploads\u002Feditor\u002F19c8ef54-4006-4bfa-a07d-b2dd5e401c22_nuxt_deploy.png","2026-05-02T02:23:45.510Z"]