Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
In the ever-evolving world of web development, one of the most empowering things you can do is take your application from local development all the way to the cloud — and that’s exactly what I did.
Over the past few days, I built and deployed a full-stack application consisting of a React frontend and an Express.js backend, fully containerized and hosted on AWS ECS using Fargate. Here’s a look behind the scenes of how I transformed lines of code into a cloud-native, production-grade deployment.
The Stack
The architecture was simple but effective: a React frontend communicating with an Express backend. I began by developing both apps locally and testing them with Docker to ensure container compatibility.
Frontend Setup Highlights
Each app was placed in its own Docker container with production-ready configurations.
# Build images
docker build -t doot-frontend .
docker build -t doot-backend .
# Authenticate to ECR
aws ecr get-login-password --region us-east-1 \
| docker login --username AWS --password-stdin <account-id>.dkr.ecr.us-east-1.amazonaws.com
# Tag and push
docker tag doot-backend <account-id>.dkr.ecr.us-east-1.amazonaws.com/doot-backend
docker push <account-id>.dkr.ecr.us-east-1.amazonaws.com/doot-backend
Deploying with Amazon ECS + Fargate
Here’s where the magic happened:
? Step 1: Create ECS Cluster
Created a new cluster using Fargate launch type. No EC2 instances needed!
? Step 2: Task Definitions
Defined a task for both the frontend and backend:
Deployed tasks as services, enabling auto-restarts, load balancing (optional), and easier scaling.
? Step 4: Networking & Security
Once deployed, I could access the React frontend via the public IP of the ECS task. It successfully made API calls to the backend.
The satisfaction of seeing everything work together — no server to maintain, fully cloud-native — was amazing.
Key Takeaways
This project was more than just deploying an app — it was about leveling up.
I bridged the gap between development and DevOps, and it deepened my confidence in building, shipping, and scaling full-stack applications in a modern, cloud-native way.
Over the past few days, I built and deployed a full-stack application consisting of a React frontend and an Express.js backend, fully containerized and hosted on AWS ECS using Fargate. Here’s a look behind the scenes of how I transformed lines of code into a cloud-native, production-grade deployment.
The Stack
- Frontend: React (built with Vite)
- Backend: Node.js + Express
- Containerization: Docker
- Cloud Hosting: Amazon ECS with Fargate
- Container Registry: Amazon ECR
The architecture was simple but effective: a React frontend communicating with an Express backend. I began by developing both apps locally and testing them with Docker to ensure container compatibility.
Frontend Setup Highlights
- Built using Vite for lightning-fast bundling
- Dockerized into a lightweight Nginx container
- Served static files from /usr/share/nginx/html
- RESTful API built with Express
- Dockerized using a minimal Node Alpine base image
- Exposed port 3000 for requests
Each app was placed in its own Docker container with production-ready configurations.
# Build images
docker build -t doot-frontend .
docker build -t doot-backend .
# Authenticate to ECR
aws ecr get-login-password --region us-east-1 \
| docker login --username AWS --password-stdin <account-id>.dkr.ecr.us-east-1.amazonaws.com
# Tag and push
docker tag doot-backend <account-id>.dkr.ecr.us-east-1.amazonaws.com/doot-backend
docker push <account-id>.dkr.ecr.us-east-1.amazonaws.com/doot-backend
Deploying with Amazon ECS + FargateHere’s where the magic happened:
? Step 1: Create ECS Cluster
Created a new cluster using Fargate launch type. No EC2 instances needed!
? Step 2: Task Definitions
Defined a task for both the frontend and backend:
- ECR container image
- Port mappings
- Memory/CPU settings
Deployed tasks as services, enabling auto-restarts, load balancing (optional), and easier scaling.
? Step 4: Networking & Security
- Placed tasks in public subnets
- Enabled auto-assign public IP
- Allowed traffic on ports 80 (frontend) and 3000 (backend) using security groups
Once deployed, I could access the React frontend via the public IP of the ECS task. It successfully made API calls to the backend.
The satisfaction of seeing everything work together — no server to maintain, fully cloud-native — was amazing.
Key Takeaways
- Fargate removes the burden of server management.
- Properly configuring networking and security groups is crucial.
- Dockerizing both frontend and backend simplifies deployment.
- Amazon ECR is a reliable and scalable container registry.
- You don't have to be a cloud expert to get started — just patient and persistent.
This project was more than just deploying an app — it was about leveling up.
I bridged the gap between development and DevOps, and it deepened my confidence in building, shipping, and scaling full-stack applications in a modern, cloud-native way.