AWSLearn-AWS

Học AWS cùng mình, Ngày 2

Cover

Slug

hoc-aws-cung-minh-ngay-2

Published

Date

Aug 4, 2023

Bước 1: Chọn region và tạo một s3 Bucket

Giới thiệu qua thì đại loại S3 là một cái để lưu trữ file, hiểu đơn giản nó giống kiểu cái ổ cứng của bạn vậy nhưng tác dụng chính của S3 là lưu trữ.

Nào chúng ta tìm kiếm S3 trên thanh tìm kiếm nào.

Sau khi mở S3 lên chúng ta cần tạo cho mình 1 Bucket (Bucket là một container để lưu trữ data trên S3)

Khi mở form tạo mới chúng ta cần để ý những thông tin sau:

Bucket name: tên của bucket, nên đặt tên rõ ràng để sau dễ quản lý

AWS region: chọn cho mình khu vực gần nhất hoặc khu vực ổn định nhất

Object Ownership: ở đây chúng ta để mặc định ACLs disabled thì tất cả các object trong bucket này được sở hữu bởi chính account của chúng ta, quyền truy cập vào bucket này duy nhất được chỉ định bằng policies (policies là gì sẽ nói ở bài viết khác).

Block public access: bỏ tích phần này nhé, phần này khá quan trọng cho việc tạo policies

Sau khi điền xong chúng ta ấn button Create phía dưới cùng

Bước 2: Cấu hình cần thiết cho S3 để public file

Đầu tiên chúng ta cần truy cập vào đúng bucket chúng ta vừa tạo và chọn Permission ở đây chúng ta sẽ cấp quyền cho nó.

Sau khi chọn permission>policies>edit rồi pate policies như bên dưới


{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "Statement1",
			"Principal": "*",
			"Effect": "Allow",
			"Action": [
				"s3:GetObject"
			],
			"Resource": [
				"arn:aws:s3:::<tên bucket>/*"
			]
		}
	]
}

Sau khi save xong ta chọn sang phần properties và Enable Static website hosting

Sau khi xong bạn chọn save.

Bước 3: Tạo file index.html và upload lên S3

