AWS 인스턴스 | NginX 세팅 | React 배포

내가 VS code로 만들던 React 파일들은

모두 로컬에서 작업하던 것이기 때문에

서버에 배포해서 공개적으로 접근이 가능하도록 해줘야한다

 

과정이 꽤나 복잡해서 잊어버리지 않도록 정리해야겠다

 

---

 

1. 인스턴스 만들기

 

aws 에 회원가입을 하고 무료버전을 선택해서 들어가면,

EC2 => 인스턴스 시작

오른쪽 주황색 버튼

 

  1-1. 우분투 다운로드

       최신버전으로 선택

       검토 및 시작

       시작하기

1-2. 새 키 페어 생성

       새 키 페어 생성 => RSA => 키 페어 이름 입력 =>  키 페어 다운로드

인스턴스 보기

 

여기까지 잘 만들었다면 이런 화면이 뜰 것이다.

막 만들었을 땐 초기화 라는 상태가 뜨는데

이때는 서버에 접속이 불가하다.

좀 기다리면 2/2 검사통과.. 라는 메시지가 뜨는데

그때 접속 가능. 

 

 

1-3. pem 파일 처리

       다운로드 폴더 -> 작업중인 reat 파일로 이동한다

       pem파일은 잃어버리지 않도록 잘 보관해야 한다.

       여기서 권한 이슈가 발생한다면 우클릭 -> 속성 -> 모든권한 허용을 해주어야한다

       자세한 내용은 맨 밑에 블로그 참고바람

깃에 커밋할 때 pem 파일이 올라가서 공개되면 안되니까

gitignore 에 pem 파일을 추가해준다.

아래처럼 pem이 옅은색이 된것이 보인다.

옅은색으로 표시되는 파일은 깃 형상관리에 올라가지 않는다.

 

1-4. 인스턴스에 연결

상단 연결 클릭

명령어 부분을 복사해서 cmd창에 붙여넣기 하면 됨.

예: 여기에 내 서버에 해당하는 명령어가 자동 생성된다.

복붙해서 cmd 에 붙여넣기 하면 된다.

 

---

 

2. cmd 에서 NginX 세팅

 

2-1. cmd 에서 서버로 접속하기

pem 파일 저장한 폴더 위치에서 cmd 창을 띄운다.

위에서 복붙한 명령어를 입력, 엔터

경로 예시
C:\Users\juh22\OneDrive\문서\Github\react-practice\react-tsx>

명령어 예시
ssh -i "practice.pem" ubuntu@서버경로.compute.amazonaws.com

이렇게 촤라락 떴다면 성공

 

여기서부터는 cmd창에 순서대로 적으면 된다.

cmd 창에 빨간 글씨 순서대로 적기

디렉토리나 경로 이름만 주의하고 나머지는 복붙하면 된다

 

2-2. react 애플리케이션 배포 경로 생성

cd ~                                        // 홈 디렉토리에서
mkdir web                                // mkdir  ->  디렉토리 생성
mkdir web/myworkspace

 

2-3. NginX 설치

** 홈 디렉토리에서 설치 해야함.

sudo apt update
sudo apt install nginx

 

계속할까요 같은 확인 메시지 뜨면 yes

입력 후 엔터

2-4. 기본설정 삭제

sudo rm /etc/nginx/sites-available/default

sudo rm /etc/nginx/sites-enabled/default

2-5. 설정 파일 생성

sudo vi /etc/nginx/sites-available/myworkspace.conf

// vi  =>  파일 생성 후 편집하기
vi 파일 편집기 열리면 아래 붙여넣기

 

 

2-6. 설정 내용 입력(i) 및 저장(esc -> wq!)

server {
  listen 80;
  location / {
    root   /home/ubuntu/web/myworkspace;
    index  index.html index.htm;
    try_files $uri /index.html;
  }
}

 

서버가 여기서 부터 시작된다고 설정해주는 것임

   ** http 프로토콜의 기본 포트가 80번 포트

   ** /web/myworkspace 는 내가 설정한 경로&디렉토리명  -> 내가 설정한 디렉토리명으로 입력한다.

 

//라인모드에서 저장,강제종료
 : wq!    

2-7. 심볼릭 링크 생성  - 바로가기 만들기

sudo ln -s /etc/nginx/sites-available/myworkspace.conf /etc/nginx/sites-enabled/myworkspace.conf

