Session Reviews

[jonathanvanduyne]

10/2/24

1. Accidentally merged PR where we deleted our current database function
2. Went to github repo PR tab
3. clicke on commit history button
4. grabbed the hash of the previous commit before the mistake commit
5. in CLI - on dev branch -- reset --hard ${commitID}
6. due to branch protection a new branch and pr has to be made to merge the change back into dev
7. because the commit is behind our current branch github doens't recongnize the changes
8. copy and paste file into a new branch and push up the new pr.

[jonathanvanduyne]

10/3/24 - Trouble-shooting our db function

1. Running the entire db model and db function through LLM's to get detailed troubleshooting feedback.
   a. issue has to do with left joins & inner joins and returning of null value data messing up the cohorts on 3 different tables

2. getting the correct number of cohort members

3. ran the client and are getting the correct students

[Odigene12]

10/9/2024

1. What challenges did we face?

Whenever we get all the students for a cohort from the following endpoint: students?cohort={cohortId}, the following JSON response comes back:

Lazy initialization is running tons of instructions to the ORM prior to the query actually executing to fetch the data that we are requesting. Which means we are running a lot of queries prior to serialization with all of the connected tables. Running all of the queries separately is an expensive process that we need to solve. The best approach was to work from the client JSON structure to what it was receiving and work backwards to see how we could consolidate all of the queries into hopefully one query.

This is an example for cohortId = 15

{
    "count": 27,
    "next": null,
    "previous": null,
    "results": [
        {
            "id": 291,
            "name": "Gust Marks",
            "score": 0,
            "tags": [],
            "proposals": [],
            "book": {
                "id": 3,
                "name": "Book 2",
                "project": "Functionland"
            },
            "assessment_status": 0,
            "github": "jwwinburn",
            "cohorts": [
                {
                    "id": 15,
                    "name": "Day Cohort 63",
                    "start_date": "2023-02-13",
                    "end_date": "2023-08-04"
                }
            ],
            "archetype": ""
        }
    ]
}

We had to find a way to build out the student object to optimize the speed at which the data was retrieved. At first, the call to get students by cohort ID was about 12 to 20 seconds.

Then, after refactoring, we got it down to milliseconds.

2. How did we go about overcoming this challenge? What did we do?

First, we dove into the codebase to find out where the different Django models and Serializers were getting the data for the student object. We found that the MicroStudent serializer was the primary serializer to get the properties and values of the student object.

Next, we found out that Django was making a bunch of calls to the database using the Django ORM. These several calls in several places were impacting the performance of the API call that retrieved the students by cohort.

We were able to circumvent this performance impact by creating our own SQL function that was used in tandem with our own custom serializer that we created to enhance the performance of the mentioned API call.

3. How did we go about optimizing data retrieval using our SQL Function?

We optimized our data retrieval by first using CTEs specifically for each student property and then tying them all together in one SQL function.

However, we ran into an issue in which we were receiving duplicate records for each student.

We overcame this by using a combination of json_agg, json_build_object, different kinds of joins, and COALESCE to filter out out those duplicates and get the actual number of students.