Tạo 1 file index.html và pate code phía dưới vào file của bạn


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test</title>
    <link
      href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400|Montserrat&display=swap"
      rel="stylesheet"
    />
    <style>
      /*-----------------------------------------------
      TABLE OF CONTENTS:
      
      1) GENERAL
            A- Texts
            B- Buttons
            C- Images
      
      2) HEADER
            A- Logo
            B- Nav
      
      3) MAIN
            A- Intro
            B- Products
            C- Features
            D- Testimonials
      
      4) FOOTER
            A- Newsletter
            B- Connect & Contact
      
      
      -----------------------------------------------*/

      /*-----------------------------------------------
      1) GENERAL
      -----------------------------------------------*/

      :root {
        --accent-color: #d3ecdd;
        --main-color: #1d1d1d;
      }

      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      html {
        scroll-behavior: smooth;
      }

      /* Offset fix for OVERLAPPING problems of FIXED HEADER and ON-PAGE links */
      :target {
        display: block;
        position: relative;
        top: -20vh; /* this is the offset */
        visibility: hidden;
      }

      body {
        font-family: "Montserrat", sans-serif;
        color: var(--main-color);
        background-color: white;
        transition: all 1s ease-out;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
      }

      /*-------------------------------------------
          1) A- TEXTS
          -------------------------------------------*/

      h1,
      h2,
      h3,
      h4 {
        font-family: "Josefin Sans", sans-serif;
        font-weight: 400;
      }

      h1 {
        text-align: center;
        font-weight: 300;
        font-size: 1.5rem;
        line-height: 1.5;
        margin: 0 auto;
      }
      /* Fluid font-size */
      @media screen and (min-width: 37.5rem) {
        h1 {
          font-size: calc(1.5rem + 0.5 * ((100vw - 37.5rem) / 82.5));
        }
      }
      @media screen and (min-width: 120rem) {
        h1 {
          font-size: 2rem;
        }
      }

      h2 {
        letter-spacing: 0.5em;
        margin: 0 auto 0.25em auto;
      }

      h3,
      h4 {
        font-size: 1rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.3em;
        margin: 0 auto 0.5em auto;
      }

      p {
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
      }

      h2 + p {
        margin: 0 auto 2.5em auto;
      }

      .uppercase {
        text-transform: uppercase;
      }
      .accent {
        position: relative;
        z-index: 1;
      }
      .accent::before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0.25em;
        height: 0.5rem;
        background: var(--accent-color);
        z-index: -1;
      }

      /*-------------------------------------------
          1) B- BUTTONS
          -------------------------------------------*/

      .button {
        font-size: 0.8rem;
        font-family: "Josefin Sans", sans-serif;
        font-weight: 400;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.25em;
        text-decoration: none;
        color: inherit;
        border: none;
        background-color: var(--accent-color);
        box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
        padding: 1rem 1.5rem;
        cursor: pointer;
      }
      .button:hover {
        box-shadow: none;
      }

      input[type="submit"] {
        font-size: 0.8rem;
        font-family: "Josefin Sans", sans-serif;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.25em;
        text-decoration: none;
        border: none;
        background-color: var(--accent-color);
        box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
        padding: 1rem 1.5rem;
        cursor: pointer;
        transition: letter-spacing 0.5s ease-out;
      }
      input[type="submit"]:hover {
        letter-spacing: 0.35em;
        box-shadow: none;
      }

      /*-------------------------------------------
          1) C- IMAGES
          -------------------------------------------*/

      img {
        display: block;
        max-width: 100%;
        margin: 0 auto;
      }

      /*-----------------------------------------------
      2) HEADER
      -----------------------------------------------*/

      header {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        width: 100vw;
        max-width: 100%; /* Prevents the horizontal scroll generated by the vertical scroll when the width = 100vw. */
        padding: 2.5vh 2.5vw;
        z-index: 10;
        background-color: #fff;
      }
      /* Fluid padding */
      @media screen and (min-width: 37.5rem) {
        header {
          padding: calc(2.5vh + 2.5 * ((100vw - 37.5rem) / 82.5))
            calc(0vw + 20 * ((100vw - 37.5rem) / 82.5));
        }
      }
      @media screen and (min-width: 120rem) {
        header {
          padding: 5vh 20vw;
        }
      }

      /*-------------------------------------------
          2) A- LOGO
          -------------------------------------------*/

      .logo {
        display: block;
        flex-shrink: 1;
        max-width: 70%;
        max-height: 12vh;
        margin: 0 auto;
      }
      /* Fluid max-width */
      @media screen and (min-width: 37.5rem) {
        .logo {
          max-width: calc(70% + -40 * ((100vw - 37.5rem) / 82.5));
        }
      }
      @media screen and (min-width: 120rem) {
        .logo {
          max-width: 30%;
        }
      }

      /*-------------------------------------------
          2) B- NAV
          -------------------------------------------*/

      .nav-btn {
        display: none;
      }

      .nav-icon {
        padding: 1rem 0 1rem 1rem;
        margin: 0 auto 0 auto;
        cursor: pointer;
      }

      .hamburger {
        display: block;
        position: relative;
        width: 1.5rem;
        height: 0.125rem;
        background: #1d1d1d;
        transition: background 0.2s ease-out;
        z-index: 12;
      }
      .hamburger:before,
      .hamburger:after {
        background: var(--main-color);
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        transition: all 0.2s ease-out;
        width: 100%;
      }
      .hamburger:before {
        top: 0.5rem;
      }
      .hamburger:after {
        top: -0.5rem;
      }

      .nav-btn:checked ~ .nav-icon .hamburger {
        background: transparent;
      }
      .nav-btn:checked ~ .nav-icon .hamburger:before {
        transform: rotate(-45deg) translateY(-0.5rem) translateX(0.2rem);
      }
      .nav-btn:checked ~ .nav-icon .hamburger:after {
        transform: rotate(45deg) translateY(0.5rem) translateX(0.2rem);
      }

      .nav-btn:not(:checked) ~ .nav {
        display: none;
      }
      .nav-btn:checked ~ .nav {
        max-height: 85vh;
        width: 100vw;
        max-width: 100%;
        position: fixed;
        top: 0;
        left: 0;
      }

      .nav {
        list-style: none;
        text-align: center;
        padding: 15vh 0;
        background-color: var(--accent-color);
        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
        z-index: 11;
      }

      .nav-link {
        color: inherit;
        text-decoration: inherit;
        display: block;
        padding: 1.5em;
      }

      .nav-link:hover {
        background-color: #e4f3ea;
      }

      /*-----------------------------------------------
      3) MAIN
      -----------------------------------------------*/

      main {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        padding: 0 2.5vw;
      }
      /* Fluid padding */
      @media screen and (min-width: 37.5rem) {
        main {
          padding: 0 calc(0vw + 20 * ((100vw - 37.5rem) / 82.5));
        }
      }
      @media screen and (min-width: 120rem) {
        main {
          padding: 0 20vw;
        }
      }

      main > section {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        margin-bottom: 4rem;
      }

      /*-------------------------------------------
          3) A- INTRO
          -------------------------------------------*/

      #intro {
        height: 100vh;
        padding: 12vh 0 0 0;
      }
      /* Fluid padding-top */
      @media screen and (min-width: 37.5rem) {
        #intro {
          padding-top: calc(12vh + -4 * ((100vw - 37.5rem) / 82.5));
        }
      }
      @media screen and (min-width: 120rem) {
        #intro {
          padding-top: 8vh;
        }
      }

      .figure-intro {
        max-width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "all";
        justify-items: center;
        align-items: start;
        margin: 0 auto;
      }

      .circle-intro {
        grid-area: all;
        max-width: 75%;
        z-index: 1;
        opacity: 0;
        animation: appear-circle 1.25s ease-out forwards;
      }
      @keyframes appear-circle {
        from {
          opacity: 0;
          transform: scale(0.3);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }

      .img-intro {
        grid-area: all;
        max-width: 75%;
        z-index: 2;
        opacity: 0;
        animation: appear-img 2s 1.25s ease-out forwards;
      }
      @keyframes appear-img {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      /*-------------------------------------------
          3) B- PRODUCTS
          -------------------------------------------*/

      .img-product-group {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
      }

      .img-product {
        margin-bottom: 1rem;
      }
      .portrait {
        max-width: 39%;
      }
      .landscape {
        max-width: 46%;
      }

      .product-quote {
        background-color: white;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        margin: 0 auto 1rem auto;
        padding: 1rem 0 0 0;
        text-align: center;
      }

      .product-quote > p {
        font-family: "Josefin Sans", sans-serif;
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.5em;
        margin-bottom: 1em;
        max-width: 100%;
      }
      /* Fluid font-size */
      @media screen and (min-width: 37.5rem) {
        .product-quote > p {
          font-size: calc(1rem + 0.9 * ((100vw - 37.5rem) / 82.5));
          max-width: 52%;
        }
      }
      @media screen and (min-width: 120rem) {
        .product-quote > p {
          font-size: 1.9rem;
          max-width: 50%;
        }
      }

      p.author {
        font-size: 0.75rem;
        font-weight: 500;
        font-variant: small-caps;
        letter-spacing: 0.125em;
        margin-bottom: 0;
      }

      /*-------------------------------------------
          3) C- FEATURES
          -------------------------------------------*/

      .feature-group {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 4rem;
      }

      .feature {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        text-align: center;
        max-width: 100%;
        margin: 0 auto 3rem auto;
      }

      .feature > img {
        max-width: 50%;
        margin-bottom: 1.5rem;
      }

      .feature > p {
        max-width: 14rem;
        margin-bottom: 1.5rem;
      }

      .explore {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        margin-bottom: 5rem;
      }

      .explore > img {
        max-width: 80%;
        margin-top: -6rem;
        transition: transform 0.5s ease-out;
      }
      .explore .button:hover + img {
        transform: translateY(-2rem);
      }

      .explore .button {
        width: 90%;
        margin: 0 auto;
        z-index: 5;
        transition: transform 0.5s ease-out;
      }
      .explore .button:hover {
        transform: translateY(0.25rem);
      }

      /*-------------------------------------------
          3) D- TESTIMONIALS
          -------------------------------------------*/

      iframe {
        max-width: 100%;
        margin: 0 auto 3rem auto;
      }

      /*-----------------------------------------------
      4) FOOTER
      -----------------------------------------------*/

      footer {
        width: 100vw;
        max-width: 100%;
        display: flex;
        flex-flow: column nowrap;
      }

      footer > section {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
      }

      /*-------------------------------------------
          4) A- NEWSLETTER
          -------------------------------------------*/

      .newsletter {
        background-color: whitesmoke;
        margin-bottom: 2rem;
        padding: 3.5rem 2.5vw 0 2.5vw;
      }
      /* Fluid padding */
      @media screen and (min-width: 37.5rem) {
        .newsletter {
          padding: 3.5rem calc(2.5vw + 17.5 * ((100vw - 37.5rem) / 82.5)) 0
            calc(2.5vw + 17.5 * ((100vw - 37.5rem) / 82.5));
        }
      }
      @media screen and (min-width: 120rem) {
        .newsletter {
          padding: 3.5rem 20vw 0 20vw;
        }
      }

      .news-icon {
        max-width: 15%;
        margin-bottom: 1.5rem;
      }

      .newsletter > p {
        margin-bottom: 1.5rem;
      }

      form {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        width: 80%;
      }
      /* Fluid width */
      @media screen and (min-width: 37.5rem) {
        form {
          width: calc(80% + -50 * ((100vw - 37.5rem) / 82.5));
        }
      }
      @media screen and (min-width: 120rem) {
        form {
          width: 30%;
        }
      }

      #email {
        flex: 1 1 auto;
        margin: 0 auto 0.5rem auto;
        color: #333;
        width: 100%;
        padding: 0.5em 1em;
        font-size: 1rem;
        border: solid 1px #eee;
        background-color: white;
      }
      #email:focus {
        outline: none;
        border-color: var(--accent-color);
      }

      #submit {
        width: 100%;
        margin: 0 auto 5rem auto;
      }

      /*-------------------------------------------
          4) B- CONNECT & CONTACT
          -------------------------------------------*/
      .connect-contact {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
      }
      @media screen and (min-width: 48rem) {
        .connect-contact {
          flex-flow: row nowrap;
          align-items: flex-start;
        }
      }

      .connect {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        padding: 0 2.5vw;
        margin-bottom: 0.5rem;
      }
      .connect-icons-group {
        width: 50%;
        display: flex;
        justify-content: center;
        margin-bottom: 1.5rem;
      }
      .connect-icons-group > a {
        max-width: 25%;
        margin: 0 0.25rem;
      }

      .contact {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        padding: 0 2.5vw;
        margin-bottom: 3rem;
      }
      .contact > p {
        font-size: 0.85rem;
      }
    </style>
  </head>
  <body>
    <header id="header">
      <img
        id="header-img"
        class="logo"
        src="https://raw.githubusercontent.com/MartaFagundez/FreeCodeCamp/master/LandingPage/img/logo-med.png"
        alt="Green Spirits Logo"
      />
      <nav id="nav-bar" class="nav-bar">
        <input id="nav-btn" class="nav-btn" type="checkbox" />
        <label class="nav-icon" for="nav-btn"
          ><span class="hamburger"></span
        ></label>
        <ul class="nav">
          <li><a class="nav-link" href="#products">Products</a></li>
          <li><a class="nav-link" href="#features">Features</a></li>
          <li><a class="nav-link" href="#testimonials">Testimonials</a></li>
          <li><a class="nav-link" href="#newsletter">Newsletter</a></li>
          <li><a class="nav-link" href="#connect-contact">Connect</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <section id="intro">
        <div class="figure-intro">
          <img
            class="circle-intro"
            src="https://raw.githubusercontent.com/MartaFagundez/FreeCodeCamp/master/LandingPage/img/cactus_intro_circle.png"
            alt=""
          />
          <img
            class="img-intro"
            src="https://raw.githubusercontent.com/MartaFagundez/FreeCodeCamp/master/LandingPage/img/cactus_intro2.png"
            alt="Dwarf chin cactus in a bronze planter"
          />
        </div>

        <h1>
          Charm and Natural Warmth <br />to your
          <span class="uppercase accent">Minimalist</span> <br />Home Decor
        </h1>
      </section>

      <section class="products">
        <a id="products"></a>
        <h2 class="uppercase accent">Products</h2>
        <p>Strong beauties, gorgeous pots</p>

        <div class="img-product-group">
          <img
            class="img-product portrait"
            src="https://raw.githubusercontent.com/MartaFagundez/FreeCodeCamp/master/LandingPage/img/cactus1.jpg"
            alt="Arrojadoa theunisseniana in a ceramic cup"
          />
          <img
            class="img-product landscape"
            src="https://raw.githubusercontent.com/MartaFagundez/FreeCodeCamp/master/LandingPage/img/succulent2.jpg"
            alt="Echeveria Hookeri in a bronze planter"
          />
          <img
            class="img-product landscape"
            src="https://raw.githubusercontent.com/MartaFagundez/FreeCodeCamp/master/LandingPage/img/succulent3.jpg"
            alt="A small Haworthia Limifolia in a wooden pot"
          />
          <img
            class="img-product portrait"
            src="https://raw.githubusercontent.com/MartaFagundez/FreeCodeCamp/master/LandingPage/img/succulent4.jpg"
            alt="Dudleyas Pulverulentas in a ceramic pot"
          />
          <div class="product-quote portrait">
            <p>
              <span class="uppercase">Minimalism</span> isn't about removing
              <br /><span class="accent">Things You Love</span>.<br />It's about
              Removing the Things that Distract You from the Things You Love.
            </p>
            <p class="author">Joshua Becker</p>
          </div>
          <img
            class="img-product landscape"
            src="https://raw.githubusercontent.com/MartaFagundez/FreeCodeCamp/master/LandingPage/img/succulents5.jpg"
            alt="Three Haworthias Fasciatas in copper planters"
          />
          <img
            class="img-product landscape"
            src="https://raw.githubusercontent.com/MartaFagundez/FreeCodeCamp/master/LandingPage/img/succulent6.jpg"
            alt="Aloe Aristata in a bronze planter"
          />
          <img
            class="img-product portrait"
            src="https://raw.githubusercontent.com/MartaFagundez/FreeCodeCamp/master/LandingPage/img/succulents7.jpg"
            alt="Various cactuses and succulents in ceramic pots"
          />
        </div>
      </section>

      <section class="features">
        <a id="features"></a>
        <h2 class="uppercase accent">Features</h2>
        <p>Why Choose Us</p>

        <div class="feature-group">
          <div class="feature">
            <img
              src="https://raw.githubusercontent.com/MartaFagundez/FreeCodeCamp/master/LandingPage/img/feature_1.png"
              alt=""
            />
            <h3>Premium quality</h3>
            <p>Lorem ipsum color sit amet, consectetur adipiscing elit.</p>
          </div>

          <div class="feature">
            <img
              src="https://raw.githubusercontent.com/MartaFagundez/FreeCodeCamp/master/LandingPage/img/feature_2.png"
              alt=""
            />
            <h3>Eco friendly</h3>
            <p>
              Duis aute irure color in reprehenderit in voluptate velit esse.
            </p>
          </div>

          <div class="feature">
            <img
              src="https://raw.githubusercontent.com/MartaFagundez/FreeCodeCamp/master/LandingPage/img/feature_3.png"
              alt=""
            />
            <h3>Handmade</h3>
            <p>Excepteur sint occaecat cupidatat non proident, sunt in.</p>
          </div>
        </div>

        <div class="explore">
          <a class="button" href="#" target="_blank">Explore our Collections</a>
          <img
            src="https://raw.githubusercontent.com/MartaFagundez/FreeCodeCamp/master/LandingPage/img/explore.png"
            alt=""
          />
        </div>
      </section>

      <section class="testimonials">
        <a id="testimonials"></a>
        <h2 class="uppercase accent">Testimonials</h2>
        <p>See our Customers Reviews</p>
        <iframe
          id="video"
          width="560"
          height="315"
          src="https://www.youtube.com/embed/oVsBrbH_s4Y"
          frameborder="0"
          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen
        >
        </iframe>
      </section>
    </main>

    <footer id="footer">
      <section class="newsletter">
        <a id="newsletter"></a>
        <img
          class="news-icon"
          src="https://raw.githubusercontent.com/MartaFagundez/FreeCodeCamp/master/LandingPage/img/icon_logo.png"
          alt=""
        />
        <h2 class="uppercase accent">Newsletter</h2>
        <p>
          Subscribe and receive creative ideas and useful tips for your cactuses
          and succulents.
        </p>

        <form id="form" action="https://www.freecodecamp.com/email-submit">
          <input
            id="email"
            name="email"
            type="email"
            placeholder="Your Email (Required)"
            spellcheck="false"
            value=""
            maxlength="30"
            required
          />

          <input id="submit" type="submit" value="Suscribe" />
        </form>
      </section>

      <div class="connect-contact">
        <a id="connect-contact"></a>
        <section class="connect">
          <h4>Connect</h4>
          <div class="connect-icons-group">
            <a href="#" target="_blank" title="Follow us on Instagram">
              <img
                src="https://raw.githubusercontent.com/MartaFagundez/FreeCodeCamp/master/LandingPage/img/instagram-icon.png"
                alt="Instagram icon"
              />
            </a>
            <a href="#" target="_blank" title="Follow us on Youtube">
              <img
                src="https://raw.githubusercontent.com/MartaFagundez/FreeCodeCamp/master/LandingPage/img/youtube-icon.png"
                alt="Youtube icon"
              />
            </a>
            <a href="#" target="_blank" title="Follow us on Pinterest">
              <img
                src="https://raw.githubusercontent.com/MartaFagundez/FreeCodeCamp/master/LandingPage/img/pinterest-icon.png"
                alt="Pinterest icon"
              />
            </a>
          </div>
        </section>

        <section class="contact">
          <h4>Contact</h4>
          <p>235 Fifth Avenue, 27th fl. NY, US</p>
          <p><strong>Phone</strong>: +123.456.789</p>
          <p><strong>Email</strong>: hello@greeenspirits.com</p>
        </section>
      </div>
    </footer>
  </body>
