인프라
AWS 이용해서 포트폴리오 배포하기(경량 html 공개 url에 올리기)
공부혜이드
2025. 5. 21. 11:37
http://3.39.187.111/
1.AWS프리티어 인스턴스를 만든다.
무료 클라우드 컴퓨팅 서비스 - AWS 프리 티어
이러한 프리 티어 혜택은 AWS 신규 고객에게만 제공되며 AWS 가입일로부터 12개월 동안 유효합니다. 12개월의 무료 사용 기간이 만료되거나 애플리케이션 사용량이 프리 티어 범위를 초과할 경우
aws.amazon.com
저는 아래와 같은 설정으로 프리티어 (무료)인스턴스 하나 만들었습니다.
중요:보안그룹설정은 아래와 같이 설정
2. 포트폴리오를 html로 만들어 봅니다.
참고)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>김혜윤의 포트폴리오</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
text-align: center;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #f8f8f8;
}
.nav-links {
list-style: none;
display: flex;
gap: 1rem;
}
.nav-links li a {
text-decoration: none;
color: #333;
}
.hero {
padding: 3rem 1rem;
}
.highlight {
color: #007bff;
font-weight: bold;
}
.profile-image img {
width: 120px;
height: 120px;
border-radius: 50%;
margin-top: 1rem;
}
.tech-stack {
padding: 2rem 1rem;
}
.stack-icons {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1.5rem;
margin-top: 1rem;
}
.stack-icons img {
width: 50px;
height: 50px;
}
.projects {
padding: 2rem 1rem;
}
.project-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
max-width: 1200px;
margin: 0 auto;
}
.project-card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
padding: 1rem;
text-align: left;
}
.project-card img {
width: 100%;
border-radius: 6px;
}
.project-card h3 {
margin: 0.8rem 0 0.5rem;
}
.project-links a {
margin-right: 0.5rem;
color: #007bff;
text-decoration: none;
}
footer {
padding: 2rem 1rem;
background-color: #f1f1f1;
color: #666;
}
</style>
</head>
<body>
<!-- Header -->
<header>
<nav>
<div class="logo">🐶 TORI</div>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#tech-stack">Tech Stack</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- Hero Section -->
<section id="home" class="hero">
<h1>Hi 👋,<br> 제 이름은 <span class="highlight">김혜윤</span>에요!<br> 저는 <span class="highlight">웹 개발</span>을 잘 해요!</h1>
<div class="profile-image">
<img src="몽실.jpg" alt="토리 사진">
</div>
</section>
<!-- Tech Stack -->
<section id="tech-stack" class="tech-stack">
<h2>My Tech Stack</h2>
<p>제가 주로 사용하는 기술 스택이에요</p>
<div class="stack-icons">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg" alt="HTML">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg" alt="CSS">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" alt="JS">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" alt="React">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/bootstrap/bootstrap-original.svg" alt="Bootstrap">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/tailwindcss/tailwindcss-plain.svg" alt="Tailwind">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/sass/sass-original.svg" alt="Sass">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/redux/redux-original.svg" alt="Redux">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg" alt="Git">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vscode/vscode-original.svg" alt="VSCode">
</div>
</section>
<!-- Projects -->
<section id="projects" class="projects">
<h2>Projects</h2>
<p>제가 진행한 프로젝트들 보여드릴게요</p>
<div class="project-list">
<div class="project-card">
<img src="Rectangle 8.png" alt="Project Image">
<h3>Project Title goes here</h3>
<p>설명 예시입니다. 여기에 간단한 프로젝트 설명을 써 주세요.</p>
<div class="project-links">
<a href="#">GitHub</a>
<a href="#">Demo</a>
</div>
</div>
<div class="project-card">
<img src="Rectangle 8.png" alt="Project Image">
<h3>Project Title goes here</h3>
<p>설명 예시입니다. 여기에 간단한 프로젝트 설명을 써 주세요.</p>
<div class="project-links">
<a href="#">GitHub</a>
<a href="#">Demo</a>
</div>
</div>
<div class="project-card">
<img src="Rectangle 8.png" alt="Project Image">
<h3>Project Title goes here</h3>
<p>설명 예시입니다. 여기에 간단한 프로젝트 설명을 써 주세요.</p>
<div class="project-links">
<a href="#">GitHub</a>
<a href="#">Demo</a>
</div>
</div>
<div class="project-card">
<img src="Rectangle 8.png" alt="Project Image">
<h3>Project Title goes here</h3>
<p>설명 예시입니다. 여기에 간단한 프로젝트 설명을 써 주세요.</p>
<div class="project-links">
<a href="#">GitHub</a>
<a href="#">Demo</a>
</div>
</div>
<div class="project-card">
<img src="Rectangle 8.png" alt="Project Image">
<h3>Project Title goes here</h3>
<p>설명 예시입니다. 여기에 간단한 프로젝트 설명을 써 주세요.</p>
<div class="project-links">
<a href="#">GitHub</a>
<a href="#">Demo</a>
</div>
</div>
<div class="project-card">
<img src="Rectangle 8.png" alt="Project Image">
<h3>Project Title goes here</h3>
<p>설명 예시입니다. 여기에 간단한 프로젝트 설명을 써 주세요.</p>
<div class="project-links">
<a href="#">GitHub</a>
<a href="#">Demo</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<p>© 2025 Tori’s Portfolio</p>
<p>Designed & built with 💜 and ☕</p>
</footer>
</body>
</html>
3. 만들어둔 EC2에 html을 올리겠습니다.(scp 방식)
PS C:\Users\campus3S036\Downloads> scp -i "HyeYoon3.pem" "C:\Users\campus3S036\Desktop\강의자료\서비스기획강의\프디아_HTML_CSS_실습자료\Index.html" ec2-user@3.39.187.111:/home/ec2-user/이런식으로 명령어 작성
scp - i "발급받은 pem키.pem" "index.html 경로" ec2-user@퍼블릭주소:/home/ec2-user/
PS C:\Users\campus3S036\Downloads> ssh -i "HyeYoon3.pem" ec2-user@3.39.187.111
파일 올렸으니 다시 EC2로 진입
4.서버를 EC2 인스턴스 내에 만들어 둡니다.
index.html만 인스턴스에 올리면 주소에 들어가도 index.html을 열람할 수 없습니다.
클라이언트가 요청시 서버가 응답으로써 index.html을 보내는 형태가 아니기 때문입니다.
ngnix를 깔아줍니다.
아래 터미널 명령어 차례대로 실행
sudo yum update -y
sudo amazon-linux-extras enable nginx1
sudo yum install nginx -y
sudo systemctl start nginx
sudo systemctl enable nginx # 부팅 시 자동 실행
sudo cp /home/ec2-user/Index.html /usr/share/nginx/html/index.html
이제 http://본인의 퍼블릭주소(아마존 ec2 대시보드>생성한 인스턴스 누르면 있는 퍼블릭 Ipv4)
입력해서 보면 됩니다 ~