Lädt...

🔧 Deploy a Static Website on EC2 Using AWS CI/CD Services (CodeBuild, CodeDeploy, GitHub, and Nginx)


Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

Step-by-Step Guide to Deploying an Index.html Page Using Nginx and AWS CI/CD Tools

💡 Introduction

Hey folks!

Today, we’re diving into an exciting hands-on project where we’ll explore AWS CI/CD services like CodeBuild and CodeDeploy to automate the deployment of a static website.

Since July 2024, AWS CodeCommit is no longer available for new users, so instead, we’ll be using a GitHub repository as our project's source control. This adjustment makes our setup even more versatile, as GitHub is widely used across many organizations.

By the end of this project, you’ll gain practical experience with the AWS CI/CD pipeline, understand how infrastructure automation works inside the AWS ecosystem, and get your hands dirty with setting up and serving your site through an Nginx server on an EC2 instance.

So, without further ado — let’s get started!

💡 Pre-Requisites

Before we jump into the hands-on part, let’s make sure everything is set up properly.

  • You’ll need an AWS account with an IAM user that has the necessary permissions to access services like CodeBuild, CodeDeploy, EC2, and S3.

  • Make sure the IAM user has sufficient privileges to create and manage these resources — otherwise, you might run into permission issues during the project.

  • A basic understanding of AWS services would be very helpful. If you’re new to AWS, don’t worry — I’ll try to keep things beginner-friendly and explain important steps along the way!

Once you have these ready, you’re all set to move forward.

💡Getting Started

Let’s begin by understanding how the codebase works and how it ties into the AWS CI/CD pipeline.

The project is publicly available on GitHub:

👉 AWS-Code-Service-Blog

Inside this repository, you’ll find two key configuration files: appspec.yaml and buildspec.yml.

🧾 appspec.yaml – For CodeDeploy

This file defines the deployment configuration for AWS CodeDeploy. Here's a quick breakdown:

  • OS: Ubuntu (our EC2 instance will be Ubuntu-based)

  • Destination: /var/www/html — this is the default directory served by Nginx

  • Hooks:

    • The file contains BeforeInstall and AfterInstall hooks that run shell scripts to install and start Nginx. These scripts include basic commands tailored for Ubuntu.

🛠 buildspec.yml – For CodeBuild

This file defines the build instructions for AWS CodeBuild. It’s divided into three phases:

  • Install: Installs Nginx

  • Build: Moves the index.html file to /var/www/html

  • Post-Build: Uploads the final build artifacts to an S3 bucket

🪣 Step 1: Create an S3 Bucket

We’ll need an S3 bucket to store our build artifacts.

  1. Head over to the S3 console.

  2. Click Create Bucket.

  3. Give your bucket a unique name like demo-1231234.

  4. Leave all other settings as default.

  5. Click Create Bucket.

Image description

🔧 Step 2: Set Up CodeBuild

Now, let’s configure CodeBuild to build the project:

  1. Open the CodeBuild service from the AWS Console.

  2. Click Create Build Project.

  3. Project Name: Nginx-Build

  4. Project Type: Default

🧩 Source

  • Source Provider: GitHub

  • Repository: Public Repository

  • Repository URL:

    https://github.com/Pravesh-Sudha/AWS-Code-Service-Blog

Image description

⚙️ Environment

  • Operating System: Change from Amazon Linux to Ubuntu

  • Leave the rest of the settings as default

Image description

📄 Buildspec

  • Choose "Use a buildspec file" (this will use the buildspec.yml from your repo)

📦 Artifacts

  • Type: Amazon S3

  • Bucket name: Select your newly created bucket (demo-1231234)

  • Name: demo-nginx

  • Select Zip as the preferred Artifacts packing method.

  • Leave everything else as default

Image description

Finally, click Create Build Project. Once the project is created, click on Start Build and wait for it to complete (it usually takes around 4–5 minutes). Once done, your project will be successfully built and your artifacts will be stored in the S3 bucket!

Image description

💡 Setting Up IAM Roles and EC2 Instance for Deployment

Now that our build artifacts are ready in S3, let’s prepare the infrastructure for deployment. This involves:

  1. Creating IAM roles for EC2 and CodeDeploy

  2. Launching an EC2 Ubuntu instance

  3. Installing the CodeDeploy agent

  4. Setting up CodeDeploy application and deployment group

🔐 Step 1: Create IAM Roles

