Arcane (6) - 배포1(서버 배포 AWS EC2)

2022. 12. 13. 12:41·프로젝트/개인 프로젝트 - Arcane
반응형

1. 배포하기 (프론트=Netlify + 서버=AWS EC2)

대망의 배포하기다...!! 다 만들어진 프로젝트를 그저 어딘가에 올리기만 하면되는거라 생각했기에 별거 없을거라 생각했다 ㅎ. 하지만 배포시에도 많은 시행착오와 어려움이 있었다.

 

1-1. 서버 배포하기 (AWS EC2)

우선적으로 우리는 서버를 먼저 배포하기로했다. 처음엔 어떤 플랫폼에서 배포할지를 고민했다. 학생인지라 너무 돈이 만히 들지 않으면서도 많은사람들이 이용하는곳을 사용하고싶어서 아마존의 AWS의 EC2를 사용하기로했다.

 

무료 클라우드 컴퓨팅 서비스 - AWS 프리 티어

Q: AWS 프리 티어란 무엇입니까? AWS 프리 티어는 고객에게 서비스별로 지정된 한도 내에서 무료로 AWS 서비스를 살펴보고 사용해 볼 수 있는 기능을 제공합니다. 프리 티어는 12개월 프리 티어, 상

aws.amazon.com

AWS는 아마존에서 제공하는 클라우드 서비스로 가상의 저장공간을 사용자에게 빌려줘서 사용할 수 있게끔 해주는 것이다. 그중에서도 EC2(Elastic Cloud Compute)는 가상의 컴퓨터를 의미하는것으로 아마존이 준비한 가상공간(클라우드)에다가 아마존이 빌려주는 저장소(EC2)를 사용할 수 있는것이다. 보통은 클라우드 서비스에서는 저장공간정도만 내주는곳이 많은데 AWS는 가상 컴퓨터 즉 운영체제와 저장공간 모두를 가지고 있어 실제로 프로그램을 설치하고 서비스를 돌릴수도 있는 기능을 제공해준다. 또한 우리처럼 규모가 매우 작은 프로젝트 혹은 토이프로젝트급이라면 요금제또한 프리티어정도만 사용해도 충분한 서비스를 누릴 수 있다. 보통 서버의 경우 사용하는 만큼(즉, 다른 유저들이 오가는 만큼)만 요금을 부여하기에 큰 부담을 가지지 않아도 된다!(본인의 경우 한달에 몇백원 낸듯?) 단, 프리티어라고 진정한 free는 아니니 조심하시기 바란다.

 

이제 플랫폼도 정했겠다 서버를 여기에 올리기만 하면됬다. 그래서 우선 AWS에 가입한 다음 EC2서비스를 선택한 다음에  앞서말한 가상 컴퓨터인 EC2 즉 인스터스를 하나 받는다(AWS에서 받는 저장소&서비스를 인스턴스라고 부른다.).

 

AWS 인스턴스 생성

우측 상단의 인스턴스 시작버튼을 눌러서 새로운 인스턴스를 생성해주자.

 

인스턴스 생성

그럼 위와 같은 창이 나올텐데 "이름 및 태그"에는 그냥 본인의 서버명을 넣으면 된다 (본인은 프로젝트명과 동일하게 했음). 태그는 추가해도되고 안해도 무관하다.

 

인스턴스 생성

다음으로는 사용할 가상 서비스의 os를 고르는것이다. 앞서 말한대로 ec2는 os를 포함한 가상 컴퓨터를 받는거기에 그에 맞는 os를 선택해주면된다. 나의 경우 Ubuntu를 선택했다. 아무래도 linux명령어를 통해 서버를 조작할 수 있게하기위해 linux기반인 os를 선택해주었다.

 

인스턴스 생성

인스턴스 유형은 현재 자신의 요금제에 맞는 유형을 선택해주면된다. 나의 경우 프리티어를 이용하고 있었기에 t2.micro를 선택해주었다. 아래의 키 페어 에서는 키 페어 생성을 눌러준다.

 

키페어 생성