CREATE FUNCTION get_students_by_cohortId(user_cohort_id INTEGER) 
RETURNS TABLE (
    user_id INTEGER,
    student_name TEXT,
    score INTEGER,
    tags TEXT,
    proposals TEXT,
    book_id INTEGER,
    book_name TEXT,
    project_name TEXT,
    book_index TEXT,
    status_id INTEGER,
    github_handle TEXT,
    cohort_id INTEGER,
    cohort_name TEXT,
    break_start_date TEXT,
    end_date TEXT,
    briggs_myers_type TEXT
) AS $$
BEGIN
    RETURN QUERY
    WITH student_score AS (
        SELECT 
            lr.student_id, 
            SUM(lw.weight) AS score
        FROM "LearningAPI_learningrecord" AS lr
        JOIN "LearningAPI_learningweight" AS lw ON lr.weight_id = lw.id
        WHERE lr.achieved = TRUE
        GROUP BY lr.student_id
    ),
    student_name AS (
        SELECT 
            nsu.user_id, 
            CONCAT(au.first_name, ' ', au.last_name) AS name,
            nsu.github_handle
        FROM "LearningAPI_nssuser" AS nsu
        JOIN "auth_user" AS au ON au.id = nsu.user_id
    ),
    student_tag AS (
        SELECT 
            lst.student_id,
            json_agg(
                json_build_object(
                    'id', lst.tag_id,
                    'name', lt.name
                )
            )::text AS tags
        FROM "LearningAPI_studenttag" AS lst
        JOIN "LearningAPI_tag" AS lt ON lt.id = lst.tag_id
        WHERE lst.tag_id IS NOT NULL
        GROUP BY lst.student_id
    ),
    student_proposals AS (
        SELECT
            u.id,
            COALESCE(
                json_agg(
                    json_build_object(
                        'proposal_id', cap.id,
                        'course_id', co.id,
                        'proposal_status', 
                        CASE
                            WHEN ps.status = 'MVP' THEN 'mvp'
                            WHEN ps.status = 'Approved' THEN 'approved'
                            WHEN ps.status = 'In Review' THEN 'reviewed'
                            WHEN ps.status IS NULL THEN 'submitted'
                        END
                    )
                )
            , '[]')::text AS proposals
        FROM "LearningAPI_nssuser" AS u
        LEFT JOIN "LearningAPI_capstone" AS cap ON cap.student_id = u.id
        LEFT JOIN "LearningAPI_capstonetimeline" AS tl
        ON cap.id = tl.capstone_id
        AND tl.id = (
            SELECT id
            FROM "LearningAPI_capstonetimeline"
            WHERE cap.id = capstone_id
            ORDER BY "date" DESC
            LIMIT 1
        )
        LEFT JOIN "LearningAPI_proposalstatus" AS ps ON ps.id = tl.status_id
        LEFT JOIN "LearningAPI_course" AS co ON co.id = cap.course_id
        GROUP BY u.id
    ),
    student_books AS (
        SELECT
            spr.student_id AS student_id,
            bk.id AS book_id, 
            bk."name" AS book_name,
            pr."name" AS project_name,
            bk.index as book_index
        FROM "LearningAPI_book" bk
        JOIN "LearningAPI_project" pr ON pr.book_id = bk.id
        JOIN "LearningAPI_studentproject" spr ON spr.project_id = pr.id
        AND spr.id = (
            SELECT id
            FROM "LearningAPI_studentproject"
            WHERE student_id = spr.student_id
            ORDER BY "id" DESC
            LIMIT 1
        )
    ),
    student_assessment_status AS (
        SELECT
            sa.student_id,
            sa.status_id
        FROM "LearningAPI_studentassessment" sa
        WHERE sa."id" = (
            SELECT MAX(id)
            FROM "LearningAPI_studentassessment"
            WHERE student_id = sa.student_id
        )
    )
    SELECT 
        nu.user_id::int,
        sn."name"::text AS student_name,
        COALESCE(ss.score, 0)::int AS score,
        COALESCE(st.tags, '[]'::text) as tags,
        COALESCE(sp.proposals, '[]'::text) AS proposals,
        sb.book_id::int,
        sb.book_name::text,
        sb.project_name::text,
        sb.book_index::text,
        COALESCE(sa.status_id, 0)::int,
        nu.github_handle::text,
        co.id::int AS cohort_id,
        co."name"::text AS cohort_name,
        co.break_start_date::text,
        co.end_date::text,
        stp.briggs_myers_type::text
    FROM "LearningAPI_nssuser" nu
    JOIN "LearningAPI_nssusercohort" nuc ON nu.user_id = nuc.nss_user_id
    JOIN "LearningAPI_cohort" co ON co.id = nuc.cohort_id
    LEFT JOIN student_score AS ss ON ss.student_id = nu.user_id
    LEFT JOIN student_name AS sn ON sn.user_id = nu.user_id
    LEFT JOIN student_tag AS st ON st.student_id = nu.user_id
    LEFT JOIN student_proposals AS sp ON sp.id = nu.user_id
    LEFT JOIN student_books AS sb ON sb.student_id = nu.user_id
    LEFT JOIN student_assessment_status AS sa ON sa.student_id = nu.user_id
    LEFT JOIN "LearningAPI_studentpersonality" stp ON stp.student_id = nu.user_id
    WHERE nuc.cohort_id = user_cohort_id
    ORDER BY nu.user_id;
END;
$$ LANGUAGE plpgsql;

4. How was it like working with JOINS?

