aws ec2 linux server - nginx로 react 배포-2

이전 글에서 이어집니다.

이번 포스팅에서는 설치한 nginx로 react 프로젝트를 배포하는 과정에 대해 작성하겠습니다.

우선, build 된 react 프로젝트 폴더가 필요합니다. 서버에서 git 저장소 clone 후 build 하는 방법이 있고, 로컬에서 build 하여 build 된 폴더를 서버로 전송하는 방법이 있습니다. 전자의 방법이 재배포를 할 때 유리하겠지만, 저는 후자의 방법을 선택했습니다.
이유는, .env와 같은 .gitignore에 명시된 파일을 관리하기 귀찮고, 그냥 후자의 방법이 더 깔끔해보였습니다.

그러면 로컬에서 build 된 폴더를 서버로 옮겨보겠습니다.

로컬에서 서버로 폴더 전송

로컬에서 aws ec2 linux 서버로 폴더를 전송하는 명령어 형식입니다.

scp [옵션] [디렉터리 이름] [EC2 Host이름]@[EC2 Public ip]:[보낼 경로]

예시입니다.

scp -i test.pem -r testfiles ec2-user@10.0.0.0:/home/ec2-user

test.pem 파일은 서버 keypair 파일입니다. 절대 경로로 작성합니다. [디렉터리 이름]에는 폴더의 경로를 적어주면 됩니다.
저는 linux 서버에 /home/ec2-user/[프로젝트 명] 폴더를 생성했고, 이 경로를 [보낼 경로]로 설정하였습니다.

~/Desktop/Coding/projects/OurDepartmentIs/frontend
$ scp -i ../../ourdepartmentis.pem -r build ec2-user@3.36.128.239:/home/ec2-user/ourdepartmentis

nginx 설정

서버로 build 폴더를 전송했다면, 이제 nginx 설정을 해줍시다.

nginx.conf 열기

sudo vi /etc/nginx/nginx.conf

참고한 글에 따르면, "nginx.conf 내에서 react 프로젝트의 build로 바로 이어지게 설정할 수도 있지만, 설정들을 깔끔하게 관리하기 위해서 일반적으로 선호되는 방식은 /etc/nginx 내에 sites-enabled 디렉토리를 생성하여 여기에 각 서비스의 설정을 넣고 nginx.conf가 이들을 확인하도록 하는 것이다.

하나의 인스턴스 내부인데도 ‘각 서비스’라고 표현한 것은, 가상 호스트(서버) 개념을 사용할 수 있기 때문이다. 이를 통해 하나의 컴퓨터, 즉 하나의 IP 내에서 여러 웹을 배포할 수 있다. 그리고 이것은 동시에 nginx의 장점이기도 하다." 라고 합니다.

즉, nginx 서버를 통해 여러 프로젝트를 동시에 배포 가능한데, 이때 사용하는 설정법이라고 하는 거 같습니다.

nginx.conf 수정하기

sites-enabled 디렉터리에 따로 설정을 만들 것이기 때문에, server 블럭은 모두 주석 처리 합니다. 그리고 server 블럭 바로 위에 include /etc/nginx/sites-enabled/*.conf; 코드를 추가하여 sites-enabled 하위의 설정 파일들을 포함하도록 합니다.

include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*.conf; (코드 추가)
# server {
#    listen       80 default_server;
#    listen       [::]:80 default_server;
#    server_name  _;
#    root         /usr/share/nginx/html;
    # Load configuration files for the default server block.
#    include /etc/nginx/default.d/*.conf;
#    location / {
#    }
#    error_page 404 /404.html;
#        location = /40x.html {
#    }
#    error_page 500 502 503 504 /50x.html;
#        location = /50x.html {
#    }
# }

sites-available, sites-enabled 설정

일반적인 방식은 sites-available 디렉토리에 필요한 파일들을 작성한 후 이들과 연결되는 symbolic link(symlink)를 sites-enabled에 추가하는 것입니다.
/etc/nginx 내부에 두 디렉토리를 모두 생성합니다. 그리고 sites-available 내에 원하는 이름(보통 프로젝트 명)으로 설정 파일을 생성해 열어줍니다.

sudo mkdir /etc/nginx/sites-enabled
sudo vi /etc/nginx/sites-available/######.conf

현재 도메인 등록도 되어있지 않고, HTTPS를 위한 준비도 되어있지 않으므로, HTTP에 해당하는 port 80에 대해서 기본 설정만 포함합니다

server {
  listen 80;
  location / {
    root /home/ec2-user/######/######/build;
    index index.html index.htm
    try_files $uri $uri/ /index.html;
  }
}

location 뒤의 '/'는 directive라고 하는 부분인데, IP 주소나 도메인의 뒷부분인 uri에 대응됩니다. '/'만 쓰면 ‘/’로 시작하는 모든 uri에 해당한다는 것으로, 현재 설정은 이 인스턴스의 IP 주소로 port 80을 통해 들어오는 모든 url을 연결시켜줍니다.
root 행에는 아까 프로젝트의 build 디렉토리 경로를 입력합니다.

sites-enabled > symlink 생성 및 nginx 설정 테스트

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

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
위 문구가 출력되면 설정 문법이 정상이라는 의미로 성공입니다. 실패했다면, 오타가 있는지 확인해봅시다.

nginx 동작

nginx가 중지되어 있다면 시작을, 이미 실행중이라면 재시작을 합시다.

sudo systemctl start nginx
sudo systemctl restart nginx

aws ec2 인스턴스 ip 주소로 바로 연결하면 https로 들어가지는데, 현재는 http만 설정했기 때문에, http로 수정하여 접속하면 들어가집니다.

만약, 500 internal serve error가 발생하면, build까지의 경로로 접근할 때 거치는 디렉토리들에 대해 외부에서의 실행 권한이 없어서 발생하는 문제일 가능성이 높으므로, 홈 디렉토리인 /home/ec2-user의 권한을 others의 실행 권한을 포함한 711로 설정합니다.

chmod 711 /home/ec2-user

---

참고

https://dev.classmethod.jp/articles/use-scp-upload-scp/
https://velog.io/@choi-ju12g/Photorage-3.-React-Spring-을-AWS-EC2-Nginx로-배포하기1#span-stylecolorred--2-react-앱-빌드