NGINX Server Implementation Using CloudFront
Project Overview
The task involved setting up an NGINX web server and configuring it with AWS CloudFront to serve a custom HTML page. This implementation combines fundamental web server configuration with cloud service integration, representing a common real-world DevOps scenario.
Technical Implementation
1. Implementation Approach
Set up NGINX on an EC2 instance
Above image is the EC2 instance "nginx-server".
I. To install NGINX on ec2 instance;
sudo apt update
sudo apt install nginx -y
II. Create the custom index page;
sudo mkdir -p /var/www/html
sudo nano /var/www/html/index.html
HTML content is therefore copied into the file created. And here is the HTML content;
<!DOCTYPE html>
<html>
<head>
<title>DevOps Stage 0</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f2f5;
}
.message {
text-align: center;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="message">
<h1>Welcome to DevOps stage 0</h1>
<p>[Your Name]/[SlackName]</p>
</div>
</body>
</html>
Open the nginx file using the command line below;
sudo vi /etc/nginx/sites-available/default
Copy below NGINX configuration into the above file.
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;
index index.html;
server_name _;
location / {
try_files $uri $uri/ =404;
}
}
Created a custom HTML welcome page
III. Test the configuration
sudo nginx -t
Integrated with AWS CloudFront for content delivery
Here is the overview of the CloudFront setup from AWS console;
And below is the outcome webpage after nginx webserver configuration using the HTML content.
2. Challenges Faced and Solutions
Challenge 1: NGINX Configuration Syntax Errors
Issue: Server_name directive placement error
Root Cause: Incorrect configuration file structure and context placement
Solution: Restructured the NGINX configuration by:
Properly nesting directives within appropriate contexts
Separating main configuration from server blocks
Following NGINX's hierarchical configuration structure
Challenge 2: Duplicate Default Server
Issue: Multiple default server blocks causing conflicts
Root Cause: Overlapping configurations in different files
Solution:
Cleaned up redundant configuration files
Established a single source of truth for server block configuration
Properly managed symbolic links in sites-enabled directory
Learning Outcomes
- Technical Skills Acquired
Deep understanding of NGINX configuration structure
Experience with AWS CloudFront setup and integration
Practical knowledge of Linux system administration
Web server security configuration
Troubleshooting skills for web server issues
- DevOps Best Practices
Configuration management
Infrastructure as Code principles
Security considerations in web hosting
High availability and content delivery optimization
- Professional Development Impact
Enhanced problem-solving capabilities
Experience with industry-standard tools
Understanding of enterprise-level web hosting architecture
Documentation and technical communication skills
Real-World Applications
- Enterprise Relevance
Content delivery optimization
High availability web hosting
Cloud service integration
- Career Growth Opportunities
Foundation for more complex DevOps tasks
Relevant experience for cloud engineering roles
Understanding of production environment setup
Skills applicable to various IT infrastructure roles
Best Practices Learned
Configuration Management
- Keep configurations modular
- Maintain clear documentation
- Follow the principle of least privilege
Conclusion
This task provides a solid foundation in web server configuration and cloud service integration, essential skills for any DevOps engineer. The challenges faced and solutions implemented offer valuable learning experiences that directly contribute to professional growth in cloud computing and system administration.
References;
- DevOps Engineers - https://hng.tech/hire/devops-engineers
- Cloud Engineers - https://hng.tech/hire/cloud-engineers
Thank you!!!
Source: View source
