EC2에 배포하기

클라이언트 배포

1. git clone한 폴더로 이동

2. yarn or npm 사용하여 의존패키지 설치

3. ec2상에서 빌드하거나 로컬에서 yarn or npm build —prod 로 빌드 후 ec2에 전달한다. (scp 명령어 사용)

4. nginx 설치

   • sudo amazon-linux-extras install nginx1

5. nginx 설정파일 수정

   • /etc/nginx/nginx.conf를 수정해도 되지만, 다른 방법을 사용

   1. /etc/nginx/sites-available , /etc/nginx/sites-enabled 폴더 생성

   2. /etc/nginx/sites-available에 42checkin.conf 파일 생성

      server {
          listen 80;
          location / {
              root {build 디렉토리의 절대 경로.         	예를 들어 /home/ec2-user/프로젝트폴더명/build};
              index index.html index.htm;
              try_files $uri $uri/ /index.html;
          }
      }
      

   3. /etc/nginx/sites-available에 42checkin.conf 수정

      server {
      	listen 80;
      	location / {
      		root {클라이언트 빌드파일 위치};
      		index index.html index.htm;
      		try_files $uri $uri/ /index.html;
      	}
      	location ~ ^/api/(.*) {
      		proxy_pass http://127.0.0.1:3000;
      	}
      }
      

      • 접속시 클라이언트를 보여주기 위해 /로 시작하는 부분들은 index.html을 바라보게 함
      • 클라이언트에서 api를 호출할 때 다른 url이 아닌 /api/로 시작하는 url로 호출하고 있어 이 부분을 처리하기 위해 /api/로 시작하는 요청을 프록시를 사용해 api서버로 전달함
        • 로컬에서는 이 부분을 setupProxy()로 해결했었음

   4. /etc/nginx/nginx.conf 수정

      1. server {... 부분 주석처리
      2. 바로 위에 include /etc/nginx/sites-enabled/42checkin.conf;추가

6. sites-enabled에 symbolic link를 생성

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

7. 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
   

8. 실행

   sudo systemctl start nginx

9. 접속시 500 status code

   500 Internal Server Error 발생시 권한 문제임

   • 아까 42checkin.conf 파일에서 root 로 지정한 폴더를 확인한다.
   • 나같은 경우는 /home/{유저명} 디렉토리 바로 밑에 빌드폴더가 있었고 ls -al 로 확인햇을 때, 실행권한이 700이였다. 그 chmod 실행가능한 권한을 부여하여 해결했다.
     • chmod 711 /home/{유저명}

서버 배포

1. git clone한 폴더로 이동
2. yarn or npm 사용하여 의존패키지 설치
3. yarn or npm build 로 빌드 후 ec2에 전달한다. (scp 명령어 사용)
4. pm2 명령어를 사용해 실행시킨다.
   • pm2 start ./dist/index.js --name server
   • 유용한 pm2 명령어들
     • pm2 ps
       • pm2로 실행된 서버들을 다음과 같은 형태로 보여준다.

        ┌─────┬───────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐
        │ id  │ name      │ namespace   │ version │ mode    │ pid      │ uptime │ ↺    │ status    │ cpu      │ mem      │ user     │ watching │
        ├─────┼───────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
        │ 0   │ server    │ default     │ 0.1.0   │ fork    │ 5305     │ 46h    │ 0    │ online    │ 0%       │ 57.7mb   │ yurlee   │ disabled │
        └─────┴───────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘
       

     • pm2 stop {id}
       • 서버를 중지한다.
     • pm2 delete {id}
       • pm2로 실행된 서버목록에서 해당 서버를 삭제한다.