1주차 피드백이 끝나고, 2주차 과제를 끝내고 2주차 과제에 대한 복습을 해보려고 한다.
1주차 피드백으로는, 보통 화면 설계라고 말함은 내가 생각했던 와이어프레임이나 화면 스토리보드를 말하는 것이 맞았다. 나는 아키텍쳐와 플로우차트를 그려서 제출했었는데 아쉬움이 남았다.
2주차 프로젝트 업무는 다음과 같았다
프로젝트 업무
비용 산정 자료 만들기
아래 요건을 보고 시스템 운영비용을 예측하여 계산해주세요.
비용은 AWS공식 사이트를 참조하여 조사합니다.
• 사이트는 27개월 운영한다.
• 초기 5개월간 서버스팩이나 구성이 변경될 여지가 없으며, 프리티어 수준의 서버 1대로 시작한다.
• 5개월 이후에는 다른용도의 목적으로 같이 사용할 것이기 때문에 서버 3대가 더 필요하다(총 4대).
• 7개월 이후에는 한대의 서버 스팩을 2배로 늘린다.
• 10개월 이후에는 모든 서버의 스팩을 4배로 늘린다.
• 데이터는 100GB에 시작해서 매달 10GB씩 증가한다.
• 하루에 한 번 백업하고 한달동안 보관한다.
일단 프로젝트 업무를 진행하기 전에 1주차 때 진행했던 AWS EC2준비하는 과정을 복습했다.
먼저 1주차와 동일하게 VPC와 서브넷을 구성한다. VPC Ip는 10.12.0.0/16, 서브넷 IP는 10.12.0.0/17로 설정했다.
보안그룹도 동일하게 생성해준다. 이후에 EC2는 프리티어 사용이 가능한 리눅스 AMI를 선택한다.(나는 2023 AMI로 설정했다.) 인바운드는 TCP 22번과 80번 모두 내 IP허용으로 구성한다.
그리고 이번 주에는 IAM을 생성하고 CLI설치를 통해 EC2를 만드는 과제를 진행했다. 먼저, IAM 유저 생성을 해준다. AWS CLI는 인증된 사용자만 해당 계정에 프로그래밍 방식으로 통제할 수 있게 되어있기 때문에 사용자를 먼저 만들어야한다. 사용자 이름을 지어준 후, 직접 정책 연결 버튼을 클릭 후 AdministratorAccess를 선택한 후 다음 버튼을 클릭하면 된다. (AdministratorAccess는 모든 권한을 다 주겠다는 의미이다)
사용자를 생성하면 다음과 같이 세부 정보가 나타난다.
액세스 키를 생성하고 .csv 파일을 다운로드하고 완료 버튼을 클릭하면 IAM 사용자가 생성된다.
(분실한 경우 다시 만들어야하기 때문에 반드시 다운로드해야된다. 액세스 키를 ID로, 비밀 액세스 키를 비밀번호로 생각하면 된다)
이제 로컬 컴퓨터에 CLI를 설치해야하는데, AWS CLI 설치 가이드를 참고하면 된다.
나는 맥북이기 때문에 Mac 환경에 맞게 설치했다. 이후에 aws configure을 터미널에 입력하고, AWS Access Key ID와, Secret Key 그리고 region에는 ap-northeast-2, Default output format은 table을 입력한다.
그리고 이후에는 chatGPT에게 EC2 생성 CLI 초안을 작성해서 줬다.
AWS EC2를 만드는 CLI가 필요해 내 컴퓨터 0S는 Window야
EC2인스턴스를 프리티어로 만들거야.
AMIE Amazon Liniux2
EBSE 8GiB
중지 버튼을 누르면 모두 삭제 되게 옵션을 걸어주고, 퍼블릭 IP를 활성화 해줘 다른 것은 모두 기본값으로.
이렇게 하면 이제 GPT가 생성 명령어를 만들어준다.
aws ec2 run-instances \
--image-id ami-0abcdef1234567890 \ # Amazon Linux 2 AMI ID
--count 1 \
--instance-type t2.micro \
--key-name "key-pair-name" \
--security-group-ids "sg-security-group-ids" \
--subnet-id "subnet-subnet-id"\
--associate-public-ip-address \
--tag-specifications 'ResourceType=instance,Tags=[{Key=Name,Value=MyEC2}]'
키페어 이름과 보안그룹 id, 그리고 subnet id를 내 인스턴스로 변경한다. 이후에 AWS 웹콘솔을 통해서 정상적으로 인스턴스가 생성되었는지 확인하면 CLI를 통해서 인스턴스 생성하는 작업은 완료된다.
다음으로는 웹 페이지 작성 과제다.
웹 페이지 작성
웹페이지 작성은 HTML이 가장 기본이다. 프론트엔드 개발자가 메인 역할을 수행한다.
이번 과제는 HTML 탬플릿을 통해서 개발하는 연습을 했다. 보통 맨 땅에서 개발하는 경우는 거의 존재하지 않는다. 기업에서는 UI, UX표준에 맞춰놓 탬플릿이 보통 존재한다고 한다. 그래서 이번에는 무료 탬플릿을 제공하는 사이트에서 다운 받은 후 진행했다.
HTML 탬플릿
여기서 마음에 드는 탬플릿 선택하고 다운로드 받는다. (Story라는 탬플릿을 다운받았다) 다운로드한 파일들의 구조를 살펴보면
다음과 같았다. 여기서 index-demo-html 파일을 더블 클릭해서 열어보면 Common Public이라는 표현이 존재하는데, 이는 라이센스를 무료로 제공한다는 것이다. 실무에서 라이센스 문제는 굉장히 예민하기 때문에 프론트엔드 개발자는 책임지고 라이센스 유무를 꼭 확인해야한다고 한다.
이제 소스를 수정해보자. index.html 파일을 열어서 내 마음대로 코드를 수정해봤다.
<div class="content">
<h2>IT 역량을 갖추기 위해 참여한 흔적들</h2>
<p>2025년 7월 | 토이 프로젝트에 참가</p>
<ul class="actions stacked">
<li>
<a
href="https://velog.io/@noeyhgnas/series/IT직무캠프"
class="button"
>블로그 주소</a
>
</li>
</ul>
</div>간단하게 수정해봤다.
배포
이제 배포를 해보자. 배포는 개발한 코드를 서버에 전송하는 것을 의미한다. 규모가 비교적 큰 기업거나, 글로벌 배포가 필요하여 전략적으로 대응해야 하는 경우 Release Engineer라는 이름으로 직무가 분리되기도 한다고 하셨다. 일반적으로는 자신이 개발한 코드를 서버에 넣고 이상유무를 확인하는 것까지 모두 개발자의 업범위에 포함된다.
배포를 위해 사전 점검하기
1) Apache httpd가 읽고 있는 폴더 위치 확인하기
Mac 사용자는 터미널로 EC2에 접속 한 후, pwd 명령어를 통해 현재 폴더의 위치를 확인한다.
2) 다음 명령어로 apache httpd가 읽고 있는 폴더 위치로 들어간다.
cd /var/www/html
3) 다음 명령어로 현재 폴더에 존재하는 파일의 목록을 조회한다.
ll -al
**배포를 위한 보안그룹 확인하기
1) EC2 > 보안 그룹에 입장한다
2) 현재 가동중인 EC2에 설정한 보안 그룹을 선택한 후 인바운드 규칙을 편집하고 22번 포트와 80번 포트가 내 IP로 열려 있어야한다. 위에서 잘 설정했기 때문에 패스~
이제 Mac에서 SFTP로 배포하는 방법을 배워보자
✅ SFTP란?
SFTP (Secure File Transfer Protocol)는 SSH(보안 셸, Secure Shell)를 기반으로 작동하는 파일 전송 프로토콜입니다.
FTP와는 달리 모든 데이터 전송이 암호화되며, 로그인 정보와 파일 내용 모두 안전하게 보호됩니다.
1) 배포할 파일 asstes폴더, images 폴더, index.html파일를 키페어가 존재하는 폴더로 미리 옮겨준다. 나는 /Users/.aws 폴더에 .pem파일을 저장해놨기 때문에 cd /Users/.aws로 옮겨줬다
2) 터미널 접속 후 키 파일이 존재하는 위치로 이동하기
cd /Users/.aws
3) SFTP 명령어로 EC2에 접속
sftp -i "key-pair-name" ec2-users@public:ip주소 를 입력한다
4) 위치를 확인한다
lpwd의 위치에서 pwd로 옮겨주게 된다. pwd로 서버의 위치를 확인한다.
5) put 명령어로 파일을 옮긴다.
배포 후 서버에서 httpd가 읽고 있는 폴더로 옮겨주기
/home/ec2-user 폴더는 apache가 읽고 있는 폴더가 아니기 때문에, 옮긴 것만으로는 실제로 배포가 완료된 것이 아니다. 처음부터 /var/www/html에 넣지 않는 이유는 네트워크 장애에 대비하여 손상된 파일이 존재하지 않도록 하기 위함이다. EC2에 접속 후 파일과 폴더를 /var/ww/html에 옮긴다
sudo mv index.html /var/www/html
sudo mv assets /var/www/html
sudo mv images /var/www/html
이제 옮겨졌는지 확인한다. cd/var/www/html , ll -al
웹 브라우저로 확인하기
잘 배포된 것을 알 수 있다!
이제 다시 프로젝트 업무였던 비용 산정 자료를 만들어보자!
비용 산정 자료 만들기
요건에 맞춰 비용 산정하기
AWS 비용 계산기 AWS 비용 계산기 사이트를 사용해서 산정해보았다.
비용계산에 사용되는 모든 옵션을 다 알아야할 필요는 없다고 하셨다. EC2를 만들 때 그러했듯이, 설정하지 않은 것은 기본값으로 놓는 것이 맞다고 한다.
다음 사이트를 참고해서 사용법을 참고했다.
AWS 비용 계산기 사용 가이드
다시 비용산정할 시스템 조건을 살펴보자
1) 사이트는 27개월 운영한다.
비용계산기는 월별로 계산이 가능하므로 27개월 동안 비용이 변하는 구간에 따라서 계산을 하고 더해주어 야 합니다.
2) 초기 5개월간 서버스팩이나 구성이 변될 여지가 없으며, 프리티어 수준의 서버 1대로 시작한다.
프리티어 수준의 스팩이 무엇인지 찾아보고 비용계산에 옵션으로 넣어주어야 합니다.
3) 5개월 이후에는 다른용도의 목적으로 같이 사용할 것이기 때문에 서버 3대가 더 필요하다(총 4대).
4) 7개월 이후에는 한대의 서버 스팩을 2배로 늘린다.
메모리와 CPU를 중심으로 2배인 스팩을 찾습니다. 정확하게 일치하는 스팩이 없을 경우 주관적으로 선택 해야 할 수 있습니다.
5) 10개월 이후에는 모든 서버의 스팩을 4배로 늘린다.
6) 데이터는 100GB에 시작해서 매달 10GB씩 증가한다.
스토리지는 EBS의 스토리지를 의미합니다.
7) 하루에 한 번 백업하고 한달동안 보관한다.
백업은 EC2의 스냅샷기능으로 제공되고 있습니다.
이렇게 설정해서 계산해보았다. 초기에 모델을 t2.micro로 했는데 맨토님께서 과제 설명해주실 때는 t2.micro가 아니였던거로 기억한다...
내가 개발 동아리에서 프로젝트 진행할 때 백엔드 애들이 서버 띄울 때 AWS이용해서 EC2 서버 이런 얘기할 때 잘 몰랐었는데 이 참에 알게된 좋은 기회였다. 졸업 프로젝트할 때 도움이 많이 되면 좋겠다. 졸업 프로젝트는 프론트엔드로 S3 + CloudFront로 배포하는 경험을 해볼 것 같다.
아직 잘 익숙하지 않지만 점점 공부하면서 알게 되는 것 같다.
