ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 프론트엔드 개발 근데 이제 EC2와 Nginx를 곁들인
    그 외 다양한 웹 지식 2025. 3. 2. 16:36
    반응형

    프론트엔드 개발 근데 이제 EC2와 Nginx를 곁들인

     

    대부분 EC2나 Nginx에 대해서 DevOps 개발자, 혹은 팀장, 혹은 백엔드 개발자가 자주 건들이다보니 프론트엔드 개발자인 내 입장에서는 당장 더 알아야 할 필요는 없었다.

    그러나 얕은 지식이나마 정보를 전달할 수 있어야 하고, 특히 Nginx는 프론트엔드 개발자라면 어느 정도는 알아야한다는 생각에 공부를 해봤다.


     

    ✅ Nginx를 사용하는 이유

    왜 프론트엔드 개발자는 Nginx에 대해서 알아야할까?

    물론 vercel 같은 것으로 쉽게 배포할 수 있지만 현업에서는 주로 EC2를 이용하고 Proxy Server를 두어 개발하게 되는데 이 때 프론트엔드 배포에 관여하게 되는 것이 Nginx이기 때문이다.

     

    Nginx를 사용하게 되면 "정적 컨텐츠 배포", "SSL 처리", "로드 밸런싱", "장애 대응", "캐싱" 등 다양한 문제를 해결하는데 도움을 받을 수 있다.

     

    ✅ EC2에 대해서

    우리가 흔히 AWS EC2라고 말은 많이 하지만 정작 설명하라고 하면 잘 모르는 경우가 있다.

    EC2는 쉽게 말해 어떤 하나의 가상 컴퓨터라고 생각하면 된다. 즉, 우리가 EC2를 사용한다는 것은 하나의 가상 컴퓨터를 빌리는 것이다.

    왜 빌리는걸까?

    물론 우리가 사용하고 있는 컴퓨터로 배포를 해도 될 것이다. 그러나 컴퓨터를 24시간 365일 내내 켜놔야하고, 인터넷을 통해 내 컴퓨터에도 접근이 가능하다보니 보안적으로 위험할 수 있다.

    특히 AWS나 GCP 등의 서비스를 사용하게 되면 단순 배포 뿐 아니라 추가적인 로깅, 오토스케일링, 로드 배런싱 등 부가적인 기능도 함께 사용할 수 있기에 주로 이런 방식으로 사용하게 되는 것이다.

     

    ✅ EC2 세팅

    EC2 세팅은 사실 클릭 몇 번으로 할 수 있다. 어려운 일은 아닐 것이다. 다만 주의해야하는 점에 대해서 말하려고 한다.

     

    1. 리전

    만약 한국 리전으로 인스턴스를 만들어놓고, 다른 리전에서 인스턴스를 찾아보면 갑자기 없어졌다고 생각하는 경우가 있는 것 같다.

    인스턴스를 만들기 전에 내가 만들고자 하는 인스턴스의 리전이 맞는지 우선 확인하자.

     

    2. Ubuntu

    반드시 해야하는 것은 아니다. 다만 내가 있었던 회사에서는 모두 Ubuntu를 사용했다.

    왜 많은 회사에서 Ubuntu를 사용할까?

    Windows, macOS 등은 편리한 사용성을 위해서 많은 것들을 기본적으로 설치하고 있다.

    하지만 우리의 목적은 배포이다.

    그런만큼 배포에 필요한 기능만 있는 것이 경제적이기 때문에 Ubuntu를 선택하는 것이다.

     

    3. 보안그룹

    배포만 생각한다면 ssh만 해도 되겠지만 로컬에서의 개발도 생각하고 있다면 HTTP도 추가하는 것이 좋다.

     

    4. 스토리지 구성

    스토리지 라고 하는 것은 쉽게 말해 우리가 빌린 EC2 인스턴스 컴퓨터의 사양을 말한다.

    만약 프리티어를 사용하고 있다면 현재는 30GB까지 무료이므로 30으로 수정해도 무방하다.

     

    ✅ Ubuntu 환경에서의 Nginx

    1. Ubuntu 환경에서 Nginx 설치하기

    모든 명령어를 다 외울 필요는 없어보인다. 사용하다가 외워지면 좋지만 나는 노션 같은 곳에 적어놓고 사용하고 있다.

    우선 EC2를 연결하게 되면 Ubuntu 화면이 보인다. 그렇다면 우선 apt를 최신화 하자.

    apt는 쉽게 말해 npm이나 gradle 같은 것이라고 보면 된다.

    $ sudo apt update

     

    2. Nginx 설치에 필요한 라이브러리 설치

    $ sudo apt install curl gnupg2 ca-certificates lsb-release ubuntu-keyring
    
    $ curl https://nginx.org/keys/nginx_signing.key | gpg --dearmor \
        | sudo tee /usr/share/keyrings/nginx-archive-keyring.gpg >/dev/null
    $ gpg --dry-run --quiet --no-keyring --import --import-options import-show /usr/share/keyrings/nginx-archive-keyring.gpg
    $ echo "deb [signed-by=/usr/share/keyrings/nginx-archive-keyring.gpg] \
    http://nginx.org/packages/ubuntu `lsb_release -cs` nginx" \
        | sudo tee /etc/apt/sources.list.d/nginx.list

     

    3. Nginx 설치

    $ sudo apt update
    
    $ sudo apt install nginx

     

    4. Nginx 시작

    sudo systemctl start nginx

    ✅ Nginx 설정 파일

    중요하게 봐야할 폴더는 두 가지가 있다.

    1.  /etc/nginx/nginx.conf 

    2.  /usr/share/nginx/html 

     

    1(default.conf)은 Nginx에서 가장 근본이 되는 루트 설정 파일이며, 워커 프로세스 개수, 로그 저장 위치 등 전역적으로 설정되어야 하는 것들이 포함되어있다.

    default.conf

    2는 Nginx를 막 설치한 경우, Nginx에 접근했을 때 볼 수 있는 html 파일이 들어있을 것이다.

     

     

    ✅ React 배포하기

    하나의 예시로 React 프로젝트를 배포해보자.

    위의 내용을 따라왔다면 EC2와 Nginx 기본 세팅이 완료 되어있을 것이다.

    그럼 우선 EC2에서  /usr/share/nginx 로 이동한다.

    그리고 github에 올라가 있는 완성된 프로젝트 하나를 git clone 한다.

     

    우리는 리액트를 배포할 예정이므로 install과 build를 해야하므로 Node가 필요하다.

    그래서 EC2에 Node를 설치할 것이다.

     

    Node.js 설치

    $ sudo apt-get update && \
    sudo apt-get install -y ca-certificates curl gnupg && \
    sudo mkdir -p /etc/apt/keyrings && \
    curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg && \
    NODE_MAJOR=20 && \
    echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list && \
    sudo apt-get update && \
    sudo apt-get install nodejs -y

     

    Node.js 설치가 잘 되었는지 확인

    $ node -v

     

    React 프로젝트 빌드

    $ sudo npm i
    $ sudo npm run build

    cd를 이용해서 프로젝트에 접근해 설치를 하고 빌드를 하면 된다.

    yarn을 사용했다면 npm install -g yarn으로 설치한 후 yarn으로 설치 및 빌드할 수도 있다.

     

    Nginx 설정 파일 수정

    이제 Nginx 설정 파일을 수정하자.

    /etc/nginx/conf.d 폴더로 접근해 default.conf를 여는데 이 때 수정을 위해서 sudo를 함께 입력한다

    $ sudo vim default.conf

     

    프로젝트 이름은 react-project라고 가정한다.

    리액트는 빌드를 하면 dist 파일이 나오는데 거기에 index.html이 들어있다.

    그래서 경로를 아래와 같이 설정한다.

    server {
        listen       80; 
        server_name  localhost;
    
        location / {
            root   /usr/share/nginx/react-project/dist;
            index  index.html;
        }
    
        error_page   500 502 503 504  /50x.html;
        
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    }

     

    Nginx 설정 파일 반영

    Nginx 설정이 끝났으면 반영을 시켜야하는데 그 전에 문법적 오류가 있는지 확인해보면 좋다.

    문법적 에러가 있는지 체크하는 명령어는 아래와 같다.

    $ sudo nginx -t

     

    이 명령어는 말 그대로 "문법적" 에러가 있는지 확인하는 것이다.

    다시 말해, index.html 인데 idx.ht 라고 잘못 적었다고 해서 에러를 출력하진 않는다.

    다만 마지막에 붙이는 세미콜론(;)이 없는 등의 경우에만 에러를 보여줄 것이다.

     

    에러가 없다면 리로드를 시키자

    $ sudo nginx -s reload

     

    웹 페이지 접속해서 반영된 것 확인하기

     http://{EC2 IP 주소} 를 이용해서 제대로 잘 반영되었는지 확인 할 수 있다.

    반응형
Designed by Tistory.