[{"data":1,"prerenderedAt":26},["ShallowReactive",2],{"article-production-ready-vue-3-vite-deployment-on-ubuntu-with-nginx":3},{"id":4,"title":5,"slug":6,"summary":7,"thumbnail":8,"category":9,"tags":14,"categoryId":10,"tagIds":20,"date":21,"updatedAt":22,"views":23,"readingTime":24,"content":25},"1AIRpzTE0RjcZoDh4pCC","Production-Ready Vue 3 (Vite) Deployment on Ubuntu with Nginx","production-ready-vue-3-vite-deployment-on-ubuntu-with-nginx","Move your Vue 3 (Vite) application from development to a robust production environment. This guide provides a step-by-step process for deploying on an Ubuntu server using Nginx for serving static assets and handling routing.","",{"id":10,"name":11,"description":8,"createdAt":12,"updatedAt":12,"slug":13},"OGX0sZqLUhLjknVRdaLi","Vue","2026-02-16T06:44:55.195Z","vue",[15],{"id":16,"slug":13,"updatedAt":17,"createdAt":18,"name":11,"color":19},"thSZUymWVsul4TgltkvA","2026-02-14T03:17:52.350Z","2026-02-14T03:17:31.654Z","#41B883",[16],"2026-02-18T13:42:33.507Z","2026-02-18T13:50:22.560Z",18,5,"Transitioning a Vue 3 application built with Vite from local development to a live, production-ready server requires a methodical approach. This guide will walk you through the essential steps to deploy your Vue (Vite) application on an Ubuntu server, leveraging Nginx for optimal performance and reliable serving of static assets.\n\n## Prerequisites\n\nBefore we begin, ensure you have the following:\n\n*   An Ubuntu server (e.g., version 20.04 LTS or 22.04 LTS) with SSH access.\n*   A non-root user with `sudo` privileges configured on your server.\n*   Basic familiarity with the Linux command line.\n*   Your Vue 3 application built with Vite, ready for production.\n\n## Step 1: Initial Server Setup\n\nStart by updating your server's package list and upgrading installed packages.\n\n```bash\nsudo apt update\nsudo apt upgrade -y\n```\n\n### Install Node.js and npm\n\nVite applications require Node.js and npm (or yarn) to build. We recommend using `nvm` (Node Version Manager) for easy management of Node.js versions.\n\n1.  **Install `nvm`:**\n\n```bash\n    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash\n```\n\n*Note: Replace `v0.39.1` with the latest version available if needed.* Close and reopen your SSH session or run `source ~/.bashrc` (or `~/.zshrc`) to load `nvm`.\n\n2.  **Install Node.js:**\n\n```bash\nnvm install --lts\nnvm use --lts\nnode -v\nnpm -v\n```\n\nThis will install and use the latest LTS version of Node.js and its bundled npm.\n\n### Install Nginx\n\nNginx is a high-performance web server that will serve your Vue application's static files and handle incoming requests.\n\n```bash\nsudo apt install nginx -y\nsudo ufw allow 'Nginx HTTP'\nsudo systemctl start nginx\nsudo systemctl enable nginx\n```\n\nVerify Nginx is running by navigating to your server's IP address in a web browser. You should see the default Nginx welcome page.\n\n### Configure Firewall (UFW)\n\nEnsure your firewall (UFW) allows necessary traffic.\n\n```bash\nsudo ufw enable\nsudo ufw allow ssh\nsudo ufw allow 'Nginx HTTP'\n# If you plan to use HTTPS later, also allow:\n# sudo ufw allow 'Nginx HTTPS'\nsudo ufw status\n```\n\n## Step 2: Prepare Your Vue Application for Deployment\n\n### Build Your Application\n\nOn your local machine, navigate to your Vue project directory and run the production build command. This will compile your Vue components, optimize assets, and generate static files in a `dist` directory.\n\n```bash\nnpm run build\n```\n\n### Transfer Application Files to the Server\n\nYou have a few options for transferring your `dist` folder to the server:\n\n1.  **SCP (Secure Copy Protocol):** Simple for one-time transfers.\n\n```bash\nscp -r dist user@your_server_ip:/var/www/your_domain/\n```\n\n2.  **Git:** Recommended for continuous deployment. Clone your repository directly onto the server.\n\n    We'll proceed with the Git method as it's more robust for updates.\n\n    On your server:\n\n```bash\ncd /var/www/\nsudo mkdir your_domain\nsudo chown -R $USER:$USER /var/www/your_domain\ncd your_domain\ngit clone https://github.com/your-username/your-repo.git .\nnpm install\nnpm run build\n```\n\n*Note: Replace `your_domain` and the Git repository URL with your actual details. The `.` at the end of `git clone` clones into the current directory.* Ensure your server has `git` installed (`sudo apt install git -y`).\n\nThe production-ready static files will now reside in `/var/www/your_domain/dist`.\n\n## Step 3: Configure Nginx to Serve Your Application\n\nNginx needs to be configured to point to your application's `dist` directory and handle Vue Router's history mode.\n\n1.  **Create a new Nginx configuration file:**\n\n```bash\nsudo nano /etc/nginx/sites-available/your_domain\n```\n\n2.  **Add the following configuration:**\n\n```nginx\nserver {\n    listen 80;\n    server_name your_domain www.your_domain;\n\n    root /var/www/your_domain/dist;\n    index index.html index.htm;\n\n    location / {\n        try_files $uri $uri/ /index.html;\n    }\n\n    # Optional: Cache control for static assets (e.g., 7 days)\n    location ~* \\.(js|css|png|jpg|jpeg|gif|ico|svg)$ {\n        expires 7d;\n        add_header Cache-Control \"public, no-transform\";\n    }\n\n    error_log /var/log/nginx/your_domain_error.log warn;\n    access_log /var/log/nginx/your_domain_access.log;\n}\n```\n\n*Replace `your_domain` and `www.your_domain` with your actual domain name.* The `try_files` directive is crucial for Vue Router's history mode, ensuring that direct access to sub-paths (e.g., `/about`) or page refreshes on sub-paths are correctly routed back to `index.html`.\n\n3.  **Create a symbolic link to enable the site:**\n\n```bash\nsudo ln -s /etc/nginx/sites-available/your_domain /etc/nginx/sites-enabled/\n```\n\n4.  **Test Nginx configuration for syntax errors:**\n\n```bash\nsudo nginx -t\n```\n\nIf successful, you should see `syntax is ok` and `test is successful`.\n\n5.  **Restart Nginx to apply changes:**\n\n```bash\nsudo systemctl restart nginx\n```\n\nNow, when you visit `http://your_domain` in your web browser, your Vue application should be live!\n\n## Step 4: Secure Your Application with HTTPS (Optional but Recommended)\n\nFor production, securing your application with an SSL certificate is paramount. Let's Encrypt provides free SSL certificates, and Certbot automates the process.\n\n1.  **Install Certbot:**\n\n```bash\nsudo apt install certbot python3-certbot-nginx -y\n```\n\n2.  **Obtain and install SSL certificate:**\n\n```bash\nsudo certbot --nginx -d your_domain -d www.your_domain\n```\n\nFollow the prompts. Certbot will automatically modify your Nginx configuration to include HTTPS and set up automatic renewal.\n\n3.  **Verify HTTPS:**\n\n```bash\nsudo ufw allow 'Nginx HTTPS'\nsudo ufw reload\n```\n\nVisit `https://your_domain` to confirm your site is now secure.\n\n## Deployment Workflow & Updates\n\nFor future updates to your application, the workflow will typically involve:\n\n1.  On your local machine, make changes and commit them to your Git repository.\n2.  Push your changes to your remote Git repository (e.g., GitHub, GitLab).\n3.  On your server, navigate to your application's directory (`/var/www/your_domain`).\n4.  Pull the latest changes:\n\n```bash\ngit pull\n```\n\n5.  Install any new dependencies and rebuild the application:\n\n```bash\nnpm install\nnpm run build\n```\n\nSince Nginx is serving the `dist` folder, and the folder contents are updated, Nginx will automatically serve the new files without a restart (unless you change Nginx config itself).\n\n## Conclusion\n\nYou've successfully deployed your Vue 3 (Vite) application to an Ubuntu server using Nginx, configured for production readiness, and secured with HTTPS. This robust setup provides a solid foundation for your application. For further enhancements, consider exploring continuous integration/continuous deployment (CI/CD) pipelines to automate your deployment workflow even further.\n\nHappy deploying!",1780799669227]