{"id":7,"date":"2025-06-19T10:12:44","date_gmt":"2025-06-19T10:12:44","guid":{"rendered":"https:\/\/blog.vigplanet.com\/?p=7"},"modified":"2025-06-19T10:12:44","modified_gmt":"2025-06-19T10:12:44","slug":"how-to-deploy-a-full-stack-web-application-on-a-cloud-server-step-by-step","status":"publish","type":"post","link":"https:\/\/blog.vigplanet.com\/?p=7","title":{"rendered":"How to Deploy a Full-Stack Web Application on a Cloud Server (Step-by-Step)"},"content":{"rendered":"\n<p><strong>Keywords:<\/strong> cloud server and application, deploy full-stack app, cloud deployment tutorial<\/p>\n\n\n\n<p>Deploying a full-stack web application on a cloud server might seem intimidating, but with the right guidance, it\u2019s simpler than you think. Whether you&#8217;re building with Node.js, React, or Python, this guide will help you move from development to production step-by-step.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\ude80 Step 1: Choose a Cloud Server Provider<\/h2>\n\n\n\n<p>Popular cloud hosting providers include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/aws.amazon.com\/ec2\/\" target=\"_blank\" rel=\"noreferrer noopener\">Amazon EC2<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/cloud.google.com\/compute\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google Cloud Compute Engine<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.digitalocean.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">DigitalOcean<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/azure.microsoft.com\/en-us\/\" target=\"_blank\" rel=\"noreferrer noopener\">Microsoft Azure<\/a><\/li>\n<\/ul>\n\n\n\n<p>For this guide, we\u2019ll use <strong>Ubuntu 22.04 LTS<\/strong> on <a href=\"https:\/\/www.digitalocean.com\/products\/droplets\/\" target=\"_blank\" rel=\"noreferrer noopener\">DigitalOcean Droplets<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udd10 Step 2: SSH into Your Cloud Server<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>ssh root@your_server_ip<\/code><\/pre>\n\n\n\n<p>Make sure you have your SSH key or password set up. You can generate a key using:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ssh-keygen<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u2699\ufe0f Step 3: Install Essential Software<\/h2>\n\n\n\n<p>Update your packages and install Node.js, Git, and Nginx:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nsudo apt update &amp;amp;&amp;amp; sudo apt upgrade -y\nsudo apt install nodejs npm git nginx -y\nnode -v\nnpm -v\n  <\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udcc1 Step 4: Clone Your Application from GitHub<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>\ncd \/var\/www\/\ngit clone https:\/\/github.com\/yourusername\/your-repo.git\ncd your-repo\nnpm install\n  <\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\uddc4\ufe0f Step 5: Set Up Your Backend (e.g., Node.js)<\/h2>\n\n\n\n<p>Run your server with:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>node server.js<\/code><\/pre>\n\n\n\n<p>Or use <a href=\"https:\/\/pm2.keymetrics.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">PM2<\/a> to keep your server running in the background:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install -g pm2\npm2 start server.js\npm2 save\n  <\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udd04 Step 6: Configure Nginx as a Reverse Proxy<\/h2>\n\n\n\n<p>Set up a config file in <code>\/etc\/nginx\/sites-available\/yourdomain.com<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nserver {\n  listen 80;\n  server_name yourdomain.com;\n\n  location \/ {\n    proxy_pass http:\/\/localhost: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}\n  <\/code><\/pre>\n\n\n\n<p>Enable the site and restart Nginx:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nln -s \/etc\/nginx\/sites-available\/yourdomain.com \/etc\/nginx\/sites-enabled\/\nnginx -t\nsudo systemctl restart nginx\n  <\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83e\uddea Step 7: Test Your Application<\/h2>\n\n\n\n<p>Visit your domain in a browser. You should see your front-end served and API routes working. Use browser console and DevTools to inspect issues.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udd12 Optional: Secure Your App with SSL<\/h2>\n\n\n\n<p>Use <a href=\"https:\/\/certbot.eff.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Let&#8217;s Encrypt Certbot<\/a> to add HTTPS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nsudo apt install certbot python3-certbot-nginx -y\nsudo certbot --nginx -d yourdomain.com\n  <\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udce6 Final Thoughts<\/h2>\n\n\n\n<p>Congratulations! Your full-stack web application is now live on a cloud server. Whether you\u2019re running a MERN stack, LAMP stack, or Django app, this deployment method works across the board.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Useful Resources:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.freecodecamp.org\/news\/how-to-deploy-node-js-app\/\" target=\"_blank\" rel=\"noreferrer noopener\">FreeCodeCamp: Node.js Deployment<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\" target=\"_blank\" rel=\"noreferrer noopener\">DigitalOcean Tutorials<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/pm2.keymetrics.io\/docs\/usage\/quick-start\/\" target=\"_blank\" rel=\"noreferrer noopener\">PM2 Official Docs<\/a><\/li>\n<\/ul>\n\n\n\n<p><strong>Need help?<\/strong> Drop a comment below or <a href=\"mailto:contact@yourwebsite.com\">contact us<\/a> for deployment services.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Keywords: cloud server and application, deploy full-stack app, cloud deployment tutorial Deploying a full-stack web application on a cloud server might seem intimidating, but with the right guidance, it\u2019s simpler than you think. Whether you&#8217;re building with Node.js, React, or Python, this guide will help you move from development to production step-by-step. \ud83d\ude80 Step 1:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/blog.vigplanet.com\/index.php?rest_route=\/wp\/v2\/posts\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.vigplanet.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.vigplanet.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.vigplanet.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.vigplanet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":1,"href":"https:\/\/blog.vigplanet.com\/index.php?rest_route=\/wp\/v2\/posts\/7\/revisions"}],"predecessor-version":[{"id":8,"href":"https:\/\/blog.vigplanet.com\/index.php?rest_route=\/wp\/v2\/posts\/7\/revisions\/8"}],"wp:attachment":[{"href":"https:\/\/blog.vigplanet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.vigplanet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.vigplanet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}