Deploy Nuxt on DigitalOcean App Platform

How to deploy Nuxt on DigitalOcean App Platform?

DigitalOcean App Platform allows you to build, deploy, and scale apps quickly using a simple, fully managed solution. They’ll handle the infrastructure, app runtimes and dependencies, so that you can push code to production in just a few clicks.

App Platform includes the following features:

• Build, deploy, manage, and scale apps.
• Secure apps automatically. They create, manage and renew your SSL certificates and also protect your apps from DDoS attacks.
• Support for Node.js, static sites, Python, Django, Go, PHP, Laravel, React, Ruby, Ruby on Rails, Gatsby, Hugo, container images.
• Deploy code directly from your GitHub and GitLab repositories. Automatically re-deploy the app when you push updates to your source code.
• Zero infrastructure management. App Platform uses open, cloud native standards and automatically analyzes your code, creates containers, and runs them on Kubernetes clusters.
• Highly scalable. Scale horizontally or vertically.

Prerequisites

This guide assumes you already have a Nuxt project to deploy. If you need a project, use the create-nuxt-app to get started.

Setup

1. Link your repository: Create a new account on DigitalOcean and connect your GitHub or Gitlab account. Then select the repository you want to deploy.
2. Choose a branch of your repo and a region to deploy your site.
3. Choose the service that suits your website.

   Type	Settings
   Server	Web service - Build command yarn build & Run command yarn start
   Static	Static Sites - Build command yarn generate & Output directory dist

   Warning: For the server type you need to change the HTTP port from 8080 to 3000 in the Web service settings.
   More information at this article .
   
   
4. Add an environment variable called HOST with the value 0.0.0.0. You can also add any other environment variables manually in the key-value pair inputs.

Once you pass the process, you hit deploy and your site will be live on an autogenerated url as soon as the build is done.

Continuous deployment (CD)

Now that App Platform is connected to your repo, it will automatically build and publish your site any time you push a new change.

Add custom domains

Add your own domains to your site easily on Settings > Domains > Add domain or follow this How to Manage Domains in App Platform guide.

Deploy to DigitalOcean button

The Deploy to DigitalOcean Button allows users to launch an application onto App Platform. It can be embedded in the README file for GitHub repositories, allowing users who are browsing your repository to deploy your code in one click, adding a .yaml file into your repo. Check it out at How to Add a "Deploy to DigitalOcean" Button to Your Repository