Skip to main content

Digital Ocean Apps

There is a simplified deployment type without Kubernetes. This type is recommended for most new applications because it allows you to set up infrastructure faster and doesn't require additional DevOps knowledge from the development team. You can switch to a more complex Kubernetes solution when your application will be at scale.

It's a step-by-step Ship deployment guide. We will use the Digital Ocean Apps and GitHub Actions for automated deployment. Mongo Atlas and Redis Cloud for databases deployment, and Cloudflare for DNS and SSL configuration.

You need to create GitHub, Digital Ocean, CloudFlare, MongoDB Atlas and Redis Cloud accounts.

Also, you need git and Node.js if you already haven't.

tip

Migrator and Scheduler will run in a Docker container for API. Unlike Kubernetes, where separate containers are used for them.

Setup project

First, initialize your project. Type npx create-ship-app init in the terminal then choose desired build type and Digital Ocean Apps as a cloud service provider.

You will have next project structure.

/my-app
/apps
/web
/api
/.github
...

Create GitHub private repository and upload source code.

cd my-app
git remote add origin https://github.com/Oigen43/my-app.git
git branch -M main
git push -u origin main

MongoDB Atlas

Navigate to MongoDB Atlas, sign in to your account and create a new database.

Database creation

  1. Select the appropriate type. Dedicated for a production environment, shared for staging/demo.
  2. Select provider and region. We recommend selecting the same or closest region to the DO application.
  3. Select cluster tier. Free M0 Sandbox should be enough for staging/demo environments. For production environment we recommended selecting the option that supports cloud backups, M10 or higher.
  4. Enter cluster name

Security and connection

After cluster creation, you'll need to set up security. Select the authentication type (username and password) and create a user.

Add IP addresses list, which should have access to your cluster. Add 0.0.0.0/0 IP address to allow anyone with credentials to connect.

After database creation, go to the dashboard page and get the URI connection string by pressing the connect button.

Select Connect your application option. Choose driver and mongo version, and copy connection string. Don't forget to replace <password> with your credentials.

Save this value. It will be needed later when creating the app in Digital Ocean.

Redis Cloud

Navigate to Redis Cloud and create an account. Select cloud provider and region, then press Let's start free to finish database creation.

Open database settings and get the database public endpoint and password.

Form Redis connection string using public endpoint and password redis://:<[email protected]<public-endpoint>. Save this value. It will be needed later when creating the app in Digital Ocean.

Digital Ocean

Navigate to the Digital Ocean Control Panel and select the Apps tab. The Full-Stack build type requires 2 applications. First for Web and second for API, Migrator, and Scheduler services.

Initial step

  1. Select GitHub as a service provider. You might need to grant Digital Ocean access to your GitHub account.
  2. Select the repository with the application.
  3. Select a branch for deployment.
  4. Select the source directory if the code is in a subfolder.It should apps/web for web application and apps/api for api.
  5. Turn off the Autodeploy option. The Ship uses GitHub Actions for CI due to the poor support of monorepos in the Digital Ocean Apps

Resources setup

  1. Delete duplicated resources without dockerfile if you have one.
  2. Select desired plan. For staging/demo environments, sufficiently selecting a basic plan for 5$. For production, you might consider selecting a more expensive plan.

Environment variables

  1. Add APP_ENV responsible for the config file from the environment folder that will be used when building your application.
APP_ENVFile
developmentdevelopment.json
development-dockerdevelopment-docker.json
stagingstaging.json
productionproduction.json
  1. Add other environment variables.

Variables, added in the Global section will be available to all resources within the application, while ones added in the ship section will be available only for that resource. Adding MONGO_CONNECTION in the global section allows you to use it later if you decide to set up migrator/scheduler resources

Application name and hosted region

  • [Optional] Select desired application name and/or region for your application

Review

Verify everything is correct and create a new resource.

After the application creation, you'll land on the application dashboard page. On dashboard, you can see application status, check runtime logs, track deployment status, and manage application settings.

App Spec

Digital Ocean sets the path to Dockerfiles to the root by default. You will need to change it manually. Navigate to Settings, expand the App spec tab and change dockerfile_path in the editor.

Cloudflare

Navigate to your Digital ocean application and open Settings tab. Select Domains row to open domain settings and click Add domain button

Type your desired domain and select option You manage your domain

In the bottom section you'll be asked to copy CNAME alias of your digital ocean application name to record in your dns provider. Copy that alias and leave the form (do no close it or submit).

Navigate to CloudFlare and sign into account.

  1. Go to DNS tab and create a new record.
  2. Click Add record. Select type CNAME, enter domain name (must be the same you entered in digital ocean settings) and paste alias into target field. Make sure Proxy status toggle enabled.
  3. Save changes

Now go back to digital ocean and submit form. It usually takes about 5 minutes for digital ocean to confirm and start using your new domain. Once domain is confirmed, application can be accessed by new address.

GitHub Actions

You can find two github actions in the .github/workflows folder, responsible for triggering deployment when you push changes in your repository. If you chose frontend or backend on the initialization step, you'll have one github workflow for the selected application type.

These actions require a Digital Ocean access token and application ID. Respectively these are DO_ACCESS_TOKEN and DO_STAGING_API_ID/DO_STAGING_WEB_ID/DO_PRODUCTION_API_ID/DO_PRODUCTION_WEB_ID.

Navigate to digital ocean and open the API tab on the left sidebar. Click Generate new token and choose name and expiration period, and leave checkboxes as they are.

You'll see generated token in the list. Do not forget to copy the value and store it in a safe place. You won't be able to copy value after leaving the page.

Next, navigate to the Apps tab in the left sidebar and open your Digital Ccean application. You can find the id of your application id in the browser address bar.

Now you can add theese keys to your github repository's secrets.

Navigate to the GitHub repository page, and open the Settings tab and these values. You have to be repository admin or owner to open this tab.

Done! Application deployed and can be accessed by provided domain.

Set up migrator and scheduler(Optional)

Digital Ocean Apps allows configuring additional resources within one application, which can serve as background workers and jobs, and a scheduler to run before/after the deployment process.

Navigate to your Digital Ocean application. Make sure to select the application with API server, open a Create dropdown menu in the top-right corner, and select the Create Resources From Source Code option.

  1. Select a project repository, add a path to the source directory, disable auto-deploy, and press Next.

  1. Delete a resource without Dockerfile and edit second by clicking on the pencil icon.

  1. In the edit resource form, select Resource Type - Job, Before every deploy, and change the name of the resource (not required, but might be useful later). Press save and go back to the resources screen.

  1. Select the Add Additional Resource from Source option below the list of added resources, repeat steps 1-2, and navigate to the edit form for a new resource.

  2. Select Resource Type - Worker, save changes and go back.

  1. Proceed with the next steps, add environment variables if needed, verify a new monthly cost of the application and create resources.

You can find created resources in the overview tab.

  1. Navigate to Application Spec (settings tab). Change the dockerfile_path variable to files with migrator and scheduler. Migrator is placed in the jobs section. You can also find it by name of the resource. The scheduler is placed in the workers section.