Working with the difference joins seemed straightforward until we ran into the issue of all students in a cohort not returning back in the query. We had to alternate between INNER and LEFT JOINS to get back the results we needed.

Additionally, we got to our wits end with these duplicate rows, so we utilized ChatGPT to help us find a good solution for what we needed. ChatGPT suggested json_agg and json_build_object, but we had no idea how to implement that. Thankfully, Steve stepped in and showed us how that worked along with the COALESCE operator.

5. What was the deal with those proposals?

The issue that was going on was that proposals for student capstones had different statuses that had to be recorded. However, we didn't know of a way to record those statuses and retrieve them in our query.

This is where we used a combination of a CASE WHEN statement along with json_agg and json_build_object and then COALESCE in the main SELECT portion of our SQL function

This is how we did the CTE for proposals as seen in our SQL function.

student_proposals AS (
        SELECT
            u.id,
            COALESCE(
                json_agg(
                    json_build_object(
                        'proposal_id', cap.id,
                        'course_id', co.id,
                        'proposal_status', 
                        CASE
                            WHEN ps.status = 'MVP' THEN 'mvp'
                            WHEN ps.status = 'Approved' THEN 'approved'
                            WHEN ps.status = 'In Review' THEN 'reviewed'
                            WHEN ps.status IS NULL THEN 'submitted'
                        END
                    )
                )
            , '[]')::text AS proposals
        FROM "LearningAPI_nssuser" AS u
        LEFT JOIN "LearningAPI_capstone" AS cap ON cap.student_id = u.id
        LEFT JOIN "LearningAPI_capstonetimeline" AS tl
        ON cap.id = tl.capstone_id
        AND tl.id = (
            SELECT id
            FROM "LearningAPI_capstonetimeline"
            WHERE cap.id = capstone_id
            ORDER BY "date" DESC
            LIMIT 1
        )
        LEFT JOIN "LearningAPI_proposalstatus" AS ps ON ps.id = tl.status_id
        LEFT JOIN "LearningAPI_course" AS co ON co.id = cap.course_id
        GROUP BY u.id
    )

Type casting

sn."name"::text casts the value of sn."name" to a TEXT type

In our json_agg here below, we are casting the values of our CTE into a json object.

COALESCE(
                json_agg(
                    json_build_object(
                        'proposal_id', cap.id,
                        'course_id', co.id,
                        'proposal_status', 
                        CASE
                            WHEN ps.status = 'MVP' THEN 'mvp'
                            WHEN ps.status = 'Approved' THEN 'approved'
                            WHEN ps.status = 'In Review' THEN 'reviewed'
                            WHEN ps.status IS NULL THEN 'submitted'
                        END
                    )
                )
            , '[]')::text AS proposals -- here is the type casting

Here is the custom serializer we created in our student_by_cohort_serializer.py file:

import json
from rest_framework import serializers


class StudentCohortDataSerializer(serializers.Serializer):
    proposals = serializers.SerializerMethodField()
    book = serializers.SerializerMethodField()
    cohorts = serializers.SerializerMethodField()
    tags = serializers.SerializerMethodField()
    
    def get_proposals(self, obj):
    
     # Assuming the field storing the JSON string is called `json_field`
        json_string = obj["proposals"]  # Replace with the actual field name

        try:
            # Parse the string into a Python list of dictionaries
            parsed_data = json.loads(json_string)
            print(parsed_data)
            return parsed_data  # Return the parsed JSON data as Python objects
        except json.JSONDecodeError:
            return None  # Handle error gracefully, you can return an empty list or None
        
    def get_book(self, obj):
        
       return {
                "id": obj["book_id"],
                "name": obj["book_name"],
                "project": obj["project_name"]
            }

    def get_cohorts(self, obj):
        
       return [{
                "id": obj["cohort_id"],
                "name": obj["cohort_name"],
                "start_date": obj["break_start_date"]
            }]
    
    def get_tags(self, obj):
    
     # Assuming the field storing the JSON string is called `json_field`
        json_string = obj["tags"]  # Replace with the actual field name

        try:
            # Parse the string into a Python list of dictionaries
            parsed_data = json.loads(json_string)
            print(parsed_data)
            return parsed_data  # Return the parsed JSON data as Python objects
        except json.JSONDecodeError:
            return None  # Handle error gracefully, you can return an empty list or None
    
    id = serializers.IntegerField(source='user_id')
    name = serializers.CharField(source='student_name')
    score = serializers.IntegerField()
    assessment_status = serializers.IntegerField(source='status_id')
    github = serializers.CharField(source='github_handle')
    archetype = serializers.CharField(source='briggs_myers_type')
    end_date = serializers.CharField()