We'll need two roles — one for EC2 and another for CodeDeploy.

✅ Role 1: ec2-code-deploy (For EC2 Instance)

  1. Go to the IAM Console and click on Roles in the sidebar.

  2. Click Create Role

  3. Choose AWS Service, and select EC2 under the use case.

Image description

  • Click Next, and attach the following policies:

    • AmazonEC2FullAccess
    • AmazonEC2RoleforAWSCodeDeploy
    • AmazonEC2RoleforAWSCodeDeployLimited
    • AmazonS3FullAccess
    • AWSCodeDeployFullAccess
    • AWSCodeDeployRole
  • Click Next, give it a name: ec2-code-deploy, and Create Role

Image description

✅ Role 2: ec2-code-deploy-role (For CodeDeploy)

  1. Again, click on Create Role

  2. This time, select CodeDeploy as the use case

  3. Attach these policies:

* `AWSCodeDeployRole`

* `AmazonS3FullAccess`

* `AmazonEC2FullAccess`
  • Name the role ec2-code-deploy-role and create it

Image description

🖥 Step 2: Launch EC2 Instance and Install CodeDeploy Agent

Let’s set up the EC2 instance that will serve our static site.

  1. Go to the EC2 Console, click Launch Instance

  2. Instance Name: nginx-demo

  3. AMI: Ubuntu (latest version)

  4. Instance Type: t2.micro

  5. Key Pair: No need to create (we’ll use EC2 Connect)

  6. Security Group: Allow HTTP and HTTPS access

  7. Launch the instance

Image description

🔌 Connect & Install CodeDeploy Agent

Once the instance is running:

  1. Select the instance and click Connect

  2. Choose EC2 Instance Connect and open the terminal

  3. Run the following commands:

sudo apt update
sudo apt install ruby-full -y
sudo apt install wget -y
cd /home/ubuntu
wget https://aws-codedeploy-us-east-1.s3.us-east-1.amazonaws.com/latest/install # Change Region Accordingly
chmod +x ./install
sudo ./install auto
sudo systemctl status codedeploy-agent

⚠️ If you're using a region other than us-east-1 (N. Virginia), change the wget URL to match your region.

After installation, you should see that the CodeDeploy agent is active and running.

Image description

🔗 Step 3: Attach IAM Role to EC2 Instance

To allow your EC2 instance to access S3 and CodeDeploy, we need to attach the ec2-code-deploy role:

  1. Go back to the EC2 Console

  2. Select the nginx-demo instance

  3. Click Actions → Security → Modify IAM Role

  4. Choose ec2-code-deploy and click Update IAM Role

Image description

🚀 Step 4: Create CodeDeploy Application and Deployment Group

🛠 Create the Application

  1. Go to the CodeDeploy Console

  2. Click Create Application

  3. Name it: Nginx-app

  4. Compute Platform: EC2/on-premises

  5. Click Create Application

Image description

📦 Create Deployment Group

  1. Under your newly created app (Nginx-app), click Create Deployment Group

  2. Name it: nginx-deploy-grp

  3. Service Role: Choose ec2-code-deploy-role

  4. Environment Configuration:

* Select **EC2 Instances**

* Under **Tag Key**, enter: `Name`

* Under **Tag Value**, enter: `nginx-demo`

Image description

* For **Install CodeDeploy Agent**, select **Never** (we already installed it manually)
  1. Load Balancing: Uncheck "Enable Load Balancing"

  2. Click Create Deployment Group

🚀 Final Step: Create Deployment and Launch Your Static Website

We’re in the final stretch! Now that everything is in place — CodeBuild, EC2, IAM Roles, and CodeDeploy setup — it’s time to deploy our Nginx server to the EC2 instance.

✅ Step 1: Create a Deployment in CodeDeploy

  1. Head over to the CodeDeploy console

  2. Select your application: Nginx-app

  3. Under Deployment Groups, click on nginx-deploy-grp

  4. Click Create Deployment

Image description

📦 Configure Deployment Details

  • Revision Location:

    Choose Amazon S3

    Paste the artifact path from your CodeBuild output — in our case:

    s3://demo-1231234/demo-nginx

  • Revision File Type: zip

  • Leave all other settings as default

  • Click Create Deployment

Image description

AWS CodeDeploy will now begin deploying your static website to the EC2 instance using the appspec.yaml and Nginx installation scripts.

Image description

