Introduction

Continuous integration and deployment (CI/CD) pipelines are important components of an application development process, making the automation of the deployment process swift and seamless. DigitalOcean Spaces is an S3-compatible object storage service that lets you store and serve large amounts of unstructured data, such as images, videos, and backups.

In this blog, we will walk you through setting up a CTO.ai workflow to automatically deploy a static website to DigitalOcean Spaces, thereby creating a robust CI/CD pipeline.

Prerequisites

Setting Up Your DigitalOcean Infrastructure with CTO.ai Workflow

The DigitalOcean Kubernetes workflow includes a complete Digital Ocean infrastructure complete with Kubernetes, Container Registry, Postgres, Spaces, Load Balancers SSL (via LetsEncrypt), and Project Resource Management all built using CDKTF & Terraform Cloud.

The repo also includes a PaaS workflow integration with CTO.ai that enhances Developer Experience for utilizing the infrastructure, which includes iterative workflows that work in the CLI & Slack, but also full CI/CD & Preview Environments for all delivery.

First, clone and cd into the repo:

git clone [email protected]:workflows-sh/do-k8s-cdktf.git


cd do-k8s-cdktf

Create API, Spaces, and Token Key

In your DigitalOcean dashboard, create your API and SPACES keys for your workflow setup by selecting API on your DigitalOcean dashboard. For the DigitalOcean workflow, we will be creating the DigitalOcean Token from the API, the Terraform Token from Terraform workspace, the DigitalOcean Spaces Access and Secret key from the Spaces Token in DigitalOcean, and the GitHub Token from GitHub.

Next, add the tokens you created from DigitalOcean, GitHub, and Terraform Cloud to your secrets config in CTO.ai settings.

Build and deploy the DigitalOcean Infrastructure using the ops run . command. The setup command is designed to set up your infrastructure using the run command. When you run the command, it will prompt you to set up your Infrastructure on DigitalOcean.

  • Enter the name of your environment; you can use dev, staging, or prod for your environment.
  • Enter the name of your application and hit enter.

The CLI will start deploying your DigitalOcean infrastructure via Terraform and CTO.ai. Back in your DigitalOcean dashboard, you will see your resources deployed.

Preparing Your Static Website

Ensure that your website files are ready and functioning correctly in a local environment. The primary file should be named index.html.

Set up environment variables: In your CTO.ai dashboard, navigate to your project settings and set up the following environment variables: DO_SPACES_ENDPOINT DO_SPACES_ACCESS_KEY_ID DO_SPACES_SECRET_ACCESS_KEY

In your repository, create a folder, and inside it, create an ops.yml file with the following structure:

version: "1"
pipelines:
  - name: sample-expressjs-pipeline-do-k8s-cdktf:0.2.4
    description: Build and Publish an image in a DigitalOcean Container Registry
    env:
      static:
        - DEBIAN_FRONTEND=noninteractive
        - STACK_TYPE=do-k8s-cdktf
        - ORG=cto-ai
        - GH_ORG=workflows-sh
        - REPO=sample-expressjs-do-k8s-cdktf
        - BIN_LOCATION=/tmp/tools
      secrets:
        - GITHUB_TOKEN
        - DO_TOKEN
        - DO_SPACES_ACCESS_KEY_ID
       - DO_SPACES_SECRET_ACCESS_KEY
   
    events:
      - "github:workflows-sh/sample-expressjs-do-k8s-cdktf:pull_request.opened"
      - "github:workflows-sh/sample-expressjs-do-k8s-cdktf:pull_request.synchronize"
      - "github:workflows-sh/sample-expressjs-do-k8s-cdktf:pull_request.merged"
    jobs:
     - mkdir -p $BIN_LOCATION - export PATH=$PATH:$BIN_LOCATION
 echo -e "[default]\naccess_key = $DO_SPACES_KEY\nsecret_key
$DO_SPACES_SECRET_ACCESS_KEY\nbucket_location = your_region\nendpoint_url =$DO_SPACES_ENDPOINT" > ~/.s3cfg 
      -s3cmd sync ./build/ s3://your_space_name/
      - name: sample-expressjs-build-do-k8s-cdktf
        description: Build step for sample-expressjs-do-k8s-cdktf
        packages:
          - git
          - unzip
          - wget
          - tar
        steps:
          - checkout
          - 
services:
  - name: sample-expressjs-service-do-k8s-cdktf:0.1.6
    description: Preview of image built by the pipeline
    run: node /ops/index.js
    port: [ '8080:8080' ]
    sdk: off
    domain: ""
    env:
      static:
        - PORT=8080
    events:
      - "github:workflows-sh/sample-expressjs-do-k8s-cdktf:pull_request.opened"
      - "github:workflows-sh/sample-expressjs-do-k8s-cdktf:pull_request.synchronize"
      - "github:workflows-sh/sample-expressjs-do-k8s-cdktf:pull_request.merged"
    trigger:
      - build
      - publish
      - start

Uploading Your Website Files

Navigate to your website’s root directory in the terminal and run the following command to upload your website files:

s3cmd sync . s3://your-space-name/

Replace your-space-name with the name of your DigitalOcean Space. The sync command will upload all files in the current directory to your Space.

Verifying Your Deployment

Open your web browser and visit your Space endpoint URL or your custom domain (if configured) to verify if your website has been deployed successfully.

Get Started with CTO.ai Workflows

With CTO.ai, we've created a seamless pipeline to automate the deployment process of static sites to DigitalOcean Spaces.

Now, every push to your repository will automatically trigger the workflow, ensuring that your static site is always up-to-date with the latest changes. Embrace the power of automation by integrating CTO.ai workflows into your development process to deploy static sites on DigitalOcean Spaces. This setup not only simplifies the deployment process but also ensures rapid, consistent, and error-free deployments, facilitating a smooth and efficient development workflow. To learn more about how CTO.ai accelerates your adoption of DigitalOcean, click here.