2022 Junction Asia - AWS 서버 설정 기록
0. 구조
프론트는 React, 백은 Node.js, 서버는 AWS EC2
AWS 서버에 대해서
Amazon Elastic Compute Cloud(Amazon EC2)는 Amazon Web Services(AWS) 클라우드에서 확장 가능 컴퓨팅 용량을 제공합니다. Amazon EC2를 사용하면 하드웨어에 선 투자할 필요가 없어 더 빠르게 애플리케이션을 개발하고 배포할 수 있습니다.
EC2는 AWS에서 제공하는 클라우드 컴퓨팅 서비스다.이 서비스를 통해서 아마존이 각 세계에 구축한 데이터 센터의 서버용 컴퓨터들의 자원을 원격으로 사용할 수 있다. 쉽게 말해, 아마존으로부터 한 대의 컴퓨터를 임대하는 것이다. AWS가 제공하는 URL(Public DNS)를 통해 이 컴퓨터에 접근할 수 있다.
EC2의 장점은 다음과 같다.
- 용량을 늘리거나 줄일 수 있다. (탄력성)
- 사용한 만큼 지불하므로 저렴하다.
- 사용자가 인스턴스를 완전히 제어할 수 있다.
- 보안 및 네트워크 구성, 스토리지 관리 효과적이다.
그렇다면, 인스턴스를 생성하여 AWS가 제공하는 컴퓨터를 임대해서 서버로 사용할꺼임 우리는!!!
→ EC2 서버 + nginx 로 배포
nginx 사용의 이유 : Nginx를 앞단에 둠으로써 Express가 사용하는 실제 포트를 숨기고 Nginx의 80포트를 통해 Reverse Proxying 을 함으로써 보안 이슈를 방지할수도 있고 Nginx의 우수한 기능을 활용할 수 있음
websocket - socket.io 사용
1. AWS EC2 인스턴스 생성
서비스 → EC2 추가 → … 진행
키페어 다운로드 필수 !
키 페어 설정해야함
- 프라이빗 키(.pem)를 보안된 위치인 .ssh 하위 디렉터리에 저장
mv ~/Downloads/MyKeyPair.pem ~/.ssh/MyKeyPair.pem- 프라이빗 키(.pem)의 권한 설정
chmod 400 ~/.ssh/MyKeyPair.pem연결 누르고 여기서 위에 있는 SSH 클라이언트 들어가기
ssh 접속
ssh -i [프라이빗 키(.pem)경로] [AMI의 사용자 이름]@[인스턴스의 퍼블릭 DNS]
root 권한 전환
먼저, root 권한을 가지고 설치하여야 하기 때문에 root 권한으로 전환한다.
sudo su2. Linux 인스턴스에서 Node.js 설정하기
1 ) nvm 설치
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bashnvm을 사용하면 여러 버전의 Node.js를 설치할 수 있고 여러 버전 간을 전환할 수 있다.
2 ) nvm 활성화
. ~/.nvm/nvm.sh3 ) 사용하려는 Node.js의 최신 버전을 설치
nvm install --ltsNode.js 의 최신 LTS 릴리스가 설치되며, npm(노드 패키지 관리자)도 설치되므로 필요에 따라 추가 모듈을 설치 가능
4 ) Node.js가 올바르게 실행되는지 테스트
node -e "console.log('Running Node.js ' + process.version)"실행 중인 Node.js의 버전을 보여 주는 메시지 표시되는데,
이렇게 떠야함 → Running Node.js *VERSION*
5 ) pm2 설치
npm install -g pm26 ) git 설치
sudo yum update # -> 초기에 package 들을 update 해준다.
sudo yum install git3. 로컬에서 빌드 → git clone 해서 백엔드 코드, 프론트엔드 코드 받아오기
git clone [클론할 깃 주소]근데 클론 전에 !!!!
-
주의 : 프론트에서 IP 설정하고 빌드하기
-
여기서 가운데 위에 있는 퍼블릭 IPv4 주소로 아래와 같이 프론트에서 설정하고 빌드해야함
-
주의 : 그리고 이 빌드한걸 깃에 올려야함 + 그리고 서버에서 이걸 클론해와야함
-
즉 로컬에서 빌드 → 깃 푸시 → EC2 서버에서 그걸 깃 클론
왜냐하면 나만 그런지 모르겠는데 서버에서 npm run build 진행 시 build가 제대로 이루어지지 않았다 (fatal error뜸)
그래서 빌드까지 한걸 깃에 올려놓고 그걸 클론해오면 된다.
빌드한 파일 우리만의 폴더에 옮겨놓기 ! (nginx 설정에서 사용하기 때문)
mkdir /var/www/폴더이름
cp -r build/* /var/www/폴더이름/ # <- (빌드 파일 해당 폴더에 복사하기)# 위에 저 mkdir /var/www/폴더이름 이 안먹히면 직접 하나하나 이동해서 생성
cd /var
mkdir www
cd /www
mkdir 폴더이름4. nginx 설정
- nginx 다운
sudo yum install nginx # Amazon Linux 1 환경
sudo amazon-linux-extras install nginx1.12 # Amazon Linux 2 환경- nginx 설정 파일 수정하러 이동
cd /etc/nginx/기본적으로 nginx 관련된건 다 /etc/nginx 안에 다 들어있음
nginx.conf 수정
- 지금은 앞서 말한 대로 sites-enabled 디렉토리에 따로 설정을 만들어줄 것이므로, server 블럭 행들은 모두 주석 처리(행 앞에 #) 하도록 한다.
- 그리고 server 블럭 바로 위에 아래와 같이
include /etc/nginx/sites-enabled/*.conf;를 추가함으로써sites-enabled하위의 설정 파일들을 포함하도록 한다.
...
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*.conf; (✨ 코드 추가) <- 이걸 추가
이거 밑에는 이제 다 주석처리 !! (지워도 됨)
# server {
# listen 80 default_server;
# listen [::]:80 default_server;
# server_name _;
# root /usr/share/nginx/html;
# Load configuration files for the default server block.
# include /etc/nginx/default.d/*.conf;
# location / {
# }
# error_page 404 /404.html;
# location = /40x.html {
# }
# error_page 500 502 503 504 /50x.html;
# location = /50x.html {
# }
# }
...sites-available, sites-enabled 설정
- 일반적인 방식은 sites-available 디렉토리에 필요한 파일들을 작성한 후 이들과 연결되는 symbolic link(symlink)를 sites-enabled에 추가하는 것이다.
- 때문에 /etc/nginx 내부에 두 디렉토리를 모두 생성해 준다. 그리고 sites-available 내에 원하는 이름으로 설정 파일을 생성해 열도록 한다.
sudo mkdir /etc/nginx/sites-available
sudo mkdir /etc/nginx/sites-enabled
sudo vi /etc/nginx/sites-available/#####.conf→ ##### 안에 우리꺼 이름 만들어서 넣으면됨
여기까지의 파일 경로 및 구조
/etc/nginx/ 안에 → sites-available 이랑 sites-enabled 존재
현재 상태는 sites-available 안에 우리만의 설정 파일인 #####.conf 존재
sites-enabled 는 비어있음 ! (여기에 심볼릭 링크가 들어갈꺼임)
#####.conf 파일은 아래와 같이 입력
server {
listen 80;
root /var/www/폴더이름;
server_name _;
location ~* \.io {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy false;
proxy_pass http://localhost:3000;
proxy_redirect off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}- 여기 root 경로 == build 파일 경로 ! (위에서 옮겨놨던)
sites-enabled > symlink 생성 및 Nginx 설정 테스트
sudo ln -s /etc/nginx/sites-available/어쩌구.conf /etc/nginx/sites-enabled/어쩌구.conf
sudo nginx -tnginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful- 위와 같은 내용이 출력되면 설정의 문법이 정상적이라는 것이다.
5. nginx 가동
sudo systemctl start nginx
아니면
sudo service nginx restart
하고 만약 500 Internal Server Error가 발생한다면, 권한 업데이트 해주기
chmod 711 /home/ec2-user프론트 작업 끝 !
6. 백엔드 서버 시작하기
package.json의 pm2 에 대한 설정
백엔드 서버 깃 클론해와서 → 해당 폴더로 이동 → pm2 시작
npm run pm2:single
백 작업 끝 !
7. 접속
우리의 퍼블릭 IP 주소로 접속되면 성공 !!!
참고 자료 정리
자습서: Amazon EC2 인스턴스에서 Node.js 설정
Ubuntu 18.04.5 LTS 서버에 React(리액트)를 Nginx에 배포하기
[Nginx] react + express + socket.io 프로젝트 배포하기
[AWS] EC2에 React + Node.js 앱 배포하기! (1) - AWS EC2 인스턴스 생성
[AWS] EC2에 React + Node.js 앱 배포하기! (2) - Nginx를 사용한 React 배포
추가로 해볼거 - ALB 설정
