나만의 무기를 갖기 : 배포(2) Linux 설정

1. 인스턴스 SSH 연결

작업의 편의를 위해 Amazon EC2에서 구매한 Linux 인스턴스를 Visual Studio에 SSH를 이용하여 연결한다.

# .ssh 디렉토리로 키페어 이동
mv ~/[저장 위치]/[키페어 이름.pem] ~/.ssh/[키페어 이름.pem]

# 키페어 권한 변경
chmod 400 ~/.ssh/[키페어 이름.pem]

# DNS 연결
ssh -i [키페어 경로] [AMI의 사용자 이름](ex: ec2-user)@[인스턴스의 퍼블릭 DNS(ex: 3.35.142.147)]

 

2. 필요한 패키지 설치 

Linux 종류에 따라, 명령어가 다를 수 있다. 아래는 Amazon Linux2를 적용한 경우이다.

sudo yum update

# git 설치
sudo yum install git

# nginx 설치
sudo amazon-linux-extras install nginx1.12

# node 및 yarn 설치
source ~/.bashrc
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
. ~/.nvm/nvm.sh
nvm install --lts
curl -o- -L https://yarnpkg.com/install.sh | bash

3. 프로젝트 Clone

git을 무사히 설치하였다면, git clone을 이용하여 프로젝트를 Linux로 clone해온다.

git clone [github 프로젝트 주소]

4. Nginx 설정

Nginx와 관련된 설정 파일들은 /etc 하위에 존재한다. sudo 권한을 이용해서 파일 생성과 수정을 진행할 수 있다. 

아래 명령을 통해 파일을 확인하면 여러 가지 설정 사항을 확인할 수 있다.

sudo vi /etc/nginx/nginx.conf

아래는 nginx.conf 파일 내부의 내용이다. 여기서 바로 React 프로젝트의 build 파일을 연결할 수도, sites-enabled 디렉토리를 생성하여

해당 디렉토리 내부에 파일을 생성하고 이를 연결해줄 수도 있다. 아래는 sites-enabled 디렉토리를 생성한 경우이다. nginx.conf 파일의

http { } 블럭 내부에 include 라인을 추가하여 sites-enabled 하위의 설정 파일들을 포함하도록 하였고, server { } 블럭의 행들을 모두

주석 처리하였다. 

...

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 {
#    }
#}

...

Nginx를 처음 설치하면, sites-enabled 디렉토리가 존재하지 않는다. 그러나 sites-enabled 디렉토리에 직접 설정 파일을 작성하지

않고, sites-available 디렉토리를 생성하여 필요한 파일들을 작성한 후 이들과 연결되는 symbolic link(symlink)를 sites-enabled에

추가하는 것이 일반적인 방식이다. 아래는 해당 방식을 따랐다.

sudo mkdir /etc/nginx/sites-available
sudo mkdir /etc/nginx/sites-enabled
sudo vi /etc/nginx/sites-available/[원하는 파일명.conf]

sites-available 디렉토리 conf 파일 안에는 설정 사항들을 작성하면 된다. 아래는 기본적인 http 포트 80에 대한 설정이다.

location / 는 IP 주소 혹은 도메인의 뒷 부분 URI에 대응된다. 예를 들어, moba-shop.link/mainpage라고 한다면 link 이후의 내용에

해당한다. root에는 git을 통해 clone한 프로젝트의 내부 build 디렉토리 경로를 입력하면 된다.

server {
  listen 80;
  location / {
    root /home/ec2-user/[경로(ex: MOBA-Front)]/[경로(ex: client)]/build;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}

sites-available 디렉토리의 symbolic link(symlink)를 sites-enabled에 추가하고, 연결 테스트를 시도해볼 수 있다.

sudo ln -s /etc/nginx/sites-available/[원하는 파일명.conf] /etc/nginx/sites-enabled/[원하는 파일명.conf]
sudo nginx -t

/home/ec2-user까지의 경로 권한을 변경해주고 Nginx를 시작하면 실행된다.

chmod 711 /home/ec2-user
sudo systemctl start nginx

 

지금까지는 아주 기본적인 Nginx 연결 과정이며 https 연결과 서비스 별 구현 사항에 따라 추가적인 작업이 필요하다.