Deploying a Webstudio Project with Flightcontrol

Webstudio is an open source website builder for creating highly maintainable and fast websites using modern web standards. This guide will provide detailed steps on how to deploy your Webstudio site to AWS with Flightcontrol.

At the end of this guide, we will have a Webstudio site deployed on AWS Elastic Container Service (ECS). It will have a publicly accessible URL and run on resources within your AWS account.

Prerequisites

1. Create a GitHub repository

Create a repository where you will add the Webstudio Project code in the following steps. Be sure to clone the repository to your local machine.

2. Export Webstudio Project

Use the Webstudio CLI to export your Project and select the “Docker” option.

Selecting Docker for Webstudio

3. Push to GitHub

Now that the site code is local, push it to GitHub.

You do not need to install dependencies.

4. Setup Flightcontrol

  1. Follow the prompt to connect AWS, which will direct you to AWS. Then click “Create stack”. It may take a couple of minutes, but once it is done, Flightcontrol will take you to the next step.
AWS setup in Flightcontrol
  1. Connect your GitHub account and select the repository you want to give it permission to.
Connect GitHub button
  1. Follow the prompts: Select “Build your own” > Select “Web server” > and select “Dockerfile” in “Build Configuration”.
Build your own option
  1. Deploy and wait. The initial deployment takes some time. Please allow up to ~15 minutes for the deployment to finish.
Deployed app
  1. (Optional) If you are loading images from third-party domains, usually in the case of CMS integrations, you must specify those asset domains in the Environment Variables tab with the key DOMAINS and a comma-separated list of the third-party domains. It’s best to inspect your HTML/API response to see the exact domain the platform is using.
Adding third party domains to flightcontrol

5. Sync, Build, and push new changes

When you are ready to publish your latest changes again, follow these steps:

  1. Click “Publish” in the Webstudio builder (even though you aren’t publishing to the cloud, it’s necessary to generate the latest build data).
  2. Run webstudio sync
  3. Run webstudio build --template docker
  4. Push the changes to GitHub
Webstudio sync command

Now, you should have a website built on Webstudio that is hosted on AWS using Flightcontrol.