Skip to main content

Lab 13: Project Deployment

Overview​

In this lab, we will use Render to deploy a web application that interacts with a PostgreSQL database. Render is a cloud platform for web applications that makes it easy to deploy full-stack applications.

To receive credit for this lab, you MUST show your progress to the TA during the lab, and submit your work to Canvas by the deadline. There is a "NO LATE SUBMISSIONS" policy for labs.

Learning Objectives​

L01. Understand cloud computing concepts and the different cloud service models
L02. Develop deployment proficiency by deploying the group project on to Render

Part A​

Pre-Lab Quiz​

Complete this Pre-Lab quiz on Canvas before your section's lab.

Part B​

1. Cloud Computing Overview​

Imagine you've built a web app for your business or personal project. You want to make it available to the world and ensure that it can handle heavy traffic without crashing. One solution would be to buy and manage your own servers, but that can be expensive and time-consuming. Instead, you can use cloud computing to easily deploy your web app on a network of powerful computers managed by someone else. This way, you can focus on developing your app while leaving the technical details of server management to the experts.

Cloud computing is a way to use computers and software over the internet instead of having them physically in your office. When you use cloud computing, you can access a vast network of computers and services that are managed by someone else, which can save you a lot of time and money.

Cloud computing allows you to easily and quickly get the computing power you need, such as storage, processing, or software, without having to invest in your own hardware. This means you can focus on building and deploying your projects, without worrying about maintaining the underlying infrastructure.

With cloud computing, you can also scale up or down as needed, depending on your business needs. This means you can easily adjust the amount of computing power you use, so you only pay for what you need.

For example, instead of buying and maintaining their own servers, many companies are using cloud computing services like Amazon Web Services (AWS), Microsoft Azure, or Google Cloud to run their web applications. This allows them to quickly and easily scale up their infrastructure as their business grows, without having to worry about the underlying hardware.

SaaS, IaaS, and PaaS​

Cloud computing is categorized into different types to help users understand and choose the most suitable cloud service model for their business needs. Each category of cloud computing offers different benefits and capabilities, and understanding these categories can help businesses make informed decisions about how they want to leverage cloud services. The three major categories of cloud computing are Infrastructure as a Service (IaaS), Platform as a Service (PaaS), and Software as a Service (SaaS).

IaaS (Infrastructure as a Service): IaaS, or infrastructure as a service, is a cloud-based service that allows resources to be delivered to organizations virtually (or through the cloud). IaaS tools help organizations build and manage servers, networks, operating systems, and data storage without needing to buy hardware. Example, Suppose you want to develop a web app that requires a lot of computing resources and storage space. Instead of purchasing and maintaining your own hardware, you could use an IaaS provider like Amazon Web Services (AWS) or Microsoft Azure to access virtual servers, storage, and networking infrastructure on the cloud. You could then install and manage your own operating system, software, and applications on these virtual resources.

PaaS (Platform as a Service): A PaaS, or platform as a service, provides developers with a framework they can use to build custom applications. PaaS doesn’t deliver software over the internet, but rather a platform that developers can use to create online software and apps. Example, If you want to build a custom web app without worrying about managing the underlying infrastructure, a PaaS provider like Heroku or Google App Engine could be a good choice. These platforms provide a pre-configured environment and development tools that allow you to quickly build, deploy, and scale your web app. You can focus on writing code and developing features, without worrying about configuring servers or managing databases.

SaaS (Software as a Service): SaaS, or software as a service, refers to cloud-based software that is hosted online by a company, is available for purchase on a subscription basis, and is delivered to buyers via the internet. One example of a SaaS provider is PayPal. With PayPal, businesses can sign up for a subscription and use the hosted payment gateway to accept credit card and other electronic payments from customers. This eliminates the need for businesses to develop and maintain their own payment gateway software, as PayPal takes care of it all.

All three categories of cloud computing, namely IaaS, PaaS, and SaaS, can be accessed through an internet browser or online apps on various devices.

Each cloud service model offers a different level of control, implying varying levels of responsibility on your part. The service provider manages everything in a SaaS solution, and you can change some configurations once you sign up. Because you rent (rather than own) the infrastructure, you have complete control with IaaS. You control the application and data with PaaS solutions, while the service provider manages the rest of the stack.

When deciding between SaaS, PaaS, and IaaS, you must decide how much you want to manage yourself and how much you want your service provider to manage. Here's a diagram showing how the three models (SaaS, PaaS, and IaaS) compare in terms of who manages what.

Public and Private Clouds​

Public and private cloud refer to different types of cloud computing deployment models that differ in terms of ownership, accessibility, and control.