[jonathanvanduyne]

10/16/24

1. Creating System Architecture diagram to map out the flow our application using Mermaid.

Mermaid is a markdown-like language used for creating diagrams and visualizations directly within markdown documents. It allows users to generate flowcharts, sequence diagrams, Gantt charts, and more, using a simple syntax. This makes it particularly useful for documentation, technical specifications, and project planning. Mermaid is often integrated into tools like GitHub, GitLab, and Markdown editors, enhancing the ability to visualize information without needing separate graphic design software.

For example, to create the following flowchart, you might use the following syntax.

graph TD;
    A[Start] --> B[Process];
    B --> C{Decision};
    C -->|Yes| D[Outcome 1];
    C -->|No| E[Outcome 2];

Loading

"
mermaid
graph TD;
A[Start] --> B[Process];
B --> C{Decision};
C -->|Yes| D[Outcome 1];
C -->|No| E[Outcome 2];
"

2. Review cloud basics
   a - lots of providers - azure, aws, digital ocean
   b - chose azure as all of us are in Microsoft ecosystem at our workplaces
   c - steve navigated azure site with led to azure dev ops.
   d- created a new project
   e - added group as users
   f - got completely stuck on getting the group access to the repo

[jonathanvanduyne]

10/17/24

1. Azure does not sync with github so we switched to AWS due to its popularity and ability to do all things
2. Spent remainder of session with Steve sharing screen setting up the AWS account and adding us as users

[jonathanvanduyne]

10/30/2024

-Prompt chatgpt for best configuration methods for hosting our application on AWS

Here are definitions and use cases for each AWS service or tool:

1. AWS CLI (Amazon Web Services Command Line Interface)

• Definition: A command-line tool for managing AWS services using scripts and commands.
• Use Case: Developers use AWS CLI to automate and manage resources, like launching EC2 instances, configuring S3 buckets, and deploying applications without manually accessing the AWS console.

2. IAM (Identity and Access Management)

• Definition: AWS's service for managing user permissions and access to AWS resources.
• Use Case: Companies use IAM to create and manage user roles with specific permissions, ensuring that employees only access the resources they need for their role, such as limiting developers to non-production resources.

3. EC2 (Elastic Compute Cloud)

• Definition: AWS's cloud-based virtual server service for hosting applications and running custom software.
• Use Case: Companies use EC2 to host web servers, databases, and other applications, allowing them to scale their server capacity up or down as needed.

4. S3 (Simple Storage Service)

• Definition: A scalable object storage service for storing and retrieving any amount of data, such as files, images, and backups.
• Use Case: S3 is used to store static website content, application assets, backups, and large data files that need to be highly available and durable.

5. RDS (Relational Database Service)

• Definition: A managed relational database service that supports various database engines like PostgreSQL, MySQL, and Oracle.
• Use Case: RDS is used to set up, operate, and scale relational databases in the cloud with automated backups and easy scaling, freeing teams from database maintenance tasks.

6. VPC (Virtual Private Cloud)

• Definition: A virtual network in AWS that isolates resources and controls traffic through network configuration.
• Use Case: VPC is used to create a secure network environment for applications, where sensitive data is protected within a private subnet accessible only to certain resources.

7. Subnet

• Definition: A range of IP addresses within a VPC that groups resources and controls traffic based on security needs.
• Use Case: Subnets are used to isolate public and private resources, such as keeping a database in a private subnet that can only be accessed by application servers in a public subnet.

8. Amazon Elastic Beanstalk

• Definition: A platform-as-a-service that simplifies deployment and scaling of web applications and services.
• Use Case: Developers use Elastic Beanstalk to deploy applications quickly with automatic resource provisioning, scaling, and monitoring, without deep infrastructure management.

9. Gunicorn (Green Unicorn)

• Definition: A Python WSGI HTTP server for running Django and Flask applications in a production environment.
• Use Case: Gunicorn is used in deployment to handle requests efficiently, especially when paired with Nginx, for high-performance and scalable Python applications.

10. Nginx