</html>

Sau khi pate xong lưu lại.

Upload file vừa tạo lên S3 bằng cách kéo thả file hoặc chọn upload lên bucket

Thế là chúng ta đã hoàn thành việc up file lên S3

Bạn có thể truy cập trang của bạn trực tiếp từ S3 thông qua url được lưu phần như hình phía dưới sau khi bước Enabled static website

Bước 4: Cấu hình CloudFront

Giống như tìm kiếm S3 thì bước này ta sẽ tìm kiếm CloudFront service

Chọn button tạo mới

Tiếp theo chọn S3 của mình và click Use website endpoint

Tất cả để mặc định và phần bảo mật thì chúng ta bỏ chọn cho đỡ tốn tiền vì đây là bài lab

Sau khi tạo xong chúng ta truy cập vào link sau và chúc mừng chúng ta đã tạo xong

Và kết quả nè

Nếu không thành công mọi người có thể ib trực tiếp mình nhé. Demo: https://d32t5zi2gyxmlx.cloudfront.net Facebook: https://facebook.com/nguyenvanphong5998

Học AWS cùng mình, Ngày 2

Bước 1: Chọn region và tạo một s3 Bucket

Bước 2: Cấu hình cần thiết cho S3 để public file

Bước 3: Tạo file index.html và upload lên S3

Bước 4: Cấu hình CloudFront

Bài viết liên quan

Học AWS cùng mình, Ngày 3

Học AWS cùng mình, Ngày 1