AWS EC2 ubuntu 배포 스프링부트 + React

ubuntu에 디비, 엔진엑스, 스프링부트, react를 이용해서 수동 배포를 진행해보자

이 게시글의 1차목표는 인간젠킨스가 돼서 수동 배포를 완료하는 것!

 

ec2를 발급받고 터미널은 ubuntu, 탄력적 Ip를 발급받았다는 기준으로 설명하겠다.

 

1. ec2 등록

Aws에서 ec2 pem키를 발급받았고 탄력적IP를 등록했다면 MobaXterm을 설치하자

https://mobaxterm.mobatek.net/download.html

MobaXterm free Xserver and tabbed SSH client for Windows

 

설치 후 아래와 같이 설정하면 된다.

1. Session 눌러서 setting 창 열기
2. Remote host에 도메인 or 등록한 탄력적IP주소 입력
3. Advanced SSH settings 탭 클릭
4. Use private key 체크 후 받은 pem 파일 첨부

이후 OK를 누르고 뜨는 로그인창에 Ubuntu를 입력하면 된다.

 

2. 설치목록

깃은 기본적으로 설치가 돼있을거다. git 명령어를 입력해서 확인해보자

마리아DB 설치

참조 블로그 : https://ojava.tistory.com/189

[AWS] ubuntu에서 MariaDB 설치 및 기본 설정하기

MariaDb의 경우 최신 버전은 mysql -u root -p 이렇게 접근이 안되더라. 비밀번호 없이 바로 접근이 가능해서 그냥 접근한 뒤에 따로 mysql -u root -p로 접근할 수 있도록 바꿔줘야한다. (굳이 안바꿔도 되긴 하다.) 위와 관련된 자료는 구글링

 

Java 설치

참조 블로그 : https://chucoding.tistory.com/54

[AWS EC2] Ubuntu 에 JAVA 설치 및 환경설정

 

3. DB연결 테스트

데이터베이스 GUI툴로 서버와 연결되는지 체크해보자. 본인은 mysqlWorkbench를 사용했다.

하기전에 방화벽 설정을 해야한다.

https://www.skyer9.pe.kr/wordpress/?p=3066 

Ubuntu 방화벽 설정 – 상구리의 기술 블로그

위 링크에서 방화벽 사용으로 설정하는 것과 22번포트 사용, 80번포트도 오픈한다.

3306포트는 mariadb링크에 설정하는대로 하면 될텐데 나는 그냥 방화벽에서 3306포트를 오픈했다.

 

방화벽을 오픈했다면 워크벤치에서 db연결을 테스트하자

MySQL Connections에서 +버튼을 누르고

커넥트 네임은 아무거나 입력하고 Hostname에 도메인주소를 입력하자. 탄력적Ip를 받았다면 탄력적 Ip를 입력하면 될거다(아마? 나는 도메인주소가 있어서 도메인 주소를 입력했다). Username에 root말고 mariadb에서 새로 추가한 유저를 넣고 password도 집어넣은 후 ok를 누른다. 

 

그리고 workbench에서 스키마와 테이블을 생성하고 서버에서 만들어졌나 확인해보자

 

 

4.엔진엑스설치

가장 오래걸린 부분 (+ 설정까지)이다.

블로그마다 설정방법이 다 달라서 뭐가 맞는지 오래 헤맸다. 엔진엑스는 설치한 뒤 설정파일을 만져야한다. 

 

한가지 확실한 점은 엔진엑스를 설치하고 실행 명령어를 수행했다면 웹사이트에 ip주소를 입력하면 엔진엑스 창이 떠야한다.

설정부터 만지지말고 엔진엑스를 설치하고 실행한뒤 서버가 뜨는지 확인부터 하자!

 

엔진엑스가 이미 설치돼있거나 apache가 설치된 경우 에러가 발생할 수 있다. 이 포스팅은 어디까지나 처음 실행한 사람을 대상으로 하니 혹시 엔진엑스나 아파치가 깔려있다면 다 지우고 다시 설치하자. 엔진엑스의 경우 삭제하더라도 설정파일이 남을 수 있으니 ubuntu nginx 완전삭제 라는 키워드로 구글링해서 완전히 삭제하고 설치하자!

 

https://t-okk.tistory.com/154

[Ubuntu] Ubuntu 20.04에 Nginx 설치 및 이해

위 게시글에서 3)실행부분까지 하면 웹 브라우저에서 ip입력시 엔진엑스가 뜰것이다.

 

5.엔진엑스 설정

모두가 다른 설정을 가지고 있어서 기본적인 설정파일에 대한 설명만 남기겠다.

우선 ssl키를 발급받아야 한다.

https://m.blog.naver.com/mmvv11/221857447907

우분투 16.04 SSL 인증서 설치하기 (HTTPS 적용)

 

위에 발급 부분에서

letsencrypt certonly --webroot -w=[루트디렉토리] --expand -d [도메인]

라고 돼있는데 루트디렉토리를 그냥 root라고 입력했던거같다?? 

 

---

설정파일 수정

 

