[(Nginx+React)+SpringBoot] 웹 서비스 배포 - 설치편

진병욱·2024년 2월 28일

GitLab Nginx React Springboot aws docker jenkins msa 배포 자동 배포

웹 서비스 배포해보기

목록 보기

1/3

웹 프로젝트 배포를 처음 겪으며 배웠던 내용들과 약간의 팁(?)들에 대해서 이야기 해보려고 한다!

설치편
세팅편1, 2, 3

총 4번의 포스팅을 통해 이야기 해보려고 한다.

🙋‍♂️ 들어가기 전에

사실 배포가 완전 처음은 아니다.

학과 시절 배포 경험이 있다.
환경은 학교 서버 (ubuntu) + apache + php + mysql (phpMyAdmin) 로 구성된 형태였다.

물론 이 때는 웹사이트가 돌아가기만 하면 되는 것이 목표였어서, 수동으로 서버에 접속해서 파일을 업로드했었다.

때문에 우리가 일반적으로 말하는 배포라긴 뭐하지만, 흘러가는 흐름을 대충 알고 있긴 하다.

TMI

여기서 php를 잘 모르는 사람이 있을 수도 있으니 간단하게 설명하자면
우리나라에서는 예전에 많이 사용했다.
물론 현재는 자바공화국이라는 말이 있을만큼 자바를 많이 사용하고 있긴 하지만..

장점으로는, 하나의 언어로 프론트와 백엔드를 모두 구성할 수 있다는 것이다.
때문에 개발 속도가 굉장히 빠르다.

가끔 웹 사이트의 url에 .php? 가 있는 걸 간간히 본적이 있을텐데 그런 사이트들이 php로 만들어진 사이트들이다.

그래서 전세계적으로는 웹사이트 대부분의 점유율을 가진다.
관련 자료

대표적인 사이트로는 초기 페이스북,

쉽게 설명하면 jsp의 구조를 생각해보면 된다.

📰 프로젝트 아키텍처

AWS EC2
nginx
docker
react, spring boot
mysql, redis
jenkins. gitlab

위와 같은 아키텍처를 가지고 있다.

기본적으로 모든 서비스를 도커로 컨테이너화하여 버전을 관리하고
jenkins + gitlab 을 통해 자동 배포를 구현했다.

또한 docker compose를 통해 여러 컨테이너를 관리하는 경우도 있지만 나의 경우는 dockerfile 만을 사용했다.

딱히 이유는 없다

특이점으로는 MSA로 백엔드를 구성했다는 점이다. 때문에 dockerfile을 굉장히 많이 만들어야 했다..

🔍 준비

기본적으로 react + spring boot를 배포해야 했고
관련해서 많이 검색을 해 봤다.

nginx가 리버스 프록시로서 역할을 하기 때문에, nginx와 react를 따로 이미지화해서 연결을 해도 될 것 같았다.
하지만 대부분이 nginx+react를 하나의 이미지로 따서 배포를 하고 있었다.

대표적으로 세 가지 이유가 있었다.

1. 편의성
	- 통합 관리를 통해 배포나 업데이트 작업 간편
2. 일관성
	- 실행 환경의 일관성 보장
3. 효율성
	- react앱을 빌드 (정적 페이지) 해서 nginx에서 이를 서비스하는 것이 효율적

그래서 나도 nginx와 react를 하나의 docker 이미지로 관리하기로 했다.
~~추후에 여기서 설정에 애를 좀 많이 먹었다.~~

기본 설치

프로그램 설치 전에 나는 여러 텍스트 편집기 중 nano를 사용하기 때문에,
nano를 사용할 사람들은 설치하고, 아니면 vi를 쓰면 된다.

sudo apt-get update
sudo apt-get install nano

Nginx

웹 호스팅 확인을 위해 먼저 nginx를 설치한다
아래는 설치를 위한 명령어들이다.

# 패지키 업데이트
sudo apt update

# 설치
sudo apt-get install nginx

# 현재 방화벽 상태 확인
sudo ufw status

# 80번 포트개방
sudo ufw allow 'Nginx HTTP'

# ssh 접속을 위한 22번 포트 개방
sudo ufw allow ssh

# 방화벽 적용
sudo ufw enable

# nginx 구동 상태 확인
sudo systemctl status nginx

# 서버 부팅시 자동 시작
sudo systemctl enable nginx

# nginx 서비스 시작
sudo systemctl start nginx

