M1 Mac에서 정적파일을 Nginx로 배포해보자 (ubuntu 환경)

이게 뭐라고 엄청 오래 걸렸다..

아무래도 배경 지식이 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 경로가 잘못되었을 가능성이 있다. 잘 확인해보자. (나도 여기서 오래 걸렸다..ㅠ)

 

 

 

 

 

 

 

 

참고

 

여러 분들의 포스팅을 참고했는데, 제일 많이 도움되었던 분의 링크를 남겨놓겠다! (설명 엄청 자세히 해주셔서..정말 감사합니당..)

 

https://velog.io/@choi-ju12g/Photorage-3.-React-Spring-%EC%9D%84-AWS-EC2-Nginx%EB%A1%9C-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B01

[Photorage] 3. React + Spring 을 AWS EC2 Nginx로 배포하기