본인이 스프링부트와 리액트를 사용하고, ec2에 db까지 설치한 상태이고, 배포하기 전에 스프링부트 따로 실행하고 리액트를 따로 실행해서 프로젝트를 설계했다면 설정파일은 아래랑 거의 똑같이 하자.

 

설정 파일의 골자는 http로 요청이 오면 https로 보내고 기본 루트는 빌드된 프론트엔드 폴더, 나머진 백엔드 경로라고 생각하자.

 

1. node와 npm을 설치하자 npm을 설치한 후 npm install node하면 구버전이 설치되니 구글에 ubuntu 노드 최신버전 설치라고 검색하면 nvm으로 설치하는 명령어가 있다.

2. 깃을 본인Repo에 clone을 한다.

3. clone한 뒤 리액트 프로젝트로 cd한다.

리액트 참조 블로그

https://han-py.tistory.com/408

[React Web] AWS EC2 배포 ALL-IN-ONE

4. npm install을 수행하고 설치됐다면 sudo npm run build를 수행하자. 에러가 난다면 로컬노드버전과 서버노드버전이 크게 차이가 나지 않는지 먼저 확인하고 차이가 나지 않는다면 로컬에서 빌드가 되는지 확인하자. 로컬에서 되는데 서버에서 안된다면 열심히 구글링하자 Adios

 

5. 빌드가 수행됐다면 build라는 폴더가 생성됐을 것이다. 안보인다면 폴더를 이동했다 들어가보거나 ls를 입력하자. 이제 이경로를 기억해두자 이게 엔진엑스에서 여러분이 root폴더다.

 

6.엔진엑스 설정

sudo vi /etc/nginx/sites-available/default 명령어로 설정파일을 오픈하자

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        # SSL configuration
        #
        # listen 443 ssl default_server;
        # listen [::]:443 ssl default_server;
        #
        # Note: You should disable gzip for SSL traffic.
        # See: https://bugs.debian.org/773332
        #
        # Read up on ssl_ciphers to ensure a secure configuration.
        # See: https://bugs.debian.org/765782
        #
        # Self signed certs generated by the ssl-cert package
        # Don't use them in a production server!
        #
# include snippets/snakeoil.conf;


        # Add index.php to the list if you are using PHP

        server_name 도메인이름 or 탄력적ip주소;

        return 301 도메인이름 or 탄력적ip주소$request-uri;
        # pass PHP scripts to FastCGI server
        #
        #location ~ \.php$ {
        #       include snippets/fastcgi-php.conf;
        #
        #       # With php-fpm (or other unix sockets):
        #       fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
        #       # With php-cgi (or other tcp sockets):
        #       fastcgi_pass 127.0.0.1:9000;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #       deny all;
        #}
}

server {
        listen 443 ssl;
        listen [::]:443;

        server_name 도메인이름 or 탄력적ip주소;

        ssl_certificate /etc/letsencrypt/live/도메인주소/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/도메인주소/privkey.pem;

        location / {
                root /home/ubuntu/app/리액트클론한 경로/build;
                index index.html;

        }
        location /api {
                proxy_pass http://localhost:8080;
                charset utf-8;
                proxy_redirect off;

                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-NginX-Proxy true;
                proxy_set_header X-Forwarded-Proto $scheme;
        }
}

 

위와 같이 설정하면 된다.

listen 80부분은 http요청이다. 이쪽으로 요청이 오면 https로 요청하기 위해서 리턴하자

 

443은 아래와 같이 하면 된다 ssl키 발급받은 값을 삽입하고 location / 에는 프론트 폴더명을 적자.여기서 location/은 사용자가 입력한 경로다. 기본적으로 프론트엔드로 가게 하고location/api의 경우 RestController에서 컨트롤러가 받을 때 /api/v1/~~ 이렇게 해놔서 api라고 설정했다. 만약 RestController에서 다르게 구분했다면 다른 요청 링크를 넣자.

 

proxy_pass는 api요청이 왔을 때 저 경로가 수행되도록 한다. proxy_set_header부분은 잘 몰라서 그냥 따라쳤다.

 

저렇게 설정하고 :wq!로 닫자.

 

이제 엔진엑스를 재실행 해보자

sudo service nginx restart

그러면 프론트 페이지는 잘 뜰것이다.

 

7.자바 설정

마찬가지로 백엔드 폴더로 이동해서 자바 빌드를 수행하자.

나는 gradle을 사용했다. sudo ./gradlew build

이후 

cd /home/ubuntu/자바폴더/build/libs/ 폴더로 이동하자

자바는 백그라운드에서 실행시킬것이기 떄문에 nohub을 붙여서 실행하자.

nohup java -jar perfumeService-0.0.1-SNAPSHOT.jar &

 

ps -ef | grep perfumeService-0.0.1-SNAPSHOT.jar

으로 pid가 있는지 확인해보면 완료다!

 

깃에서 다시 pull해서 재실행한다면 위의 명령어로 pid를 얻은 후

kill -9 pid 명령어로 kill해주고 다시 실행해야 한다.