NavigationContentFooter
Jump toSuggest an edit

Deploying a self-hosted Penpot Instance using the Docker InstantApp

Reviewed on 22 April 2024Published on 28 September 2022
  • penpot
  • docker
  • instantapp

Penpot is an open-source design and prototyping platform designed for cross-domain teams. It is completely web-based and works with open web standards (SVG). Penpot can run in almost any modern browser, regardless of the underlying operating system.

In this tutorial, you learn how to deploy your own Penpot Instance using the Docker InstantApp.

Before you start

To complete the actions presented below, you must have:

  • A Scaleway account logged into the console
  • Owner status or IAM permissions allowing you to perform actions in the intended Organization

Installing Penpot using Docker Compose

  1. Click Instances in the Compute section of the Scaleway console side menu. Then deploy a new Instance using the Docker InstantApp.

  2. Connect to the Instance using SSH:

    ssh root@<docker_instance_ip>
  3. Download the Docker configuration from the Penpot repository:

    wget https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml
    wget https://raw.githubusercontent.com/penpot/penpot/main/docker/images/config.env
  4. Open the file containing the environment variables (config.env) in a text editor:

    nano config.env
  5. Set the PENPOT_PUBLIC_URI to your Penpot domain. Then save the file and exit the editor.

    PENPOT_PUBLIC_URI=https://penpot.mydomain.eu
  6. Update the APT package cache on your system to make sure you have the latest releases available.

    apt update
  7. Install the Nginx web server and certbot using APT. These serve as a frontend for the Penpot application and provide a secured TLS connection by using Let’s Encrypt certificates.

    apt install nginx python3-certbot-nginx
  8. Disable the default virtual host, that is pre-configured when Nginx is installed via Ubuntu’s package manager.

    unlink /etc/nginx/sites-enabled/default
  9. Create a Nginx configuration file for the reverse proxy:

    nano /etc/nginx/sites-available/penpot.conf

    Copy the following content into the file, save it, and exit the editor.

    server {
    listen 80;
    listen [::]:80;
    server_name penpot.mydomain.eu;
    access_log /var/log/nginx/reverse-access.log;
    error_log /var/log/nginx/reverse-error.log;
    location / {
    proxy_pass http://127.0.0.1:9001/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forward-Proto http;
    proxy_set_header X-Nginx-Proxy true;
    proxy_redirect off;
    }
    }
  10. Link the configuration file to enable it with Nginx.

    ln -s /etc/nginx/sites-available/penpot.conf /etc/nginx/sites-enabled/penpot.conf
  11. Reload Nginx to activate the new configuration:

    service nginx reload

Securing the connection using TLS

  1. Run certbot, a tool that automatizes most of the configuration work related to requesting, installing, and managing the TLS certificate:
    certbot --nginx
  2. Answer the prompts that display on the screen to request a valid Let’s Encrypt TLS certificate:
    Saving debug log to /var/log/letsencrypt/letsencrypt.log
    Plugins selected: Authenticator nginx, Installer nginx
    Which names would you like to activate HTTPS for?
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    1: penpot.mydomain.eu
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Select the appropriate numbers separated by commas and/or spaces, or leave input
    blank to select all options shown (Enter 'c' to cancel): 1
    Obtaining a new certificate
    Performing the following challenges:
    http-01 challenge for your.domain.com
    Waiting for verification...
    Cleaning up challenges
    Deploying Certificate to VirtualHost /etc/nginx/sites-enabled/reverse-proxy.conf
    Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    1: No redirect - Make no further changes to the webserver configuration.
    2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
    new sites, or if you're confident your site works on HTTPS. You can undo this
    change by editing your web server's configuration.
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Select the appropriate number [1-2] then [enter] (press 'c' to cancel): 2
    Redirecting all traffic on port 80 to ssl in /etc/nginx/sites-enabled/reverse-proxy.conf
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Congratulations! You have successfully enabled https://your.domain.com
    You should test your configuration at:
    https://www.ssllabs.com/ssltest/analyze.html?d=your.domain.com
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Running Penpot

  1. Run docker-compose to start Penpot:
    docker-compose -p penpot -f docker-compose.yaml up -d
  2. Run the following command to add a Penpot user:
    docker exec -ti penpot-penpot-backend-1 ./manage.sh create-profile
  3. Open a web browser on your local computer and point it to your Penpot domain. The login screen displays.
  4. Log in using the credentials of the previously created user. The Penpot dashboard displays. You can now start designing your assets.

Your Penpot Instance is now ready. For a more advanced configuration of additional features, refer to the official documentation.

Docs APIScaleway consoleDedibox consoleScaleway LearningScaleway.comPricingBlogCarreer
© 2023-2024 – Scaleway