🌐 Step 2: Access Your Website

Once the deployment shows as "Successful", it's time to test everything!

  1. Go back to the EC2 Console

  2. Copy the Public IP Address of your nginx-demo instance

Image description

  1. Open it in your browser

You should now see the index.html page served by your Nginx server on EC2 🎉

Image description

🧾 Conclusion

And that’s a wrap! 🎉

Through this blog, you’ve seen how seamless it can be to set up a CI/CD pipeline using AWS services — from pulling source code on GitHub, building it with CodeBuild, storing the artifacts in S3, and deploying it to an EC2 instance using CodeDeploy. You also got hands-on experience working with an Nginx server on Ubuntu, making this a full-stack DevOps learning journey.

These are foundational skills every DevOps engineer or cloud enthusiast should have in their toolkit — and the best part? You did it all using managed AWS services, keeping infrastructure overhead low and automation high.

If you enjoyed this blog, make sure to like it, share it among your network, and follow me on:

Till then,

Happy Learnings! 🚀

~ Pravesh Sudha

...


KI generiertes Nachrichten Update


Titel: Deploy a Static Website on EC2 Using AWS CI/CD Services (CodeBuild, CodeDeploy, GitHub, and Nginx)

Inhalt:
Die Deployment von statischen Webseiten auf Amazon EC2 mit AWS CI/CD-Diensten ist eine beliebte Praxis, um schnelle, skalierbare und wiederverwendbare Lösungen zu erstellen. Die Kombination aus GitHub, CodeBuild, CodeDeploy und Nginx ermöglicht einen automatisierten Workflow, der Code-Änderungen in Echtzeit überprüft, baut und in die Produktionsumgebung deployt.

Hintergrundinformationen:
1. GitHub als Code-Repository:
GitHub dient als zentraler Ort für das Speichern und Verwalten von Quellcode. Durch Git-Branching (z. B. main oder dev) und Pull Requests wird die Entwicklung koordiniert. Die Integration mit AWS ermöglicht automatisierte Tests und Builds, sobald Code-Änderungen in den Repository eingefügt werden.

  1. AWS CodeBuild: Das Build-Service:
    CodeBuild ist ein serverloses Build-Dienst, der auf der Grundlage von GitHub-Push-Ereignissen oder Webhook-Nachrichten ausgelöst wird. Es kompiliert den Quellcode (z. B. HTML, CSS, JavaScript) und erstellt eine ZIP-Datei, die in das nächste Schritt übergeben wird. Die Build-Konfiguration ist in einer buildspec.yml-Datei definiert, die die Abhängigkeiten, Testtools und Deployment-Schritte beschreibt.

  2. AWS CodeDeploy: Das Deployment-Service:
    CodeDeploy automatisiert den Bereitstellungsvorgang auf EC2-Instanzen. Es erstellt ein Deployment-Paket (z. B. die ZIP-Datei aus CodeBuild) und übergibt es an die Zielumgebung. Die Konfiguration wird über eine deployment.yml-Datei gesteuert, die z. B. die EC2-Instanz-ID oder die IP-Adresse des Web-Servers definiert.

  3. Nginx als Webserver:
    Nginx ist ein leistungsstarker, schneller Webserver und Reverse Proxy, der statische Dateien (HTML, CSS, JS) effizient dient. Auf der EC2-Instanz wird Nginx konfiguriert, um die generierten Dateien aus dem CodeBuild-Output zu servieren. Die Konfigurationsdatei (/etc/nginx/sites-available/default) legt den Root-Verzeichnis und die Port-Nummer fest (z. B. 80 oder 443).

Vorteile der Lösung:
- Schnelle Bereitstellung: Automatisierte Tests und Builds reduzieren manuelle Fehler.
- Skalierbarkeit: EC2-Instanzen können je nach Last dynamisch skaliert werden.
- Kosteneffizienz: Statische Webseiten benötigen keine backend-dedizierte Infrastruktur.

Zusammenfassung:
Der Workflow beginnt mit einem Commit in GitHub, der CodeBuild auslöst, die Dateien baut und CodeDeploy auf die EC2-Instanz deployt. Nginx dient als Frontend, um die statischen Dateien zu serveien. Diese Kombination bietet eine robuste, wiederverwendbare Lösung für das Hosting von Webseiten in der Cloud.

