이게 뭐라고 엄청 오래 걸렸다..
아무래도 배경 지식이 0이다 보니 ㅠㅠ 하라는 대로 해도 잘 안됐다..ㅠㅠ..
드디어 정적 페이지 배포에 성공해서.. 또 까먹기 전에 기록해본다
인스턴스 생성은 이전 글을 참고하면 된다.
https://beanie.tistory.com/228
1. ssh로 AWS EC2 서버에 접속
ssh -i./my_keypair.pem ubuntu@탄력IP주소
2. git 설치 및 프로젝트 클론
$ sudo apt update // 초기 package 업데이트
$ sudo apt install git // 깃 설치
$ git clone [url] // 프로젝트 코드 클론
3. Nginx 설치 및 설정
1) nginx 설치
$ sudo apt install nginx
2) nginx 설정
2-1. nginx.conf 파일 관리자 권한으로 열고 수정하기
$ cd /etc/nginx //경로 이동
$ ls //현재 경로에 존재하는 모든 파일 및 디렉토리 표시
$ ls 명령어를 사용해 nginx.conf 파일이 존재하는 것을 확인할 수 있다.
nginx.conf 파일 열기
$ sudo vi /etc/nginx/nginx.conf
nginx.conf
...
...
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*.conf; (코드 추가)
}
...
...
나의 경우 include /etc/nginx/sites-enabled/*; 라는 코드가 이미 존재해 있었다.
이를 include /etc/nginx/sites-enabled/*.conf; 로 변경해주었다!
참고로, vi 편집기를 사용하는 방법은 i 를 누르면 --INSERT-- 표시가 뜨면서 수정이 가능하고,
종료를 하고싶으면 esc 버튼을 누른 후 하단에 :wq를 입력 후 엔터를 누르면 된다.
2-2. sites-available, sites-enabled 설정
내가 참고한 블로그에 따르면 일반적인 방식은 sites-available 디렉토리에 필요한 파일들을 작성한 후 이들과 연결되는 symbolic link(symlink)를 sites-enabled에 추가하는 것이라고 한다.
때문에 /etc/nginx 경로에 두 디렉토리를 모두 생성해주어야 한다.
$ sudo mkdir /etc/nginx/ sites-enabled // sites-enabled 디렉토리 생성
$ sudo vi /etc/nginx/sites-available/OOO.conf //sites-available 내에 원하는 이름으로 설정 파일 생성하고, vi 편집기로 열기
/etc/nginx/sites-available 에 위치한 OOO.conf 파일을 열어보면, 처음엔 비어있는데 여기에 기본적인 설정을 해주면 된다.
server {
listen 80;
location / {
root /home/ubuntu/OOO; // OOO엔 아까 clone해 두었던 git 프로젝트 파일명
try_files $uri $uri/ /index.html;
}
}
나의 경우 위 처럼 설정해 주었다.
/home/ubuntu 경로인 이유는, 위에서 ubuntu 환경에서 깃 프로젝트를 클론했고, 그에 따른 저장 경로가 /home/ubuntu 이기 때문이다.
2-3. nginx 설정 파일을 /etc/nginx/sites-enabled/ 디렉토리로 심볼릭 링크 걸어주기
sudo ln -s /etc/nginx/sites-available/OOO.conf /etc/nginx/sites-enabled/OOO.conf
2-4. Nginx 설정 테스트
$ sudo nginx -t
위와 같이 뜨면 설정된 문법이 정상적이라는 뜻이다!
2-5. Nginx 동작 시키기
$ sudo systemctl start nginx
현재 도메인을 사두지 않았고.. http만 설정해두었기 때문에
http://탄력IP주소/ 로 접속하면
정상적으로 정적 파일이 잘 출력된다!
만약 잘 되지 않으면 설정파일에 오타가 있거나 root 경로가 잘못되었을 가능성이 있다. 잘 확인해보자. (나도 여기서 오래 걸렸다..ㅠ)
참고
여러 분들의 포스팅을 참고했는데, 제일 많이 도움되었던 분의 링크를 남겨놓겠다! (설명 엄청 자세히 해주셔서..정말 감사합니당..)
[Photorage] 3. React + Spring 을 AWS EC2 Nginx로 배포하기
지난 포스팅에서 프로젝트를 Vite로 만들고 스토리북까지 추가해봤다. 이번에는 리액트로 만들 웹을 AWS의 EC2 제품을 이용하여 배포하는 인프라를 구축 해보겠다. 글 제목이 React + Spring이라 헷갈
velog.io
'AWS' 카테고리의 다른 글
[M1 Mac] Nginx 이용해 프론트, 백엔드(Spring Boot 프로젝트) HTTPS 적용 (0) | 2024.03.19 |
---|---|
Mac M1 환경에서 AWS EC2 인스턴스에 MySQL 설치하기 (0) | 2024.02.26 |
M1 맥북에서 AWS EC2 인스턴스 생성 및 접속 하기 (프리 티어) (0) | 2024.02.26 |