A public cloud is owned and operated by a third-party cloud service provider, who offers their computing resources, such as servers, storage, and networking, over the internet to customers on a pay-per-use basis. In a public cloud, multiple customers share the same infrastructure, and the service provider is responsible for managing and maintaining the hardware, software, and security of the cloud environment. Popular examples of public cloud providers include Amazon Web Services (AWS), Microsoft Azure, and Google Cloud.

On the other hand, a private cloud is dedicated to a single organization and is typically hosted on-premises or in a data center. A private cloud can be managed by the organization itself or by a third-party service provider, and the infrastructure is not shared with other organizations. A private cloud offers greater control, security, and customization compared to a public cloud, but it also requires a higher upfront investment in hardware, software, and maintenance. Private clouds are commonly used by large enterprises, government agencies, and other organizations with high-security and compliance requirements.

It's worth noting that IaaS, PaaS, and SaaS can be deployed in both public and private clouds. In a public cloud, customers can subscribe to IaaS, PaaS, and SaaS services from a cloud provider, while in a private cloud, the organization can build and manage its own IaaS, PaaS, and SaaS solutions using its dedicated infrastructure.

Following are a few popular ones that you might have heard of:

tip
Here's a great resource to get additional information on cloud providers.

2. Setting up your environment​

You ae required to use your group project repository for this lab. Later, if would like to deploy another project for practice, you can use your solution from Lab 7 or 8.

3. Setup Render Account​

  1. Create a Render Account
info

If you would like, you can create a different shared email address for your team. You can use this shared email address to create an account on Render. Only one of you needs to create this account and share the credentials with the rest of your team mates, so it is a good idea to not use a personal password.

  • Visit Render.
  • Click on Sign Up and use any email and password.
  • Complete the sign-up process by verifying your email address if required.

  1. Once you have created and verified your account, log in to Render.

  2. You will be directed to the Render dashboard. Before that, you might have to answer a few questions. Fill it out this way:

3. Directory Structure​

At the end of this lab, your directory structure should be as follows:

├─ ProjectSourceCode
|   ├─ docker-compose.yaml
|   ├─ .gitignore
|   ├─ node_modules
|   ├─ package.json
|   ├─ src
|      ├─ views
|         ├─ pages
|             ├─ home.hbs
|             ├─ login.hbs
|             ├─ register.hbs
|         ├─ partials
|             ├─ header.hbs
|             ├─ footer.hbs
|         ├─ layouts
|             ├─ main.hbs
|      ├─ resources
|         ├─ css
|             ├─ style.css
|         ├─ js
|             ├─ script.js
|         ├─ img
|             ├─ home.png
|      ├─ index.js
|      ├─ init_data
|         ├─ create.sql
|         ├─ insert.sql
|   ├─ test
|         ├─ server.spec.js
|   ├─ init_db.sh
info

You don't need to create node_modules package, it'll be created once you start the docker containers.

4. Setup Database Initialization​

OPTIONAL

If you do not have a database already set up, you can go ahead and initialize the following files for this lab.

  1. Create Database schema

We'll now create the schema for the database for this project. This database will contain only one table.

Update the 00_create.sql file in the init_data folder with a create query to create a users table with the following column names and datatypes:

Column NamesDatatypes
usernameVARCHAR(50) PRIMARY KEY
passwordCHAR(60) NOT NULL
  1. Likewise you can add queries to the 01_insert.sql file - for this lab leave this file blank. In your group project prefix the filenames with a number to determine the order they are going to be executed in.

5. Setup Render​

PAY ATTENTION

You are not required to pay for any of the services on Render. If you are asked for any sort of payment, please go back and check to ensure that you have selected the free tier of the respective service.

Render is a modern cloud platform that simplifies the process of deploying full-stack applications, databases, and static sites. It offers a user-friendly interface and powerful features like automatic deployments from GitHub, free SSL, and built-in support for popular programming languages and frameworks.

Render's key features include:

  1. Automatic Deployments: With Render, you can connect your GitHub repository, and any push to the main branch will automatically trigger a deployment. This makes continuous integration and deployment seamless.

  2. Managed Databases: Render provides managed PostgreSQL databases, handling backups, updates, and scaling automatically. This ensures that your database remains performant and secure without manual intervention.

  3. Environment Variables: You can securely manage environment variables through the Render dashboard, making it easy to configure your applications without exposing sensitive information in your codebase.

  4. Scalability: Render allows you to scale your services effortlessly, from small side projects to production-grade applications, with just a few clicks.

  5. Free SSL and Custom Domains: Render provides free SSL certificates and support for custom domains, ensuring your application is secure and accessible.

1. Create a PostgreSQL Database on Render​

  • Navigate to your Render dashboard and click on the New button.
  • Select Database.
  • Choose PostgreSQL.
  • Name your database users_db.
  • Select PostgreSQL version as 14.
  • Select the appropriate region and click Create Database.
  • Render will provide you with the database connection details. Note these details as you will need them later.
  • Remember to select only the FREE instance.
  • Make sure that the database and user names match your .env file. Leave the selected Region as Oregon (US West).
  • You should now be able to find your db details along with an internal and external url to connect to your db. All of Render’s services are on the same internal private network and will have access to each other.
  • Your instance should have some basic allotment of resources:

