[AWS EC2] AWS EC2 에 React 빌드 배포하기(+RestAPI 까지)

#AWS #React #Nginx

---

※ 본 글은 [AWS EC2] EC2에 React 앱 + Node.js 서버 배포 2 - Nginx + React 글을 출처로 하여 작성합니다.

오랜만에 개발로 글쓴다 :)

요즘은 개발 일 투성이라 백/프론트에 몰두 하고있다.

여태까지는 React 로 개발하면서 디버깅 모드로 그냥 로컬에서 끄적이면, PM 하시는 분이 알아서 배포해주셔서 "음, 잘돌아가눈군" 하고 말았었는데 요번에는 내가 개발과 더불어 배포까지 맡게 되면서 부랴부랴 AWS 에 배포하는 방법을 찾아보았다.

그래서 찾아본게 AWS EC2 + Nginx 조합이다.

보안하면서는 웹서버로 Nginx 보다는 apache,tomcat 부류를 볼일이 많았는데 개발 쪽에서는 Nginx 가 상당히 가볍고(?) 편해서 많이들 쓰는 것 같았다.

일단은 CentOS 기준으로 설명드린다.

1. Node.js , Yarn 설치

curl -sL https://rpm.nodesource.com/setup_17.x | sudo bash -
sudo yum install -y nodejs

sudo yum install yarn

참고로 npx 와 npm 은 nodejs 설치하면서 자동으로 설치된다.

그리고 지금 이 글을 쓰는 시점에는 node.js 17 버전이 최신이지만 나중에 보시는 분들은 공식홈페이지에서 최신버전 확인하고 버전에 맞는 yum repo 를 추가하길 바란다!

2. Nginx 설치

sudo yum install nginx

설치는 간단하다. 작업은 주로 /etc/nginx 에서 진행될 것이다.

3. React Build 연결하기

React 로 만든 프로젝트가 빌드되었다고 가정하고 빌드과정은 건너뛴다. 빌드방법은 package.json 에 적혀있을 것이다.

sudo service nginx status

위 명령어 해서 active 상태이면 http://서버ip 로 들어갔을 때, AWS Nginx 기본 페이지가 뜰 것이다.

프론트 단은 endpoint 를 / 로 해서 기본페이지 대신 우리 프로젝트가 뜨도록 할 것이다.

그러려면 /etc/nginx.conf 를 설정해야하는데,

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 4096;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        root         /usr/share/nginx/html;

설치 후 기본세팅은 이렇게 되어있을 것이다. nginx conf 파일은 include 기능이 가능한데, 우리는 server 부분의 코드조각을 따로 정의해서 include 할 것이다. 그러니까 기본세팅의 server은 모두 # 으로 주석처리 해주자.

sudo mkdir /etc/nginx/sites-enabled
sudo mkdir /etc/nginx/sites-available
cd /etc/nginx/sites-available
sudo vi (하고싶은이름).conf

(하고싶은이름).conf 에 이제 우리 프로젝트 경로를 지정해주고 endpoint 를 정의할 것이다.

server {
  listen 80;
  location / {
    root /home/ec2-user/(프로젝트경로...)/build;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}

이렇게만 해두자. 추가적인 설정은 개인별로 알아서!

ln -s /etc/nginx/sites-available/(하고싶은이름).conf /etc/nginx/sites-enabled/(하고싶은이름).conf

그리고 (하고싶은이름).conf 을 심볼릭링크로 하여 sites-enabled 에 넣어두자. 앞으로 conf 들은 이런식으로 관리하는게 효율적이라고 한다.

그리고 다시 /etc/nginx.conf 를 켜서 심볼릭링크를 추가해주자.

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*.conf; ==> 이 줄
#    server {
#        listen       80;
#        listen       [::]:80;
#        server_name  _;
#        root         /usr/share/nginx/html;

nginx 를 재구동하자.

sudo nginx -t
sudo service nginx restart

그러면 우리가 설정한 React 프로젝트가 브라우저에 잘 띄워질 것이다.

다음은 같이 동반되는 rest api 서버이다. 이건 프론트보다 훨씬 쉽다.

/etc/nginx/sites-available/(하고싶은이름).conf 로 다시 돌아와서

server {
  listen 80;
  location / {
    root /home/ec2-user/(프로젝트경로...)/build;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  location /api {
      proxy_pass http://localhost:(포트)/;
  }
}

이렇게 location 과 proxy_pass 만 설정해주면 된다.

그러면 프론트에서 axios 같은걸로 요청할 때, 기존 api path 는 그대로 놔두고 앞에 host 부분에 /api 만 붙여주면 알아서 proxy_pass 가 작동되어 요청이 제대로 간다.

더 많은 옵션이 있는 것으로 아는데 구동에는 이정도면 되는 것 같다. 정리 끗