• Definition: A high-performance web server and reverse proxy server commonly used to handle HTTP requests.
• Use Case: Nginx is often used as a load balancer and reverse proxy in front of applications like Django (served by Gunicorn) to handle static files and balance traffic across servers.

11. Amazon CloudFront

• Definition: A content delivery network (CDN) that speeds up the delivery of web content by caching it at edge locations.
• Use Case: CloudFront is used to serve static and dynamic content with low latency, making it ideal for media-heavy sites and global applications needing fast access.

12. Route 53

• Definition: AWS's scalable Domain Name System (DNS) web service for managing domain names and traffic routing.
• Use Case: Route 53 is used to register domain names and direct traffic to AWS resources, such as linking a domain to an S3-hosted website or EC2-hosted application.

13. AWS Certificate Manager (ACM)

• Definition: A service for managing SSL/TLS certificates for securing websites and applications.
• Use Case: ACM is used to issue and manage SSL certificates for AWS resources (e.g., CloudFront or Elastic Load Balancer), enabling HTTPS traffic with minimal management overhead.

14. GitHub Actions

• Definition: A CI/CD automation tool integrated with GitHub, used to build, test, and deploy code.
• Use Case: Teams use GitHub Actions to automate testing and deployment workflows directly from GitHub, ensuring reliable updates to applications whenever code changes.

15. CI/CD (Continuous Integration and Continuous Deployment)

• Definition: Practices for automatically building, testing, and deploying code to streamline software development.
• Use Case: CI/CD is implemented to automate testing and deployment, reducing manual work, and speeding up the release cycle for applications.

16. SSHing

• Definition: Using SSH (Secure Shell) to connect securely to remote servers.
• Use Case: Developers SSH into EC2 instances to configure or troubleshoot applications directly on the server, ensuring secure remote management.

17. CloudWatch

• Definition: A monitoring and logging service for AWS resources and applications.
• Use Case: CloudWatch is used to track metrics and logs from AWS services like EC2 and RDS, enabling teams to monitor system health and set alarms for performance issues.

18. Backup and Disaster Recovery

• Definition: Strategies for creating data backups and planning restoration in case of system failure.
• Use Case: AWS offers automated backups for services like RDS, and companies use these backups to quickly restore data and maintain availability if an unexpected event occurs.

19. SSL & TLS

SSL (Secure Sockets Layer) and TLS (Transport Layer Security) are protocols used to secure communication over computer networks, particularly the internet. Here’s a brief overview of both:
SSL (Secure Sockets Layer)

Origin: SSL was developed by Netscape in the 1990s to secure web traffic.
Versions: The most commonly used versions were SSL 2.0 and SSL 3.0, but both have known vulnerabilities and are now considered outdated.
Function: SSL encrypts data transmitted between a client (like a web browser) and a server, ensuring confidentiality and integrity.

TLS (Transport Layer Security)

Successor: TLS is the successor to SSL and is more secure and efficient. The first version, TLS 1.0, was introduced in 1999 as an upgrade to SSL 3.0.
Versions: The current versions include TLS 1.0, 1.1, 1.2, and 1.3. TLS 1.2 and 1.3 are widely used today, with 1.3 offering improved performance and security features.
Function: Like SSL, TLS provides encryption, data integrity, and authentication, but with stronger encryption algorithms and better security practices.

Key Features of Both

Encryption: Protects data from being read by unauthorized parties during transmission.
Authentication: Ensures that the parties communicating are who they claim to be, typically using digital certificates.
Data Integrity: Guarantees that data has not been altered during transmission.

While the term SSL is often still used colloquially to refer to both protocols, TLS is the current standard for secure communication on the internet.

[Odigene12]

graph TD
    %% Frontend %%
    A[React Application] -->|Build and Deploy| B[S3 Bucket]
    B -->|Serve via| C[Amazon CloudFront]
    C -->|DNS Routing| D[Route 53]
    
    %% SSL %%
    C -->|HTTPS| ACM[AWS Certificate Manager]

    %% Backend %%
    E[Elastic Beanstalk or EC2 Instance] -->|Run Django API| F[Amazon RDS PostgreSQL]
    
    %% Database %%
    subgraph Backend Network [VPC Private Subnet]
        E --> F
    end
    
    %% Monitoring %%
    E -->|Logs and Metrics| G[CloudWatch]

    %% Code Management %%
    H[GitHub Repositories] -->|Push code| E
    H -->|Deploy Frontend| B

    %% CI/CD %%
    H -->|GitHub Actions| E
    H -->|GitHub Actions| B
    