이후에 서버 도메인 or 아이피에 접속해서 아래와 같이 뜬다면 성공 !!

추후 SSL 설정관련해서, https 설정을 했음에도 접속이 http로 연결된다면
HTTPS 방화벽을 설정해주면 해결될 것이다.

sudo ufw allow 'Nginx HTTPS'
sudo ufw enable

(++2024.03.16 추가사항) 여기서 문제 ❗❗❗❗
예전의 기억을 되살려 AWS EC2 서버를 설정하는 과정에서 블로그글을 보고 설정하다 문제가 하나 발생했다. 설정을 다하고 다시 ssh로 접속을 하려고 보니 접속이 되지 않는 것이다.

이유는 바로
방화벽을 적용하는 과정에서 ssh 접속을 허용 (22번 port 허용) 을 해주지 않았던 것이었다;; 😂

일단 접속을 해야하니
https://velog.io/@fo_rdang/ec2-%EB%B0%B0%ED%8F%AC-Failed-to-connect-to-your-instance#%EC%8B%9C%EB%8F%848-%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-%EC%82%AC%EC%9A%A9%EC%9E%90-%EB%8D%B0%EC%9D%B4%ED%84%B0-%ED%8E%B8%EC%A7%91%ED%95%98%EA%B8%B0
이 글을 읽고 먼저 인스턴스에 접속을 한다
접속을 하면 방화벽이 풀려있을 것이다.
방화벽을 다시 적용하기 전에

sudo ufw allow ssh

위 명령어를 통해 ssh 관련 포트를 allow 해준다. (22번 port)

이런 실수를 꼭 하지 않길 바란다 ㅠㅠ

위와 같이 문구가 나오지만 괜찮다 !!

LetsEncrypt & certbot

적용전에 SSL 인증서를 받기 위해서는, 도메인을 먼저 준비해야한다.
준비가 되어있지 않다면 DNS부터 설정하자

이제는 서버에 https를 적용해보자!!
여기서 https란 서버와 클라이언트 사이의 암호화를 말한다.
보통 웹 사이트에 접속하면 화면 왼쪽 상단에 보이는 자물쇠가 적용된 모습을 볼 수 있다.

certbot을 통해 서버에 적용이 가능하다.

certbot 설치

sudo apt-get install certbot python3-certbot-nginx

certbot을 통한 인증서 발급

sudo certbot --nginx -d <도메인 주소>

nginx 재시작

sudo systemctl restart ngninx

이제 웹사이트에 접속하면 https가 적용된 모습을 확인할 수 있다.
적용되지 않았다면 최대 30분정도 기다리면, 적용된 것을 확인할 수 있다.
혹은 서버의 방화벽을 확인해보면 된다.

Docker

docker 사용을 위해 설치를 한다.

docker란 쉽게 설명하면, 여러 서비스를 이미지화하여 컨테이너로 만들어 주는 것이다.
여기에 docker hub (=github) 를 활용하여 여러 서비스의 이미지를 버전별로 관리할 수도 있다.

여러 버전을 관리하지 않더라도, 서비스의 설정을 한 번 해두고 docker로 관리를 하면
한 번 설정한 세팅을 통해 그대로 서비스를 사용할 수 있어 편하다

공식 홈페이지 가이드를 통해 설치 및 확인이 가능하다.

아래와 같은 명령어를 보통 많이 사용한다.

# 이미지 관련
# 모든 이미지 확인
sudo docker images

# 이미지 받기
sudo docker pull <이미지명>

# 이미지 삭제
sudo docker rmi <이미지명 or ID>


# 컨테이너 관련
# 모든 컨테이너 확인 (이름, 상태 등)
sudo docker ps -a

# 컨테이너 실행 (생성 -> 실행)
sudo docker run <옵션><이름>

# 컨테이너 시작
sudo docker start <컨테이너명 or ID>

# 컨테이너 중지
sudo docker stop <컨테이너명 or ID>

# 컨테이너 로그 확인
sudo docker logs <컨테이너명 or ID>

++ 추가로 기본적으로 AWS EC2의 프리티어는 메모리는 1GB를 제공하기에
안정적인 서비스를 위해서는 가상메모리 설정을 해주는 편이 좋다.
https://repost.aws/ko/knowledge-center/ec2-memory-swap-file
위의 AWS 포스팅을 통해 설정이 가능하다.
위 포스팅에서는 4GB, 즉 기본 2GB를 기준이기에
프리티어의 경우에는 count를 16으로 잡고 진행하면 된다.