EC2에 내 프로젝트 연결하기

어찌저찌 블로그 보면서 처음으로 EC2에 내 프로젝트를 띄운 감격을 느낀지 하루도 지나지 않아..
인스턴스 종료와 중지의 차이를 몰랐던 나는 ssh 연결이 잘 안된다고 인스턴스를 종료해버리고만다..
(대충 비유하면 인스턴스 중지 = 컴퓨터 종료, 인스턴스 종료 = 컴퓨터 제거)
전날에 다양한 블로그와 친구들의 도움을 받아 성공했으니 그 과정을 생각나는대로 따라가면서 블로그에 정리해보기로 한다.
 

EC2 생성 (난 우분투로 했음)

링크 보고 따라하세요

[배포] AWS를 통한 배포 방법 알아보기(인스턴스 생성과 연결)

 

ssh 연결

아마존 EC2 인스턴스에서 잘 설명되어있는데 다양한 블로그에도 잘 정리되어있음!! 찾아보셔요 한번
 
 

필요한 모듈 설치

sudo apt update

nodejs 설치

sudo apt install nodejs

npm 설치

sudo apt install npm

 
nginx 설치

sudo apt install nginx

 
 
 

내 프로젝트 가져오기

/home에 git clone으로 내 프로젝트 clone

git clone ~~~

.env 파일 생성 및 내 프로젝트에서 복붙

sudo vim .env

 
의존성 모듈 설치

sudo npm i

 
 
nginx 환경설정
https://velog.io/@ejung803/AWS-EC2-%EC%84%9C%EB%B2%84-%EC%83%9D%EC%84%B1-nginx-%EC%84%A4%EC%A0%95
 
 
Nginx의 기본 설정을 하기 위해 기본 디렉토리를 수정해준다.

sudo vi /etc/nginx/nginx.conf

여기서 server 블럭이 있으면 주석처리하고, 아래 코드대로 해준다

//기존 있는 코드를 찾아서
include /etc/nginx/conf.d/*.conf;
//아래에 이 코드를 추가해준다
include /etc/nginx/sites-enabled/*.conf;

 
/etc/nginx 폴더에 sites-available와 sites-enabled가 없으면 만들어준다

sudo mkdir /etc/nginx/sites-available
sudo mkdir /etc/nginx/sites-enabled

 
sites-available 폴더 안에 새로운 설정 파일을 생성한다. 나는 내 프로젝트와 같은 이름으로 설정!

sudo vi /etc/nginx/sites-available/FunctionConverter.conf

server {
  listen 80;
  location / {
    root /home/24-1-webclient/build; //build파일의 위치를 찾아넣음
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  
  location /api { //내 서버의 엔드포인트
			    //내가 사용하는 port로 proxy-pass 설정
        		proxy_pass http://localhost:8080; 
          		// 위의 proxy_pass만 설정해도 지금 당면한 문제는 해결 가능하지만
           		// 참고할만한 설정을 추가해본다.
                proxy_http_version 1.1;
       	        proxy_set_header Upgrade $http_upgrade;
         	    proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }

}

 
sites-enabled > symlink 생성

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

 
Nginx 설정 테스트

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 시작

sudo systemctl start nginx

//또는

sudo service nginx restart

nginx 실행중 상태 확인

sudo service nginx status

정상적으로 작동중이라고 나올 것입니다
 
 
 

((중요)) 백엔드 서버도 함께 실행시켜야 api가 작동됨!

위 처럼 하면 프론트 화면은 정상적으로 나오지만 api 요청이 보내지지 않는다.
당연히 프로젝트를 저장해둔 폴더 /home/24-1-webclient로 이동하여 서버를 킨 다음부터는 잘 될것임!!
(이거 몰라서 한 10분 날린듯ㅠ)


마지막으로 뜬금없이 연락해도 이것저것 도와준 친구들에게 매우매우 감사❤️😘

---

(참고)nginx 명령어

https://jjeongil.tistory.com/1832

Linux : Nginx 시작, 중지, 재시작 방법, 예제, 명령어

CORS 문제 발생 시 nginx측 해결법

https://velog.io/@seonja/TIL-EC2%EC%97%90%EC%84%9C-%EC%9A%B4%EC%98%81%EB%90%98%EB%8A%94-%EC%84%9C%EB%B2%84%EC%99%80-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%ED%86%B5%EC%8B%A0%EC%97%90%EC%84%9C-405%EC%97%90%EB%9F%AC-%EB%B0%9C%EC%83%9Dfeat.-nginx-config

[TIL] EC2에서 운영되는 서버와 클라이언트 통신에서 405에러 발생(feat. nginx config)