How to Deploy a Nuxt Application to Hetzner, DigitalOcean, or Vultr

In this comprehensive post, we'll walk through deploying a Nuxt application using Docker and Caddy Server on popular cloud providers like Hetzner, DigitalOcean, and Vultr.

Prerequisites

Before we begin, ensure you have the following:

• A Nuxt application ready for deployment
• Docker installed on your local machine
• A cloud server from Hetzner, DigitalOcean, or Vultr
• Basic understanding of Docker and Linux command-line operations
• SSH access to your cloud server

Step 1: Preparing Your Nuxt Application

Dockerizing Your Nuxt Application

Create a Dockerfile in your project root:

# Use an official Node runtime as the base image
FROM node:18-alpine

# Set working directory in the container
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install project dependencies
RUN npm install

# Copy the rest of the application code
COPY . .

# Build the application
RUN npm run build

# Expose the port the app runs on
EXPOSE 3000

# Command to run the application
CMD ["npm", "start"]

Creating a .dockerignore File

To optimize your Docker build, create a .dockerignore file:

node_modules
.nuxt
.git
.env
dist

Step 2: Docker Compose Configuration

Create a docker-compose.yml file to manage your application and Caddy server:

version: '3.8'
services:
  nuxt-app:
    build: .
    container_name: nuxt-application
    restart: unless-stopped
    networks:
      - web

  caddy:
    image: caddy:2.6-alpine
    container_name: caddy-server
    ports:
      - 80:80
      - 443:443
    volumes:
      - ./Caddyfile:/etc/caddy/Caddyfile
      - caddy_data:/data
      - caddy_config:/config
    restart: unless-stopped
    networks:
      - web

networks:
  web:
    driver: bridge

volumes:
  caddy_data:
  caddy_config:

Step 3: Configuring Caddy Server

Create a Caddyfile for reverse proxy and SSL configuration:

yourdomain.com {
    reverse_proxy nuxt-app:3000
    encode gzip

    # Enable automatic HTTPS
    tls your-email@example.com
}

Step 4: Server Preparation

Connecting to Your Cloud Server

Use SSH to connect to your cloud server:

ssh root@your_server_ip

Installing Docker and Docker Compose

For Ubuntu/Debian:

# Update package index
sudo apt update

# Install dependencies
sudo apt install apt-transport-https ca-certificates curl software-properties-common

# Add Docker's official GPG key
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

# Set up the Docker repository
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

# Install Docker and Docker Compose
sudo apt update
sudo apt install docker-ce docker-compose

Firewall Configuration

Open necessary ports:

sudo ufw allow 80/tcp
sudo ufw allow 443/tcp
sudo ufw allow ssh
sudo ufw enable

Step 5: Deployment

Transfer Files to Server

Use SCP to transfer your project files:

scp -r /path/to/your/project root@your_server_ip:/path/to/project

Running the Application

On the server, navigate to your project directory and run:

docker-compose up -d

Best Practices and Tips

1. Security
2. Always use strong, unique passwords
3. Implement SSH key-based authentication

4. Keep your systems and Docker images updated

5. Monitoring

6. Use tools like Prometheus and Grafana
7. Set up log monitoring with ELK stack

8. Implement health checks in your Docker configuration

9. Continuous Deployment

10. Consider integrating GitHub Actions or GitLab CI
11. Automate your build and deployment processes
12. Implement zero-downtime deployments

Troubleshooting Common Issues

• Docker Compose Build Failures: Ensure all dependencies are correctly defined
• Caddy SSL Issues: Verify domain configuration and DNS settings
• Performance Problems: Monitor resource usage and optimize Docker configurations

Conclusion

Deploying a Nuxt application with Docker and Caddy provides a flexible, scalable, and secure hosting solution. By following this guide, you can confidently deploy your application to Hetzner, DigitalOcean, Vultr or even to all of them, leveraging the power of containerization and automated SSL.