$$config title: [풀스택] 2022.10.20 67일차 keywords: - 배포 - AWS EC2 인스턴스 $$ # 배포 # 배포를 위한 인스턴스 생성 후 접속 -- Amazon EC2 인스턴스 생성은 스킵 -- 인스턴스 접속을 위한 ' putty ' 다운로드. 다운로드 이후 실행하면 하단의 이미지가 나온다. ![이미지1번](https://i.postimg.cc/BvqM93V3/11111.png) 초기화면의 SSH 클릭 후 Auth로 진입.
![이미지2번](https://i.postimg.cc/NfcN7RkL/2222222.png)
Browse를 누른 후 EC2 인스턴스 생성 당시 키페어 파일( .ppk)를 클릭.
![이미지3번](https://i.postimg.cc/VvYC5sXs/444444.png)
이후 상단 Session클릭 후 Host Name에는 EC2의 IP를, Saves Sessions에 저장할 이름을 적고 Save를 눌러준다.
![이미지4번](https://i.postimg.cc/MKLnJm3p/666666666.png)
이후 실행하면 상단의 이미지가 나오는데 ubuntu 로 적어주면 기본적으로 인스턴스 접속은 가능해졌다. # 인스턴스 접속 후 백엔드 파일 전송 본인의 컴퓨터에서 백엔드 (스프링부트) 파일의 build - libs 안에 들어가면 파일명.jar 파일이 있다. (ddl auto : create 주석이 아닌지 잘 확인할 것. 주석이라면 실행해도 테이블이 만들어지지 않아 오류가 발생할 수 있음.) ![이미지1번](https://i.postimg.cc/gJJT6h8r/11111111111.png) 상단의 .jar 파일을 내 컴퓨터에서 ubuntu 로 전송하기 위해 filezilla를 이용한다.
![이미지2번](https://i.postimg.cc/sgKFQsq6/22222222222.png)
google에 filezilla 검색 후 FileZilla Client 를 다운로드해준다.
![이미지3번](https://i.postimg.cc/gJC1FJLJ/333333333333.png)
다운이 완료되면 실행해준 후 상단 왼쪽 위 편집의 설정을 클릭해준다.
![이미지4번](https://i.postimg.cc/XYjm0tqw/4444444444444.png)
SFTP의 키파일 추가 버튼을 클릭 후 , EC 2 키페어파일 ( .ppk )을 선택하고 키파일 추가를 해준다.
![이미지5번](https://i.postimg.cc/XYshNxBt/555555555.png)
확인버튼 클릭 후 초기화면 상단왼쪽의 파일 탭의 사이트관리자를 클릭해준다.
![이미지6번](https://i.postimg.cc/ZnzssMXv/666666666.png)
왼쪽 하단 새사이트를 누른 후 이름은 자율적으로 작성해주고, 오른쪽 상단 프로토콜은 SFTP 로 변경해주고 호스트에는 EC2인스턴스의 IP를 작성해준다. 사용자는 ubuntu 로 작성하고 확인을 누른다.
![이미지7번](https://i.postimg.cc/Jzz6FJYx/7777777777.png)
이후 내 컴퓨터의 백엔드의 build > libs 안에 있는 .jar 파일을 드래그해 옮겨준다.
![이미지8번](https://i.postimg.cc/s2BnjzrZ/8888888888888.png)
이후 ubuntu에서 ls 을 해보면 파일이 옮겨져있는것이 확인 가능하다. # ubuntu JAVA 설치 백엔드의 .jar 파일을 전송받았지만 java가 없다 java를 설치하자. 설치에 앞서 하단의 명령어를 먼저 실행해주자. ```java sudo apt update 완료 후 sudo apt upgrade 완료 후 sudo apt install -y openjdk-17-jdk ``` 설치가 다 되었다면 java -version 이라고 명령어를 입력해주면 하단 이미지처럼 java 버전이 출력되며 성공적으로 다운로드가 되었다.
![이미지1번](https://i.postimg.cc/fynCwq77/11111111.png)
백엔드와 연결해줄 데이터베이스 설치를 위해 하단의 명령어를 입력해준다. ```java sudo apt install mariadb-server ``` 설치가 다 되었다면 ```java sudo systemctl status mysql ``` 을 입력해주면 mysql의 현재 상태가 출력된다. Active: active(running)으로 잘 실행됨을 알 수 있다. mysql의 계정생성을 위해 하단의 명령어를 한줄씩 입력해준다. ```sql sudo mysql -u root CREATE USER 'sbsst'@'%' IDENTIFIED BY 'sbs123414'; GRANT ALL PRIVILEGES ON *.* TO 'sbsst'@'%'; ``` 이후 새로 생성된 계정으로 접속하기 위해 하단의 명령어를 입력해준다. ```sql mysql -u sbsst -p 비밀번호 ``` 이후 설정 변경을 위해 하단의 명령어를 입력해준다. ```sql sudo vim /etc/mysql/mariadb.conf.d/50-server.cnf ```
![이미지2번](https://i.postimg.cc/XNfcf8ch/22222222222.png)
그럼 이런 화면이 나온다. A 혹은 I를 누르면 Insert 모드로 변경된다.
![이미지3번](https://i.postimg.cc/3NYGSsCq/33333333333.png)
bind address 를 찾아 그 앞에 # (주석처리)를 해준다.
![이미지4번](https://i.postimg.cc/tJkxLBB4/444444444444.png) 이후 mysql을 재접속해준다. ```sql sudo systemctl restart mysql ```
mysql에 접속하기 위해 port를 뚫어줘야한다. AWS의 EC2인스턴스의 보안 탭으로 가서 보안그룹을 클릭.
![이미지5번](https://i.postimg.cc/KvsKBkVw/555555.png)
인바운드 규칙 편집 클릭
![이미지6번](https://i.postimg.cc/8k73bxn5/5555555555555555.png)
MySQL을 검색하거나, TCP에 3306 (MySQL 전용 포트)를 입력 후 오른쪽 0.0.0.0/0을 입력하고 규칙 저장을 해준다.
![이미지7번](https://i.postimg.cc/7Y7WF04r/5555555555555555555555.png)
이제 ubuntu에서 MySQL접속을 위해 새 서버를 만들어준다. MySQL Host에는 EC2의 IP를 입력해준다.
![이미지8번](https://i.postimg.cc/yNfQmTmc/6666666666666.png)
그리고 Create Database todolist (백엔드의 데이터베이스 이름에 따라 달라질 수 있다.)
![이미지9번](https://i.postimg.cc/0QMfp121/7777777777.png)
백엔드와의 교신을 위해 인바운드 규칙편집에서 8083번 포트 (백엔드의 포트번호)를 입력 후 규칙 저장을 해준다.
![이미지10번](https://i.postimg.cc/7YMN1VDh/88888888888.png)
# 인스턴스 접속 후 프론트배포 프론트의 연결을 허용하기 위해 3000번 포트의 인바운드 규칙편집을 해준다.
![이미지1번](https://i.postimg.cc/90v8KF0p/1111.png)
서버의 넷 상태를 확인하기 위해 하단의 명령어를 실행해준다. ```linux sudo apt install net-tools ( tool download ) netstat -nltp ( 현재 서버의 넷 상태 파악 위한 명령어 ) nohup java -jar todolist-0.0.1-SNAPSHOT.jar & ( nohup java -jar 실행파일 & => putty를 종료해도 항상 백그라운드 자바파일을 실행하기 위함. ) git clone https://github.com/xanqus/react-todolist-tailwind ( 프론트 git repository ) cd react-todolist-tailwind/ sudo vim src/config/config.js ```
![이미지2번](https://i.postimg.cc/Jn0phBBx/22222222222.png)
사진의 54.197.41.62는 자신의 EC2 인스턴스의 IP를 대입해주면 되고, : 8083은 백엔드 포트번호를 입력해주면 된다. 이후 리액트의 node.js 다운로드 및 nvm, npm설치를 위해 하단의 명령어들을 입력해준다.
```linux sudo apt install curl ( 보통 curl은 깔려있음 ) curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash ( nvm다운로드 ) source ~/.profile nvm install --lts (lts버전 node 다운로드, 완료 후 ) node -v ( node의 버전 확인가능) npm install npm run build npm install -g serve * netstat -nltp 후 확인되는 PID 번호로 kill -9 17913(PID) 하면 그 task를 종료할 수 있다. ```
![이미지3번](https://i.postimg.cc/RhnG75dn/3333333.png) 전부 완료되었다면 상단 사진처럼 ip : front port번호를 통해 들어오면 react파일의 프론트를 볼 수 있으며 ip : backend port를 통해 백엔드와 교신하며 MySQL에 데이터가 저장되는것을 확인 할 수 있다.