Hinweis:
Für produktionsrelevante Anwendungen ist es wichtig, Sicherheits- und Backup-Strategien (z. B. IAM-Rollen, SSL-Zertifikate) hinzuzufügen. Die Konfiguration kann weitererweitert werden, um auch dynamische Inhalte oder API-Gateway-Integrationen zu unterstützen.

🔧 Deploy a Static Website on EC2 Using AWS CI/CD Services (CodeBuild, CodeDeploy, GitHub, and Nginx)


📈 122.43 Punkte
🔧 Programmierung

🔧 AWS CodePipeline, CodeBuild, and CodeDeploy: CI/CD on AWS


📈 62.84 Punkte
🔧 Programmierung

🔧 Implementing CI/CD on AWS: A Complete Guide with CodePipeline, CodeBuild, and CodeDeploy


📈 57.2 Punkte
🔧 Programmierung

🔧 Deploying Flutter Web to S3 with CodeCommit, Codepipeline, Codebuild and CodeDeploy


📈 51.56 Punkte
🔧 Programmierung

🔧 Automated CI/CD with AWS CodeDeploy, EC2 Hosting, and GitHub Integration


📈 50.94 Punkte
🔧 Programmierung

🔧 Deploying a Sample HTML Application to AWS EC2 with CodePipeline, CodeDeploy, and GitHub


📈 50.94 Punkte
🔧 Programmierung

🔧 Deploying a static website with AWS EC2 using Nginx


📈 49.62 Punkte
🔧 Programmierung

🔧 Using Pulumi IaC to deploy NextJs static website with AWS S3 and EC2


📈 49.43 Punkte
🔧 Programmierung

🔧 Deploy a Django Rest Api on AWS EC2 using Docker, NGINX, Gunicorn and GitHub Action.


📈 49 Punkte
🔧 Programmierung

🔧 How to Deploy a Static Website on AWS EC2 Using Apache


📈 48.07 Punkte
🔧 Programmierung

🔧 Deploy a static (Next.js) website to AWS using AWS CDK & AWS console


📈 47.59 Punkte
🔧 Programmierung

🔧 Customizing and Deploying a Static Website with NGINX on AWS EC2


📈 46.88 Punkte
🔧 Programmierung

🔧 Build and Deploy a ReactJS App to AWS EC2 with Docker, NGINX, and Automate with GitHub Actions.


📈 46.26 Punkte
🔧 Programmierung

🔧 Deploying a Static Website on AWS EC2 with NGINX


📈 45.52 Punkte
🔧 Programmierung

🔧 Deploying a Static Website on AWS EC2 with Nginx: A Comprehensive Guide


📈 45.52 Punkte
🔧 Programmierung

🔧 Deploy a Next.js App on AWS EC2 with Docker, NGINX, and Automate with GitHub Actions.


📈 44.9 Punkte
🔧 Programmierung

🔧 Setting Up CI/CD for EC2 Deployment with AWS CodeDeploy


📈 43.38 Punkte
🔧 Programmierung

🔧 Setting Up CI/CD for EC2 Deployment with AWS CodeDeploy


📈 43.38 Punkte
🔧 Programmierung

🔧 AWS workshop #1: Deploy static website to S3 using Github Action


📈 42.51 Punkte
🔧 Programmierung

🔧 How to Deploy a Website on GitHub Pages and AWS EC2: A Step-by-Step Guide


📈 40.66 Punkte
🔧 Programmierung

🔧 Self-hosted GitHub Actions runners using AWS CodeBuild


📈 40.16 Punkte
🔧 Programmierung

🔧 Deploying a FastAPI Application on AWS EC2 with CI/CD Using GitHub Actions and Nginx


📈 39.81 Punkte
🔧 Programmierung

🔧 Deploying a Static Website on AWS S3 & EC2 Using Terraform" published: true


📈 38.88 Punkte
🔧 Programmierung

🔧 Deploy Next.js on AWS EC2 with PM2, Nginx, and Cloudflare CDN


📈 38.69 Punkte
🔧 Programmierung

🔧 Deploy an EC2 Instance in AWS, connect to it and install nginx


📈 38.69 Punkte
🔧 Programmierung

🔧 CI/CI deploy a static website to AWS S3 bucket through Github Actions


📈 38.41 Punkte
🔧 Programmierung

🔧 Deploy a Static Website with Route53, CloudFront and AWS Certificate using a Terraform Script


📈 37.67 Punkte
🔧 Programmierung