Deploying your web app to the cloud (with HTTPS) - digitalideation/studio_webmobile2_2021 GitHub Wiki

Your task (optional, but recommended)

• Deploy your application to the cloud. You can use one of the options below or propose an alternative.

Accessing most sensor APIs or the camera requires that your web application is served over HTTPS. There are multiple ways to deploy your web application so that it has HTTPS. In Studio 1, we used Netlify. However, Netlify can only serve static resources (HTML, JS). Which means it can not run your back-end Node.js server. In this classe, I propose the following two options to choose from:

Option 1: Heroku

An easy way to deploy a Node.js application to the cloud is Heroku. Heroku falls into the Platform-as-a-service model. You don't have to install or maintain Node.js, but you only have to specify the version you want to use. You get HTTPS out of the box with a URL in the Heroku domain. I recommend this approach, if you want to focus on the development of your application instead of administrating your infrastructure.

Option 2: Docker, NGINX, Let's Encrypt

A more complex approach is to use an Infrastructure-as-a-service provider (such as AWS EC2, Digital Ocean, Google Compute Engine) and Docker to deploy our application. To get HTTPS, you can use NGINX and Let's Encrypt. I recommend this approach if you want to learn more about cloud deployment and infrastructure. This approach requires that you register a domain name (or I can give one from my own domain). In this approach, you will use the Linux command line and SSH.

Resources

For Heroku

• Deploying Node.js Apps on Heroku

For Docker etc.

• Docker Tutorial.
• Docker Compose Tutorial
• Let's encrypt
• OpenSSL
• Linux command line cheatsheet
• Putty: SSH client for Windows
• Tutorial: how to build a Node.js application with Docker
• Tutorial: How To Secure a Containerized Node.js Application with Nginx, Let's Encrypt, and Docker Compose

Cost

Cloud services can quickly add up. If you use a credit card, keep a close eye on the cost. Cloud services sometimes offer free tiers for hobby projects without requiring credit cards. Through Github for education you can also get credit for various services, including domain names and cloud hosting (Heroku, Digital Ocean).

Pull changes from Github and restart docker

Due to the way volumes work in Docker, we have to change our dockerfile in the client. If we copy the files to the webroot volume inside the client dockerfile, it will have no effect. From the Docker documentation

If any build steps change the data within the volume after it has been declared, those changes will be discarded.

We need the volume for communication with the Certbot, but we can copy the client files into another directory and configure NGINX accordingly. In docker-compose volumes should look as follows:

volumes:
    certbot-etc:
    certbot-var:
    web-root:
    dhparam:
      driver: local
      driver_opts:
        type: none
        device: /home/web3/Web2Project/dhparam/
        o: bind

In the client docker file the copy command should look as follows:

COPY --from=build-stage /app/dist /var/www/vue

And in your NGINX configuration make sure to change the webroot for HTTPS

        root /var/www/vue;

With those configurations, you can trigger a new deployment with the commands below.

docker-compose down
docker-compose build --force-rm --no-cache nodejs webserver
docker-compose up -d

You can find the complete configuration files here: https://github.com/OblivionLS/Web2Project/tree/maria