[Deploy] AWS 실습

✅ 백엔드 배포 실습

https://ap-northeast-2.console.aws.amazon.com/console/home?region=ap-northeast-2

1. 로그인 

2. region -> 서울로 변경

3. EC2 로 이동 -> 인스턴스( 실행 중) -> 자신만 사용하는 EC2 인스턴스 클릭하고 연결 클릭 

4.  Session Manager 클릭 후 연결 클릭 

5. 터미널 뜨는데 거기에 아래 명령어 입력 

$ bash
$ cd ~

+ bash는 쉘의 일종

[리눅스]셸(Shell)이란? 셸의 변경, 쉘 개념, 기능, 종류와 특징(sh, bash, csh, tcsh, ksh)

 

 

 

6. 인스턴스 개발환경 구축 

EC2 인스턴스는 컴퓨터를 빌리는 것과 동일하다고 했음 

서버 구동하는 데에 필요한 개발 환경 구축이 먼저 되어야 함. 

 

 (1) 패키지 매니저가 관리하는 패키지 정보를 최신 상태로 업데이트하기 위해서 아래 명령어 사용

$ sudo apt update

 (2) nvm 설치

nvm  github page>

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

아래 명령어들 차례로 입력

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

설치 과정이 마무리되면 터미널에 nvm --version 명령어를 입력하여 nvm 설치가 정상적으로 끝났는지 확인

 

  (3) node.js 설치 

$ nvm install node 

  (4) node.js의 설치가 끝나면 npm 명령어가 정상적으로 입력되지 않는 상황을 방지하기 위해서 터미널에

$ sudo apt install npm

명령어를 입력해서 npm 설치를 진행. 위 과정이 모두 끝나면 node.js 기반 서버를 실행하는 데 필요한 개발 환경 구축이 완료.

 

 

 

 7.  git을 통해 서버 코드 클론 받기 

홈 디렉토리로 이동한 후, 코드가 저장된 깃헙 레포지토리 주소를 복사하고,

# 홈 디렉토리로 이동
ssm-user@ip-172-31-33-2:~$ cd ~

git clone 명령어를 통해 EC2 인스턴스에 코드를 클론 받는다.

 

 

여기서, 

gitnub의  SSH ( Secure SHell) 을 이용함

ssh는 Secure shell의 줄임말(Secure SHell)로, 보안이 강화된 shell 접속을 뜻합니다. CLI 환경(터미널)에서 다른 PC에 접속하거나 요청할 때 사용하며, 비대칭키를 이용해 사용자를 인증합니다.

SSH 키 생성 ( EC2 터미널 상에서 ) 

ssh-keygen

[명령어] ssh 키를 생성.

ssh-keygen 명령어는 경로 ~/.ssh./ 에 두 파일 id_rsa 와 id_rsa.pub 를 생성.

이 두 파일은 ssh 키 페어라고 하며, 이 중 id_rsa.pub는 누구에게나 공개해도 되는 공개키(Public Key).

리고 id_rsa는 공개되면 안 되고 나만 보관하고 있어야 하는 키라고 하여 개인키(Private Key) 또는 비밀키(Secret Key) 라고 한다.

SSH 키 페어를 생성하였으므로, 생성된 키 페어 중 공개키를 복사하여 gitub에 등록합니다.

 

 

공개키(Public Key) 복사

다음의 명령어를 프롬프트에 입력하여, 공개키를 복사.

cat ~/.ssh/id_rsa.pub

[명령어] ssh 키를 출력합니다.

화면에 출력된 키를 마우스로 드래그한 다음 복사

 

Github에 공개키 등록

브라우저에서 Github로 이동하여 로그인합니다. 우측 상단의 프로필 이미지를 클릭하고, Settings 에 진입합니다.

왼쪽의 내비게이션에서 SSH and GPG keys 를 선택합니다.

나타난 화면에서 SSH Keys 옆의 초록색 버튼 New SSH Key 를 클릭.