Loading

[Odigene12]

Here's a brief, step-by-step summary to set up and deploy your application using AWS:

Initial Preparation

• 1. Configure AWS CLI:
  • Install and configure the AWS CLI on your local machine using aws configure and enter your credentials.
• 2. Set Up GitHub Repositories:
  • Ensure you have separate GitHub repositories for your client app (React) and API (Django).
• 3. Prepare Code for Deployment:
  • Ensure your code is production-ready with environment variables, configuration files, and any necessary build scripts.

Frontend Deployment (React)

• 4. Build the React Application:
  • Run npm run build to create the production build.
• 5. Deploy to Amazon S3:
  • Create an S3 bucket for hosting the React app.
  • Use aws s3 cp or a CI/CD pipeline to upload the build files to the S3 bucket.
• 6. Set Up Amazon CloudFront:
  • Configure CloudFront as a CDN for the S3 bucket to improve global performance.
• 7. Configure Route 53:
  • Set up a domain or subdomain using Route 53 for public access.

Backend Deployment (Django)

• 8. Create an Elastic Beanstalk Environment:
  • Use the Elastic Beanstalk console or the CLI (eb init and eb create) to create a Python-based environment.
• 9. Configure Environment Variables:
  • Set environment variables for the Django app (e.g., DATABASE_URL, SECRET_KEY).
• 10. Deploy the Django Application:
  • Use eb deploy to deploy the code to Elastic Beanstalk.
• 11. Secure Your API:
  • Configure SSL/TLS termination in Elastic Beanstalk using AWS Certificate Manager (ACM).

Database Setup (PostgreSQL)

• 12. Launch Amazon RDS:
  • Create an RDS instance for PostgreSQL and set up security groups to allow access only from the EC2 instances or Elastic Beanstalk environment.
• 13. Configure Django Database Settings:
  • Update the settings.py file to use the RDS database URL.

Network Configuration

• 14. Set Up VPC:
  • Ensure your resources are within a VPC with subnets and security groups configured for isolation and access control.
• 15. Create Subnets and Route Tables:
  • Create public and private subnets for your frontend, API, and database, as needed.
• 16. Add NAT Gateway (optional):
  • For outbound internet access from instances in private subnets.

Security and Monitoring

• 17. Set Up Security Groups:
  • Create and attach security groups to control traffic to EC2 instances and RDS.
• 18. Configure CloudWatch:
  • Enable logging and monitoring for both EC2 and RDS to track performance and health.
• 19. Set Up IAM Roles:
  • Create IAM roles with the appropriate permissions for Elastic Beanstalk and EC2 instances.

Automation and CI/CD

• 20. Integrate GitHub Actions:
  • Set up GitHub Actions workflows for automated deployment to S3 (frontend) and Elastic Beanstalk (backend).
• 21. Create Backup and Disaster Recovery Plans:
  • Enable automated RDS backups and create a strategy for snapshotting and restoring instances as needed.

These steps provide a structured approach to setting up and deploying your React and Django application on AWS.

[Odigene12]

