📢 Notice 📢

2 minute read

Notes from the summary of COMP3011 Lecture 11, and online resources.

What is Deployment?

  • Deployment means putting your application somewhere others can access it, typically over the internet or a private intranet.
  • It’s usually the final step after development and testing — though maintenance is ongoing.
  • Both frontend (client) and backend (server) apps must be deployed.

The Deployment Process

  • Some code (e.g., React) needs to be built/compiled before deployment.
  • Others like Python and JavaScript are interpreted at runtime.
  • Tests should be run before deployment to ensure everything works.
  • Tools like CI/CD (e.g., Bitbucket Pipelines) automate deployment as part of the DevOps process (development + operations).

Traditional vs. Modern Deployment

Traditional (1990s–2000s)

  • FTP to upload website files to a server.
  • Server runs PHP/Apache.
  • Could be on a shared or dedicated server.

Modern (2010s–2020s)

  • Cloud platforms handle infrastructure (e.g., AWS, Azure, Google Cloud).
  • Includes containerization and “Anything as a Service” (XaaS).
  • Scalable, pay-as-you-go, and easier dependency management.
  • Code, data, and software are separated for modularity and efficiency.

Cloud Providers & AWS

  • Leading providers: AWS, Microsoft Azure, Google Cloud, Alibaba Cloud.
  • AWS is the most common, and this lecture focuses on:
    • Deploying a React frontend with S3.
    • Deploying a Node.js backend with Lambda.

Assumptions for Deployment

  • Two separate apps:
    • Frontend: React.js SPA
    • Backend: Express-based RESTful API
  • Both managed via Git with deployment automation hooks.

Deploying the Frontend with AWS

Amazon S3

  • Object storage service: stores static assets as objects in buckets.
  • Perfect for static frontends like React apps.
  • Priced per GB + data transfer usage.

IAM (Identity & Access Management)

  • Manages API keys and user permissions.
  • Allows fine-grained control over AWS services.

Deployment Workflow

  1. Build the React app: npm run build
  2. Log into AWS with IAM credentials
  3. Upload compiled files to S3

⚠️ You pay for storage + user access traffic

Frontend Optimizations

  • CloudFront: Global CDN to cache files and speed up access.
  • Route 53: Maps your custom domain (e.g., something.com) to the S3 bucket URL.

Deploying the Backend with AWS

Alternatives:

  • EC2: Virtual machine setup (requires manual config)
  • ECS: Docker-style containerization (runs on EC2)

Preferred: Serverless Deployment

AWS Lambda + API Gateway

  • Lambda runs your Node.js code on demand, only charging for runtime.
  • API Gateway routes HTTP requests to Lambda.
  • Use serverless-http to adapt your Express app to work with Lambda.

Lambda Setup

  • Use a serverless.yml config file to define:
    • AWS region
    • Node version
    • IAM credentials
    • Route mappings
  • After deployment, you’ll receive a Lambda URL (e.g., *.execute-api.*.amazonaws.com)
    • Use Route 53 to assign a custom domain to this backend URL.

Final Considerations

  • This is just one approach — AWS offers many tools.
  • Security: Only give access to those who need it.
  • Billing: Monitor usage to avoid high costs or DoS issues.
  • Use Billing and Cost Management tools in AWS.

AWS Services Used

Service Purpose
S3 Deploying and hosting static frontend assets
IAM Managing AWS credentials and permissions
CloudFront CDN for performance and caching
Route 53 Mapping custom domains to AWS resources
EC2 Virtual machine hosting (manual setup)
ECS Docker container hosting
Lambda Serverless backend execution
API Gateway HTTP routing to Lambda functions

Leave a comment