키 페어는 자신의 가상 컴퓨터를 사용하기위한 인증키라고 보면된다. 인스턴스 생성시 저 키 페어 파일을 하나 줄텐데 반드시 잃어버리지 말고 잘 보관하자! 키페어 이름 또한 본인이 원하는 이름으로 하면된다(혹시 모르니 한글 말고 꼭 영어로 하자). 키 페어 유형은 RSA를 선택해주고 키 파일 형식은 자신이 사용할 SSH프로그램에 맞는걸 고르면된다. 만일 putty를 사용한다면 아래의 .ppk를 선택해 바로 받아도 된다. 나는 putty를 사용해 ubuntu를 사용할 것이기에 .ppk를 골랐다. 만일 putty 혹은 다른 ssh 프로그램을 사용하는데 .ppk파일이 필요한데 .pem을 받아버렸다면 puttygen(putty key generator)를 사용해 .pem을 .ppk로 바꿔주면 된다.)

 

인스턴스 생성

네트워크 설정은 생성시에는 기본값으로 두고 넘어가도 무관하다. 향후 자신이 사용할 포트 번호 정도만 추가해주면 된다.

 

인스턴스 생성

스토리지 구성 또한 기본값으로 하고 인스턴스를 생성해준다. 인스턴스를 생성하면 처음사진에서 보인것처럼 생성된 인스턴스가 보일것이고 생성된 인스턴스를 클릭하면 인스턴스의 ip주소들이 들어있는 세부 정보창을 확인할 수 있다.

 

인스턴스를 생성하고나면 아까 이름지어준 key 파일을 하나 받을 것이다.

 

.ppk 키 페어 파일

이제 해당 key 파일을 가지고 putty를 사용해 ubuntu를 가동시켜주면된다.

우선 아래의 주소를 통해 putty를 다운받고 실행시켜주자. 

https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html

 

Download PuTTY: latest release (0.78)

This page contains download links for the latest released version of PuTTY. Currently this is 0.78, released on 2022-10-29. When new releases come out, this page will update to contain the latest, so this is a good page to bookmark or link to. Alternativel

www.chiark.greenend.org.uk

 

 

putty ec2연결

푸티를 실행시키면 위와같은 창이나오는데 여기서 위와 같이 설정해주면된다. HostName은 사용할 ec2 os이름 @ 뒤에 인스턴스 세부정보창에 있는 IPv4 퍼블릭 주소를 복사해서 넣어주면된다. port번호는 ssh를 위한 번호인 22를 사용하면된다. connection type은 SSH로 해주면된다. 

 

putty ec2 연결

이후 좌측의 SSH를 선택해주고 그안의 Auth를 선택하면 위와같은 창이 뜨는데 여기서 다른건 체크할 필요없이 가장 아래의 Private key file for authectication에서 아까 받은 .ppk 키 페어 파일 경로를 지정해주면된다. 이후 open을 누르면 기본 ubuntu 화면이 나올것이다. 

 

기본 화면

위와 같은 화면이 뜨면 일단 연결은 성공한 것이다. 하지만 제공받은 우분투는 아직 아무것도 설치되어있지 않기에 서버를 좀더 원할하게 가동시키기 위해 기본 세팅을 해줘야한다. 

 

우선 서버 환경을 위한 node를 설치해준다.

sudo apt-get install curl
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt install nodejs
sudo apt-get update
sudo apt-get install nodejs

위의 명령어들을 순차적으로 입력해주면 nodejs가 설치될것이다. (버전은 본인이 사용하고싶은 버전으로 바꾸면댐)

 

이제 해당 가상 컴퓨터에다가 본인의 프로젝트가 올라가 있는 깃 repository를 clone해주면된다.

git clone <프로젝트 repository 주소>

clone을 해주면 해당 프로젝트 폴더가 생성될 것이다. 그럼 해당 폴더로 들어가주면 된다. cd 명령어를 사용해 폴더로 이동하자. 단, 이때 본인의 서버파일들이 있는 폴더로 이동해야한다. 나의 경우 프로젝트의 폴더 구조를 보자면

  • Arcane
    • front
    • server

이런식으로 되있기에 현재 나의 가상컴퓨터엔 Arcane이라는 이름의 폴더가 복사됬을 것이다. 하지만 난 여기서 서버만을 가동시킬것이기에 server 폴더로 들어가줘야한다. 

