EC2에서 Apache를 설치하고 간단한 텍스트가 표시되도록 웹 서버를 만들어 보겠습니다.
그 전에 Apache와 NginX를 비교한 글도 보시면 도움이 될 것 같습니다.
https://cleaning-toolbox.tistory.com/43?category=953693
Apache와 NginX를 비교 ( 아파치 vs 엔진엑스)
아직까지 한번도 Apache라던지 NginX등 웹 서버 소프트웨어를 사용해본적이 없기에 개인 프로젝트를 진행하면서 이 두가지의 소프트웨어가 제일 인기가 많았고 어떤 것에 차이가 있고 각각의 장단
cleaning-toolbox.tistory.com
1. VS Code로 EC2에 접속을 한 후 user에서 root 권한으로 바꿔줍니다.
2. yum install httpd -y apache 를 통해 Apache를 EC2내에 설치해줍니다.
3. service httpd start 로 웹 서버를 실행해줍니다.
4. cd /var/www/html 로 디렉토리를 변경해주고 vim편집기를 통해 index.html을 만들어줍니다.
5. 아래와 같이 코드를 작성 후 esc 버튼을 누른 후 :wq(저장 후 나가기)를 통해 편집기를 탈출합니다.
<html>
<title> Server </title>
<h1> hello test </h1>
</html>
6. 그 후 EC2 인스턴스에서 퍼블릭 IP주소를 주소창에 붙여넣으면 정상적으로 웹 서버가 작동되는것을 볼 수 있습니다.
7. 여기서 오류가 나는 경우도 있는데 그럴경우 보안탭에 보안 그룹을 눌러줍니다.
8. 인바운드 규칙 편집을 눌러줍니다.
9. 아래와 같이 규칙을 편집하고 저장한뒤 다시 퍼블릭 IP를 주소창에 입력하면 정상적으로 작동됩니다.
10. 저는 예전에 해놓았던 html파일을 index에 넣어서 아래의 기능들을 EC2에 구현하려고 합니다.
<html>
<head>
<title>메뉴화면</title>
</head>
<body>
<center>
<a href="/">
<div style="color: rgb(175, 184, 178); font-size: 5em; font-weight: bold;">
Dogyu's Server
</div>
</a>
<br><br>
</center>
</body>
<style>
a{
text-decoration-line: none;
}
html,body{
height:100%;
}
body{
background-color: rgba(15, 15, 15, 0.781);
}
body:before{
content:'';
display:inline-block;
}
button{
background:#00000000;
color:rgb(175, 184, 178);
border:none;
position:relative;
height:60px;
font-size:1.6em;
padding:0 2em;
cursor:pointer;
transition:800ms ease all;
outline:none;
}
button:hover{
background:rgba(5, 5, 5, 0.479);
}
button:before,button:after{
content:'';
position:absolute;
top:0;
right:0;
height:2px;
width:0;
background: #deff24;
transition:400ms ease all;
}
button:after{
right:inherit;
top:inherit;
left:0;
bottom:0;
}
button:hover:before,button:hover:after{
width:100%;
transition:800ms ease all;
}
</style>
<body>
<center>
<br><br><br><br><br>
<div id="btn_file">
<a href="/upload"><button id = "btn_upload">파일 업로드</button></a>
<a href="/download"><button id = "btn_download">파일 다운로드</button></a>
<a href="/delete"><button id = "btn_delete">파일 삭제</button></a><br><br><br><br><br><br>
</div>
<a href="/weather"><button id = "btn_weather">서울 날씨정보</button></a>
<a href="/kakao"><button id = "btn_kakao">카카오</button></a>
<a href="/message_send"><button id = "btn_send">건의사항 보내기</button></a><br><br><br>
</center>
</body>
</html>
html과 CSS은 주 목적이 아니기에 따로 설명은 안할것 같습니다.
기본적인 부분을 다뤄보면서 점점 더 커져가는 재미를 느낄 수 있도록 작은 부분또한 작성하도록 하겠습니다.
'AWS > 실습(기초)' 카테고리의 다른 글
| AWS-기초 EC2에 Docker를 이용한 Maria DB 설치하기 (0) | 2021.11.16 |
|---|---|
| AWS-기초 EC2에 Maria DB 설치하기 (0) | 2021.11.15 |
| AWS-기초 EC2와 VS Coode 연동하기 (0) | 2021.11.11 |
| AWS-기초 EC2와 Github 연동하기 (0) | 2021.09.13 |
| AWS-기초 EC2에서 파이썬 설치 (0) | 2021.09.13 |