** 디렉토리명은 내가 설정한대로 변경해야함

 

2-8. NginX 서버 재가동 (종료, 시작, 상태)

sudo systemctl stop nginx

sudo systemctl start nginx

sudo systemctl status nginx

 

여기까지 잘 했다면 status 명령어 치면 이런 초록불이 뜬다.

그럼  2. cmd 에서 NginX 세팅 은 완성!

---

3. AWS 에서 네트워크 보안설정

서버의 기본 포트는 22번이다.

웹사이트 표준은 http, 포트 80번이다.

이것을 설정해주러 가야한다.

 

EC2 보안그룹  =>  보안 그룹  =>  Edit inboutn rules  =>  http, 0.0.0.0/0, NginX  =>  규칙 저장

 

---

4. VS code 빌드, 서버에 배포하기

 

이제 진짜 거의 다왔다.

서버와 툴 설정은 다 됐으니 이제 로컬 코드를 서버에 연결만 해주면 된다

VS code로 간다.

 

4-1. VS code에서 build 설치 or 갱신

VS code 터미널에서 npm run build 입력

** 오류가 난다면 기존에 build파일을 삭제하고 다시 입력해보자

 

 

4-2. build파일을 서버주소로 올리기

scp -i "myworkspace.pem" -r ./build/* ubuntu@서버주소.ap-northeast-2.compute.amazonaws.com:/home/ubuntu/web/myworkspace

  => 서버로 build의 모든 파일을 ubuntu@서버주소 로 보낸다.

 

"myworkspace.pem"     ->  인스턴스 key 값 . pem 

 :/home/ubuntu/web/myworkspace     ->  서버 절대경로

 

 

4-3. package.json  파일 내부에 배포 주소 입력

매번 이렇게 긴 명령어를 입력하려면 힘드니까

package.json 파일에 명령어를 등록해준다

위에 명령어 복붙하면  " "  때문에 에러난다.

쌍따옴표 한칸뒤에 \(백슬라이스) 입력하기

  ** 주의 json 파일은 ' ' 단따옴표 말고  " " 쌍따옴표 사용해야함.

 

 

4-4. 내부 명령어까지 서버에 등록

npm run deploy

내부에 입력한 명령어로 서버에 다시 등록한다.

 

 

와 이제 진짜 마무리

 

 

4-5. 배포 확인 (2가지 방법)

  1) EC2 퍼블릭 도메인 주소로 접속한다.       퍼블릭 DNS(IPv4) 복사해서 서버에 내가 만들고 있던 React 잘 올라갔는지 확인.
       배포에 성공했다면 내가 작성하던 화면이 보일것이다.

이렇게

   2) cmd 창에서 build 파일들 잘 들어갔는지 확인하기

     -  cd ~myworkspace        설치한 폴더로 이동

     -  ls                              myworkspace에 있는 요소 검색 (build 파일 요소가 나와야함)

     -  cat index.html              (build 안에 index파일 내용보기)  -> vs 에 있던 build > index 내용이 들어있다면 성공

 

 

---

5.  기타 정보

 

5-1. 서버에 배포 후 수정하기

 

배포 이후 수정 한 것 반영 => 아래 명령어 입력

npm run build          최적화된 build파일 생성
npm run deploy        최적화된 build파일을 서버에 배포

 서버에 올릴 때는 최대한 수정을 마치고 완성본을 올려야한다.

 VScode는 로컬영역이라 수정항복이 자동으로 서버에 반영되지 않음.

 배포 후에 수정했다면 배포를 한번 더 해줘야 한다.

 

 

5-2. 업로드 성공한 기존 파일 삭제

ssh -i "myworkspace.pem" ubuntu@ec2주소 "sudo rm -rf /home/ubuntu/web/myworkspace/*"

* 은 모든 파일이라는 뜻,

rm -rf : 강제 삭제 명령어

myworkspace 의 모든 파일을 지운다.

 

 

5-3. nginX 접속로그확인

tail -f /var/log/nginx/access.log

tail 파일경로

tail -f :  파일의 뒤쪽부분 조회하는 명령어 (기본 10줄)

           파일에 내용이 추가될때마다 화면 표시

 

---

관련 자료

 

windows에서 pem파일 권한 허용

https://techsoda.net/windows10-pem-file-permission-settings/

윈도우10 SSH 접속시 PEM 파일 퍼미션 에러 해결방법 - 테크소다