cd Arcane
cd server

이렇게 해주면된다. 만일 해당 폴더에서 나가고 싶으면 "cd .."이렇게 ..만 붙여주면된다.

 

서버 폴더 이동

이렇게 서버가 들어있는 폴더로 이동했다면 자신의 서버를 실행시켜주면된다. 그전에 우선 npm install을 통해 본인이 작업하면서 사용했던 npm 파일들을 다운받아주자. 이후 자신이 개발할때 처럼 한것같이 서버를 실행시켜주면된다. npm start 혹은 node app.js 등등 본인이 사용해왔던 방법대로 하면된다.

 

이후 서버가 잘 작동된다면 vsc에서 프론트만 실행시켜보면 서버가 잘 작동하는지 확인할 수 있을 것이다.

 

단!!! 그전에 이전까지는 서버의 port번호를 8080 혹은 5000등 리액트가 사용하는 포트번호인 3000과 다른 포트번호를 사용해 proxy설정등을 사용해 서버와 프론트를 연결해 사용했을것이다. 하지만 이제는 서버가 배포되면서 기존의 포트번호를 사용하면 연결이되지 않을것이다. 이제부터는 aws의 인스턴스의 퍼블릭IP를 사용해주어야한다!

그래서 프로트에서 서버의 포트번호를 사용하는부분에다가 이제는 인스턴스 IP를 사용해주자.

예를 들면 Axios에서 get요청을 위해 서버주소 뒤에 서버 포트번호를 넣어다면 이제는

axios
	.get("http://localhost:xx.xx.xxx.xxx")
    ...
    ...

위와같이 새로운 아이피주소를 넣어주면된다.

 

그리고 다시 실행시켜주면 새롭게 배포된 서버와 정상적으로 연결이될것이다.

 

이제는 프론트만 배포해주면된다....

반응형

'프로젝트 > 개인 프로젝트 - Arcane' 카테고리의 다른 글

Arcane (5) - 개발2  (0) 2022.12.07
Arcane (4) - 개발  (2) 2022.12.06
Arcane (3) - 역할 분담 및 개발 시작  (0) 2022.12.04
Arcane (2) - 개발 도구 선택 및 디자인 초안 구성  (0) 2022.12.01
Arcane (1) - 아이디어 선정 & 개발 플랫폼 선정  (0) 2022.12.01
'프로젝트/개인 프로젝트 - Arcane' 카테고리의 다른 글
  • Arcane (5) - 개발2
  • Arcane (4) - 개발
  • Arcane (3) - 역할 분담 및 개발 시작
  • Arcane (2) - 개발 도구 선택 및 디자인 초안 구성
깨부
깨부
성공한 개발자가 되기 위해 깨지고 부서지며 성장하는 나의 모습을 기록해두는 곳
  • 깨부
    깨지고 부서지며 배우는 개발일지
    깨부
  • 전체
    오늘
    어제
    • 깨부 모음 (21)
      • 일상 (3)
        • SSAFY 13기 (2)
      • 취준로그 (0)
        • 2025년 하반기 (0)
        • 2026년 상반기 (0)
      • CS공부 (8)
        • 네트워크 (2)
        • 클라우드 (6)
      • 알고리즘 (0)
      • 프레임워크 (1)
        • Spring Boot (1)
      • 프로젝트 (7)
        • 개인 프로젝트 - Arcane (7)
        • 개인 프로젝트 - 별글 (0)
      • Git & Github (2)
      • Web-Developer (0)
  • 블로그 메뉴

    • 링크

    • 공지사항

    • 인기 글

    • 태그

      깃
      싸피
      SSAFY
      Bastion
      실무능력
      Riot
      프로젝트관리
      서브넷
      취준
      React
      퍼블릭
      AWS Session Manager
      OSI 7계층
      취업
      IP
      EC2
      NAT
      개발자
      EIP
      네트워크
      프로젝트
      git
      VPC
      AWS
      node.js
      프라이빗
      github
      13기
      깃허브
      Arcane
    • 최근 댓글

    • 최근 글

    • hELLO· Designed By정상우.v4.10.6
    깨부
    Arcane (6) - 배포1(서버 배포 AWS EC2)
    상단으로

    티스토리툴바