[React]Nginx + GitLab CI/CD 셋팅 - (1)

최근 리액트에도 관심이 생겨 공부중인데 프로젝트를 만들어 서버에 올리는 것까지 해보려 합니다.

프로젝트는 create react-app으로 설치, 이후에 Gitlab, Gitlab runner를 이용해 빌드, 배포까지하는 과정을 기록해보려 합니다.

 

※ 테스트 환경

• AWS EC2 - Amazon Linux2

---

1. nginx 외부 저장소 추가

리액트 프로젝트를 띄울 웹 서버 Nginx를 설치합니다.

*아래와 같이 nginx가 yum 저장소에 없기 때문에 외부 저장소를 추가해야합니다.

sudo vim /etc/yum.repos.d/nginx.repo

 

 

아래 내용을 입력하고 저장합니다.

[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/7/$basearch/
gpgcheck=0
enabled=1

 

nginx 정보 확인 후 아래 이미지와 같이 패키지 리스트가 보이면 정상입니다.

sudo yum info nginx

 

2. nginx 설치

sudo yum install nginx

 

설치된 nginx 버전을 확인해봅니다.

nginx -v

 

3. 서버 설정 변경

한글 깨짐 현상이 있어 한글 설정을 추가합니다.

nginx 디렉토리는 /etc/nginx로 생성됩니다. 설정 파일은 AWS EC2 리눅스 버전에 따라 다른 것을 확인했습니다. Amazon Linux 2 에서는 /etc/nginx/conf.d/default.conf 가 기본 설정 파일로 생성되며 Amazon Linux 2023 에서는 /etc/nginx/nginx.conf로 생성됩니다.

 

server 위 아래로 charset utf-8 을 추가합니다.

 

 

4. 서버 실행

systemctl start nginx
systemctl stop nginx

 

서버 실행 후 접속을 위해 인바운드 규칙에 80포트를 추가해줍니다.

 

퍼블릭 주소로 접속시 아래와 같은 화면이 나온다면 성공입니다.