graph TD
    %% User Entry %%
    User[User] -->|Requests domainName| Route53[Route 53]
    
    %% Route 53 to S3 for Static Content %%
    Route53 -->|Routes to| S3[S3 Bucket Static Content]
    S3 -->|Serves static files HTML CSS JS| Browser[User's Browser]
    
    %% API Request from Frontend in Browser %%
    Browser -->|API Call to fetch dynamic data| Route53API[Route 53 API Subdomain]
    Route53API -->|Routes to| ALB[Application Load Balancer]

    %% Load Balancer to Elastic Beanstalk %%
    ALB -->|Distributes to instances| EB[Elastic Beanstalk]
    EB -->|Runs Django API| DjangoAPI[Django API]

    %% Django API to Amazon RDS %%
    DjangoAPI -->|Queries and updates| RDS[Amazon RDS PostgreSQL]

    %% Response Flow %%
    RDS -->|Returns data| DjangoAPI
    DjangoAPI -->|Returns response| ALB
    ALB -->|Forwards response| Browser

Loading

[jonathanvanduyne]

11/7/24 -

1. Begin discussion on file path routing in relation to route 53 on AWS - does anything in the project need changed FE/BE - no
2. Ask GPT on how to set github actions

To set up a GitHub Action for deploying your React app to an S3 bucket, you'll follow these key steps:
Step 1: Prepare AWS Credentials

Create an IAM user in AWS with permissions to access S3.
Assign this IAM user a policy with at least s3:PutObject and s3:DeleteObject permissions for the target bucket.
Take note of the AWS Access Key ID and Secret Access Key for this user.

Step 2: Add AWS Secrets to GitHub

In your GitHub repository:

Go to Settings > Secrets and variables > Actions > New repository secret.
Add two secrets:
    AWS_ACCESS_KEY_ID – the Access Key ID from Step 1.
    AWS_SECRET_ACCESS_KEY – the Secret Access Key from Step 1.

Step 3: Write the GitHub Action Workflow

In the root of your repository, create a .github/workflows directory.

Inside this directory, create a file like deploy.yml and add the following YAML configuration:

yaml

name: Deploy to S3

on:
  push:
    branches:
      - main  # or the branch you want to deploy from

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v3

    - name: Install dependencies
      run: |
        npm install
        npm run build  # Build your React app

    - name: Deploy to S3
      uses: aws-actions/s3-sync@v1
      with:
        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        bucket: your-s3-bucket-name  # Replace with your actual bucket name
        region: your-s3-region  # Replace with your bucket's region
        source-dir: build  # Directory to upload (React’s default build directory)

Explanation of Workflow Steps

on: push: This triggers the workflow on a push to the main branch.
Install dependencies: Runs npm install and npm run build to create the production build.
Deploy to S3: The aws-actions/s3-sync action syncs the build folder to your specified S3 bucket.

Step 4: Test the Workflow

Commit and push your changes to the main branch (or the branch specified in on: push).
The workflow should trigger, building and deploying your React app to S3.

This setup will automatically deploy your app to S3 whenever you push to main. Let me know if you need further customization or additional steps!

3. Currently working through permission on AWS. Seemingly we have to add a policy for ourselves so that we can be added to the group but that is failing currently.

[Odigene12]

11/20/2024

• We are trying to fix the build errors when deploying our client app.

• We had to ensure the package.lock.json file was removed before doing an audit fix and then npm install on a new branch before merging it up to dev and then to main to kick off the build.

• To start the meeting, Will did the following

• Removed the .do directory

• Update the Node engine in package.json to >=22.2.0

• Generated a new package-lock.json file to store all of the new dependency trees

• Then Odie and Steve pulled the branch and verified that the dev server still works on our machines

• We got the changes merged into main for a new release. Build was successful. Deploy was successful.

Domain Configuration

• Once you have a registered domain, we have to configure it and do the DNS.
• You have to tell the place where you registered the domain name (in our case Squarespace) to route all traffic to Digital Ocean using its name servers.
• We add the domain on Digital Ocean under Networking in Digital Ocean, then we use that info to add to where our domain is registered (Squarespace).
• We now can go back to Digital Ocean where we added our domain and use our domain name to then tell it where to go using HOSTNAME and Will Direct To
• TTL can be specified for how long you want to wait before the site goes live.

[jonathanvanduyne]

12/4/24 -

Setting up Database -- setup DB first

Env variables for the api on digital ocean when we host the api

Setting up API --
https://github.com/nashville-software-school/server-side-python-curriculum/blob/main/book-3-deployments/chapters/DEPLOY_DJANGO_01.md

1. change resource size to $10/month option
2. change run command to
   python manage.py makemigrations {name of your api project} python manage.py migrate gunicorn --worker-tmp-dir /dev/shm django_app.wsgi
3. env variables are stored in the setting.py file of the API. keys are the strings inside of os.getenv()
4. On env variables - key DISABLE_COLLECTSTATIC needs to be added and set to 1

return to the DB and add the trusted source and add label that we used for the API app

[jonathanvanduyne]

12/19/24 --

1. updated env variables on the client to match the api site deployed on digital ocean
2. go to admin dashboard to change user permission to be an instructor instead of student (default)
3. had issue with password being plain text where we needed to encrypt the password from the plain text env variable, handled that in the api superuser fixture
4. ended with a routing issue where the github did authentication then it routed us instead of apollowise.com to nss.teams.com
   a- everything is working except this routing issue