{"id":12597,"date":"2025-04-10T09:13:51","date_gmt":"2025-04-10T09:13:51","guid":{"rendered":"https:\/\/slitigenz.io\/?p=12597"},"modified":"2025-04-10T09:18:32","modified_gmt":"2025-04-10T09:18:32","slug":"deploy-static-website-ec2-nginx","status":"publish","type":"post","link":"https:\/\/old.slitigenz.io\/vi\/deploy-static-website-ec2-nginx\/","title":{"rendered":"How to Deploy Static Website on AWS EC2 Using Nginx?"},"content":{"rendered":"\n<ul class=\"wp-block-list\">\n<li>Table of Contents\n<ul class=\"wp-block-list\">\n<li><a href=\"#introduction\">Introduction<\/a><\/li>\n\n\n\n<li><a href=\"#what-is-amazon-ec2\">What is Amazon EC2?<\/a><\/li>\n\n\n\n<li><a href=\"#what-is-nginx\">What is Nginx?<\/a><\/li>\n\n\n\n<li><a href=\"#step-by-step-deployment\" title=\"\">Step-by-Step Deployment<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"#1-launch-an-ec2-instance\">1. Launch an EC2 Instance<\/a><\/li>\n\n\n\n<li><a href=\"#2-install-nginx-to-serve-your-static-website\">2. Install Nginx to Serve Your Static Website<\/a><\/li>\n\n\n\n<li><a href=\"#3-create-a-static-html-file\">3. Create a Static HTML File<\/a><\/li>\n\n\n\n<li><a href=\"#4-move-the-html-file-to-nginxs-default-directory\">4. Move the HTML File to Nginx&#8217;s Default Directory<\/a><\/li>\n\n\n\n<li><a href=\"#5-test-and-reload-nginx-configuration\">5. Test and Reload Nginx Configuration<\/a><\/li>\n\n\n\n<li><a href=\"#6-allow-http-access-via-security-group\">6. Allow HTTP Access via Security Group<\/a><\/li>\n\n\n\n<li><a href=\"#7-access-the-website\">7. Access the Website<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"#conclusion\">Conclusion<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>Want to deploy a static website on AWS EC2 using Nginx in under 15 minutes? This guide will show you exactly how to do that with z\u1ebbo cost using AWS Free Tier.<\/p>\n\n\n\n<p><em>Learn more about <a class=\"\" href=\"https:\/\/docs.aws.amazon.com\/ec2\/\">Amazon EC2<\/a> and <a class=\"\">Nginx web server<\/a> if you\u2019re new to these tools.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is Amazon EC2?<\/h2>\n\n\n\n<p><strong>Amazon EC2 (Elastic Compute Cloud)<\/strong> is Amazon&#8217;s cloud-based virtual server service. It allows you to run applications or host data without having to invest in physical hardware.<\/p>\n\n\n\n<p><em><strong>Tip: You can use the AWS Free Tier to follow this guide at zero cost, which includes 750 hours per month of t2.micro instances.<\/strong><\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is Nginx?<\/h2>\n\n\n\n<p><strong>Nginx<\/strong> is a high-performance open-source web server known for its ability to handle thousands of concurrent connections while consuming minimal resources. It&#8217;s commonly used to serve static content, act as a reverse proxy, or load balancer.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step-by-Step Deployment<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. Launch an EC2 Instance<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select operating system:\u00a0<strong>Ubuntu<\/strong> (latest version)<\/li>\n\n\n\n<li>Instance type: <strong>t2.micro<\/strong><\/li>\n\n\n\n<li>Create a <strong>Key Pair<\/strong> for SSH access (<code>.pem<\/code> file)<\/li>\n<\/ul>\n\n\n\n<p>Connect to your EC2 instance from your local machine. If you&#8217;re using Windows, you can use a terminal tool like <strong>MobaXterm<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Install Nginx to Serve Your Static Website<\/h3>\n\n\n\n<p>Run the following commands:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sudo apt update\nsudo apt install nginx -y<\/code><\/pre>\n\n\n\n<p>Start the Nginx service:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sudo systemctl start nginx<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">3. Create a Static HTML File<\/h3>\n\n\n\n<p>Use Vim or any text editor to create <code>index.html<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>vim index.html<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/confluence.slitigenz.io\/download\/attachments\/88014899\/image-2024-12-27_17-57-46.png?version=1&amp;modificationDate=1744269156908&amp;api=v2\" alt=\"Screenshot of MobaXterm connecting to EC2 via SSH\" title=\"Marketing &gt; [10\/4] &gt; image-2024-12-27_17-57-46.png (Giao di\u1ec7n MobaXterm khi k\u1ebft n\u1ed1i EC2)\"\/><\/figure>\n\n\n\n<p>Press <code>i<\/code> to start typing. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/confluence.slitigenz.io\/download\/attachments\/88014899\/image-2024-12-27_17-58-54.png?version=1&amp;modificationDate=1744269156954&amp;api=v2\" alt=\"Screenshot of creating index.html file using Vim\n\" title=\"Marketing &gt; [10\/4] &gt; image-2024-12-27_17-58-54.png (Giao di\u1ec7n t\u1ea1o file HTML \u0111\u01a1n gi\u1ea3n )\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>Here\u2019s a sample content:\n&lt;!DOCTYPE html>\n&lt;html>\n&lt;head>\n    &lt;title>My Static Page&lt;\/title>\n&lt;\/head>\n&lt;body>\n    &lt;h1>Welcome to My Website!&lt;\/h1>\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p>To save the file: press <code>Esc<\/code>, then type <code>:wq<\/code> and hit <code>Enter<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/confluence.slitigenz.io\/download\/attachments\/88014899\/image-2024-12-27_18-10-25.png?version=1&amp;modificationDate=1744269156972&amp;api=v2\" alt=\"Screenshot showing how to save an HTML file in Vim\n\" title=\"Marketing &gt; [10\/4] &gt; image-2024-12-27_18-10-25.png (Sau khi l\u01b0u file HTML )\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">4. Move the HTML File to Nginx&#8217;s Default Directory<\/h3>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<pre class=\"wp-block-preformatted\">sudo mv index.html \/var\/www\/html\/<\/pre>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">5. Test and Reload Nginx Configuration<\/h3>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<pre class=\"wp-block-code\"><code>sudo nginx -t\nsudo systemctl reload nginx<\/code><\/pre>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">6. Allow HTTP Access via Security Group<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to EC2 Console \u2192 Select your Instance<\/li>\n\n\n\n<li>Navigate to <strong>Security > Security groups<\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/confluence.slitigenz.io\/download\/attachments\/88014899\/image-2024-12-27_18-24-44.png?version=1&amp;modificationDate=1744269156989&amp;api=v2\" alt=\"AWS EC2 interface showing Security Group tab\n\" title=\"Marketing &gt; [10\/4] &gt; image-2024-12-27_18-24-44.png (Giao di\u1ec7n Security Group trong AWS EC2)\"\/><\/figure>\n\n\n\n<p>3. Click <strong>Edit inbound rules<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/confluence.slitigenz.io\/download\/attachments\/88014899\/image-2024-12-27_18-26-44.png?version=1&amp;modificationDate=1744269157007&amp;api=v2\" alt=\"Terminal showing steps to deploy a static website on EC2 with Nginx\n\n\" title=\"Marketing &gt; [10\/4] &gt; image-2024-12-27_18-26-44.png (Giao di\u1ec7n chi ti\u1ebft Security Group )\"\/><\/figure>\n\n\n\n<p>4. Add a rule: HTTP | Port: 80 | Source: 0.0.0.0\/0<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/confluence.slitigenz.io\/download\/attachments\/88014899\/image-2024-12-27_18-27-42.png?version=1&amp;modificationDate=1744269157050&amp;api=v2\" alt=\"Adding an HTTP rule (port 80) in EC2 Security Group\n\" title=\"Marketing &gt; [10\/4] &gt; image-2024-12-27_18-27-42.png (Th\u00eam rule m\u1edf port 80 )\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/confluence.slitigenz.io\/download\/attachments\/88014899\/image-2024-12-27_18-29-44.png?version=1&amp;modificationDate=1744269157034&amp;api=v2\" alt=\"Successful Nginx reload after config change\n\" title=\"Marketing &gt; [10\/4] &gt; image-2024-12-27_18-29-44.png (Giao di\u1ec7n sau khi reload Nginx)\"\/><\/figure>\n\n\n\n<p>5. Click <strong>Save rules<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/confluence.slitigenz.io\/download\/attachments\/88014899\/image-2024-12-27_18-30-34.png?version=1&amp;modificationDate=1744269157067&amp;api=v2\" alt=\"Nginx config test passed message on terminal\n\" title=\"Marketing &gt; [10\/4] &gt; image-2024-12-27_18-30-34.png (Giao di\u1ec7n x\u00e1c nh\u1eadn c\u1ea5u h\u00ecnh Nginx th\u00e0nh c\u00f4ng)\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">7. Access the Website<\/h3>\n\n\n\n<p>Open your browser and visit the <strong>Public IP<\/strong> of your EC2 instance. You should see your static HTML page rendered.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/confluence.slitigenz.io\/download\/attachments\/88014899\/image-2024-12-27_18-33-37.png?version=1&amp;modificationDate=1744269157084&amp;api=v2\" alt=\"Static HTML website accessed via EC2 public IP\n\" title=\"Marketing &gt; [10\/4] &gt; image-2024-12-27_18-33-37.png (Giao di\u1ec7n hi\u1ec3n th\u1ecb website khi truy c\u1eadp IP EC2)\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>\ud83d\udcda <strong>Useful resources<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a class=\"\" href=\"https:\/\/docs.aws.amazon.com\/ec2\/\">AWS EC2 Documentation<\/a><\/li>\n\n\n\n<li><a class=\"\">Official Nginx Documentation<\/a><\/li>\n<\/ul>\n\n\n\n<p>By following this guide, you&#8217;ve successfully launched an EC2 server, installed Nginx, and deployed a static HTML website. This is a great starting point for anyone getting familiar with cloud services.<\/p>\n\n\n\n<p>Try expanding your HTML project, or integrate it with technologies like Node.js, Docker, or CI\/CD pipelines for more professional deployments.<\/p>\n\n\n\n\n\n<p>&#8212;&#8211;<br><br>Contact us for direct advice and the fastest quote.<br><br>\u260e Hotline: +84868865738<br><br>\ud83c\udf10\u00a0Website:\u00a0<a href=\"https:\/\/slitigenz.io\/\">https:\/\/slitigenz.io\/<\/a><br><br>\ud83d\udce9\u00a0Email:\u00a0<a href=\"mailto:welcome@slitigenz.io\">welcome@slitigenz.io<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Want to deploy a static website on AWS EC2 using Nginx in under 15 minutes? This guide will show you exactly how to do that with z\u1ebbo cost using AWS Free Tier. Learn more about Amazon EC2 and Nginx web server if you\u2019re new to these tools. What is Amazon EC2? Amazon EC2 (Elastic Compute Cloud) is Amazon&#8217;s cloud-based virtual server service. It allows you to run applications or host data without having to invest in physical hardware. Tip: You can use the AWS Free Tier to follow this guide at zero cost, which includes 750 hours per month of t2.micro instances. What is Nginx? Nginx is a high-performance open-source web server known for its ability to handle thousands of concurrent connections while consuming minimal resources. It&#8217;s commonly used to serve static content, act as a reverse proxy, or load balancer. Step-by-Step Deployment 1. Launch an EC2 Instance Connect to your EC2 instance from your local machine. If you&#8217;re using Windows, you can use a terminal tool like MobaXterm. 2. Install Nginx to Serve Your Static Website Run the following commands: Start the Nginx service: 3. Create a Static HTML File Use Vim or any text editor to create index.html: Press i to start typing. To save the file: press Esc, then type :wq and hit Enter. 4. Move the HTML File to Nginx&#8217;s Default Directory sudo mv index.html \/var\/www\/html\/ 5. Test and Reload Nginx Configuration 6. Allow HTTP Access via Security Group 3. Click Edit inbound rules 4. Add a rule: HTTP | Port: 80 | Source: 0.0.0.0\/0 5. Click Save rules 7. Access the Website Open your browser and visit the Public IP of your EC2 instance. You should see your static HTML page rendered. Conclusion \ud83d\udcda Useful resources: By following this guide, you&#8217;ve successfully launched an EC2 server, installed Nginx, and deployed a static HTML website. This is a great starting point for anyone getting familiar with cloud services. Try expanding your HTML project, or integrate it with technologies like Node.js, Docker, or CI\/CD pipelines for more professional deployments. &#8212;&#8211; Contact us for direct advice and the fastest quote. \u260e Hotline: +84868865738 \ud83c\udf10\u00a0Website:\u00a0https:\/\/slitigenz.io\/ \ud83d\udce9\u00a0Email:\u00a0welcome@slitigenz.io<\/p>","protected":false},"author":6,"featured_media":12600,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"footnotes":""},"categories":[8],"tags":[16],"class_list":["post-12597","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech-stack","tag-technology"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/old.slitigenz.io\/vi\/wp-json\/wp\/v2\/posts\/12597","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/old.slitigenz.io\/vi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/old.slitigenz.io\/vi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/old.slitigenz.io\/vi\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/old.slitigenz.io\/vi\/wp-json\/wp\/v2\/comments?post=12597"}],"version-history":[{"count":4,"href":"https:\/\/old.slitigenz.io\/vi\/wp-json\/wp\/v2\/posts\/12597\/revisions"}],"predecessor-version":[{"id":12602,"href":"https:\/\/old.slitigenz.io\/vi\/wp-json\/wp\/v2\/posts\/12597\/revisions\/12602"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/old.slitigenz.io\/vi\/wp-json\/wp\/v2\/media\/12600"}],"wp:attachment":[{"href":"https:\/\/old.slitigenz.io\/vi\/wp-json\/wp\/v2\/media?parent=12597"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/old.slitigenz.io\/vi\/wp-json\/wp\/v2\/categories?post=12597"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/old.slitigenz.io\/vi\/wp-json\/wp\/v2\/tags?post=12597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}