등록한 SSH 공개키를 구분할 수 있도록 사용자 임의로 Title을 작성합니다. 그리고 Key에는 복사해둔 공개키를 붙여 넣고, Add SSH Key 버튼을 클릭합니다.

Confirm access에서 Github 로그인에 필요한 비밀번호를 입력해 SSH key 등록을 승인.

 

SSH 공개키가 정상적으로 등록되었는지 확인하려면, 다음의 단계를 따라 레포지토리를 clone .

 

🚨HTTPS 가 아니라 반드시 SSH 탭 눌러서 링크복사한다. 🚨

SSH 주소로 clone

~$ git clone git@github.com:wlgus3/fe-sprint-practice-deploy.git

 

정상적으로 클론했는지 확인하기 위해 터미널에 ls 명령어를 입력합니다.

ssm-user@ip-172-31-33-2:~$ ls
fe-sprint-practice-deploy

터미널을 통해 코드 안의 server 디렉토리로 이동합니다.

cd fe-sprint-practice-deploy/server/

server 폴더로 이동한 뒤, npm install 명령어를 입력해서 필요한 모듈을 다운 받습니다.

 

 

8. EC2 인스턴스에서 서버 실행하기 

npm install 명령어를 이용한 설치 과정이 완료되면 npm start 명령어를 이용해서 서버를 실행.

그럼 아래와 같은 오류 메세지가 터미널에 보임

위 오류 메세지가 보이는 이유는 1024번 아래의 포트 번호를 이용해서 서버를 실행하려면 관리자 권한이 필요하기 때문이다.

관리자 권한으로 서버를 시작하기 위해서는 sudo npm start 명령어를 입력해야 합니다.

sudo npm start

위와 같은 메시지를 통해 정상적으로 서버가 실행되었음을 확인.

 

9.  EC2 인스턴스의 IP 주소로 접근하기 

이제 EC2 인스턴스의 IP 주소로 접근. 

IP 주소는 EC2 대시보드에서 생성한 EC2 인스턴스를 클릭하면 확인 가능

 

아래 화면에서 보라색으로 강조된 부분을 보면, 두 가지 형태의 주소가 존재하는 것을 확인할 수 있다.

퍼블릭 IPv4 주소와 퍼블릭 IPv4 DNS는 형태만 다를 뿐 같은 주소.

둘 중 어떤 주소를 사용하셔도 문제가 없음.

 

EC2 인스턴스의 IP 주소로 접속했을 때, hello world를 확인할 수 있으면 성공

또한 EC2 서버를 확인해보면 GET 요청이 찍혀 있는 것을 확인가능.

 

🔥 이미 초기 세팅 된 경우 아래 명령어 차례로 진행

bash
cd ~
ls
cd 서버이름/server폴더
sudo npm start

 

 

 

 

---

✅ 프론트엔드 배포 실습

1. 자신의 S3 버킷을 찾아서 들어감

2. client 디렉토리를 클론해 온 후  .env 파일을 생서하고 아래와 같이 작성

 env 파일을 작성하는 이유는 배포시 정확한 서버로 요청을 보내기 위함 

REACT_APP_API_URL=http://ec2-13-124-225-241.ap-northeast-2.compute.amazonaws.com

🚨 .env는 client폴더 내부에 두어야 하며 

🚨 오류 막기 위해서 주석 전부 없애기

🚨 주소  마지막에 .com/ 가 붙는 경우 오류 발생할 수 있으니 / 빼주고 .com으로 끝나도록 

 

이후 아래 스크립트 실행

create-react-app은 이렇게 바로 번들링 가능해서 빠른 배포 가능 

실행결과는 build 디렉터리에서 확인 

npm install 
npm run build

 

 

 

3. build 디렉터리의 모든 파일을 자신의 버켓 루트 경로에 넣습니다.

🚨 build 폴더 자체를 넣지 않도록 주의합니다.

 

4.링크 찾아 들어가기

속성 탭에 들어가서 아래로 내리면 

...

버킷 웹사이트 엔드포인트 나옴

 

 -> 혹시 안되면 http 통신을 사용하지 않는지 확인