2. Create a Web Service on Render​

  • Navigate to your Render dashboard and click on the New button.
  • Select Web Service.
  • Connect your GitHub account and select your repository. You can also make your repo public and use the Public Git Repository option.
  • Name your service and select Node for the environment.

3. Configure the Web Service settings​

  • Root Directory: ProjectSourceCode
  • Build Command: npm install
  • Start Command: node index.js
  • Remember to select a ‘FREE’ instance.

4. Setup Environment Variables​

In the Render dashboard, go to the Environment tab for your web service and add the following environment variables:

  • POSTGRES_USER: The username for your PostgreSQL database (e.g., db_admin)
  • POSTGRES_PASSWORD: The password for your PostgreSQL database. You can use the password generated automatically by Render.
  • POSTGRES_DB: The name of your PostgreSQL database (e.g., users_db). Verify the name on the Render Postgres instance dashboard.
  • POSTGRES_HOST: The host provided by Render for your PostgreSQL database
  • POSTGRES_PORT: The port for your PostgreSQL database (5432)
  • SESSION_SECRET: A secret key for session management (e.g., super_duper_secret)
  • You should be able to find the host name in the connection details of your deployed db instance, which is what you will use to fill out the value for the HOST key.

5. Deploy application​

  • Push to GitHub

    Commit and push your changes to GitHub.

    git add .
    git commit -m "Committing changes."
    git push origin main

    If there are no changes to commit, you can force an empty commit to trigger deployment as follows:

    git commit --allow-empty -m "Trigger Deployment"
    git push origin main
  • Deploy on Render

    Render will automatically detect the changes in your GitHub repository and start deploying your application. Monitor the deployment logs on the Render dashboard.

6. Initialize Database​

info

Unlike docker-compose where we configure the container's init mechanism to initialize the database when it is first started up, we need to create a bash script to initialize our database that needs to be manually executed.

  • Create an init_db.sh file under root in your project directory, and copy over the following into the file:

    init_db.sh
    #!/bin/bash# DO NOT PUSH THIS FILE TO GITHUB# This file contains sensitive information and should be kept private# TODO: Set your PostgreSQL URI - Use the External Database URL from the Render dashboardPG_URI="<DATABASE_EXTERNAL_URL>"# Execute each .sql file in the directoryfor file in init_data/*.sql; do    echo "Executing $file..."    psql $PG_URI -f "$file"done

    • {' '}

  • Update the file to add the database external URL. You should be able to find the external URL in the connection details of your deployed db instance.

  • Install PSQL client locally

    CAUTION: This section is os-dependent, so only complete one of the panels!

    {' '}

    Run the following command on a Linux or a WSL terminal to install the PSQL Client​

    sudo apt-get update
    sudo apt-get install postgresql-client

    To verify installation run the following command

    psql --version
  • Run the init_db.sh script to execute all the SQL files under the init_data folder to initialize the database.

    {' '}



    sh init_db.sh
    Executing init_data/00_create.sql...
    DROP TABLE
    CREATE TABLE
    Executing init_data/01_insert.sql...

7. Verify Deployment​

  • Test the Application

    Once the deployment is complete, navigate to the URL provided by Render for your web service. Verify that your application is running and can interact with the PostgreSQL database.

  • You can find the public URL for your web app on the upper left hand corner of the Render dashboard for the web service:

    • 🎥Recording output
    This is the URL you will be submitting on Canvas.
  • Debugging

    If you encounter issues, check the logs in the Render dashboard and ensure that all environment variables are correctly set.

OPTIONAL

Remove Deployment - After the end of the semester​

If you no longer need the deployment, you can remove the services from the Render dashboard.

Part C​

There is no homework for this lab 🎉

Submission Guidelines​

Submit the link to your deployed app to Canvas. One submission per group is sufficient.

You will be graded on the work that is present on Canvas before the deadline. If the submission is missing, you will receive a 0. This will not be replaced as any submissions after the deadline will be considered as a late submission and we do not accept late submissions.

Regrade Requests​

Please use this link to raise a regrade request if you think you didn't receive a correct grade.

Rubric​

DescriptionPoints
PART A: Pre-Lab QuizComplete the Pre-Lab Quiz before your lab20
Part BThe website is up and running on the cloud and completely functional, and the screenshot has a clear address bar.60
Part C: N/AThere is no homework for this lab0
In class check-inYou showed your work to the TA or CM.20

Please refer to the lab readme or individual sections for information on file names and content to be included in them.