순서대로 진행하는 AWS 웹 배포하기(ubuntu)

완전 배끼기보다는

흐름만 훑어보는 게 좋을 듯 하다.

## 1.빌드

 

npm run build(빌드시 백앤드 서버는 켜있어야 한다!!)

보통 github에서 push하면 cicd에서 관리해서 에러 찾아줌(빌드 테스트)

파일 1메가 넘어가면 react.lazy? 등이용해서 코드스플리팅

어떤게 실질적으로 용량이 큰지 알기 위해서는

npm i @next/bundle-analyzer

gzip압축을 하면 용량 줄어듬

위에건 next.config.js에서 수정하고

package.json수정하기 위해서 (배포모드로 변경) --> 윈도우에선 cross-env까지 설치한 다음에 build명령어에 gogo

tree shaking 검색하여 줄이는 방법 찾는다.

immer는 익스플로어에서 실행안됨 따라서 util/produce에 따로 생성 es5

 

## 2. AWS 서비스 시작하기

 

aws홈페이지 들어가서 서울로 바꾸기

**인스턴스 구성할때 모니터링 추가안함(실무에선 모니터링 추가!!!)**

보안: http, https 허용해주기

80, 443 허용

 

SSH는 집 아이피를 적어둠

**보안그룹 설정 내 아이피 등록?**

 

인스턴스 백앤드 프론트앤드 둘다 만든다!(기존 상태로 인스턴스 생성)

 

**인스턴트 켜놓으면 돈 나가므로 중지나 꺼버리거나 하는 걸 잘 해서 비용을 조금 나가게 한다.(월 3만원정도)**

 

**git시작 및 aws 연결**

1. 레포지토리 홈에서 만들고

2. 깃 ignore

3. git init

4. git remote add origin 주소

5. 푸쉬한 다음에

 

6. AWS > 연결버튼 > 주소복사 ssh~~ > cmd 루트폴더에 붙여넣기 엔터

           (우분투로 이동)

7. git clone https://github.com/sehwanjun/nextpus(내 깃헙주소)

8. **.env 파일만들기**

mysql 가서 vim .env

a 누르면 파일편집 가능

편집후 esc누르고 : 누른후 wq w는 저장 q는 끄기

저장한 파일내용 보기: cat .env

 

비밀번호 변경(root에러발생시)

mysql -uroot -p 드러가 서

Alter USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'wjstpghks2!';

 

 

 

## 코드수정시(이건 root폴더에서)

 

git clone 내깃주소(처음에)

git pull(변경사항이 있을 경우 git push했던거 가져오기

 

## 노드설치 확인, if 노드설치 안했다면

cd nextpus 로 폴더이동

cd front로 이동 >

9. (처음) sudo apt-get update

10. sudo apt-get install -y build-essential   --> bcrypt, 이미지 리사이징하는 sharp 등 위함

~~11. sudo apt-get install curl~~이미 설치되어있음

11. curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -

12. sudo apt-get install -y nodejs

13. node -v, npm -v로 버전확인

14. npm i

 

15. server폴더도 마찬가지로 실행 (server에는 mysql도 설치)

16. client에서 npm run build --> 이때 메모리가 꽉차면(최대 1gb) 큰걸로 확대해야 할 것

 

 

## 소스코드 바꼈을 경우

1. npm run build를 해준다.(프론트앤드일 경우)

2. cd front>git commit -am "change"

3. git push origin master

4. 우분투 front서버에서 git pull

 

5. 만약 새로운 모듈 설치했을 경우 npm i까지 해줘야 한다.

 

 

AWS > 연결버튼 > 주소복사 ssh~~ > cmd 루트폴더에 붙여넣기 엔터

우분투로 이동

git clone 내 깃헙주소 --> 처음에만

 

cd nextpus 로 폴더이동

cd front로 이동 > git pull(변경사항이 있을 경우 git push했던거 가져오기

 

 

노드설치

 

.env도 넣어줘야함

vim .env  -->파일수정

a 또는 i로 코드수정

코드수정 후 esc

:wq 누르기

쓴내용 확인: cat .env

 

 

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '비밀번호'

 

## MySQL 접속

sudo su

mysql -uroot -p  --> 둘다입력해야 접속가능

 

sudo npm start && sudo npx pm2 monit

로그보기 npx pm2 logs

에러로그보기 npx pm2 logs --error

죽이기: sudo npx pm2 kill

재실행: sudo npx pm2 reload all

 

## DB 만들기

1. 맨처음 작업

           npx sequelize db:create

 

           **DB보는법**

           mysql -uroot -p

           비번입력 후 DB접속

           use ChooNo;

           show tables;

 

           **DB 제거하기(후에 다시접속 후 만들어야 함)**

           mysql 접속상태에서

           DROP DATABASE `ChooNo` (대문자여서) 백틱으로

           나갔다가 다시 mysql 접속후(아래)

          

**2. DB 접속하기(사용하기)**

           1. npm start && npx pm2 monit 후에 접속 한 다음

           2. mysql 접속(mysql -uroot -p)

           3. use 테이블명(use ChooNo;)

           4. 테이블 확인(show tables;)

 

 

**포트 바꿔주기**

vim app.js

3065를 80으로 바꿔주기(sagas/index?, app.js)

 

 

  ## frontEnd 배포

sagas/index

defaults.baseURL을 aws의

port 변경 후에 다시 깃풀 한다음

config/config 파일 aws포트로 (백) 변경,

package.json 80으로 변경

npm run build

백앤드 app.js에 front aws 주소 넣어줌

깃허브로 보냄

일단 백앤드 들어와서 git pull & reload또는 켜기

sudo npx pm2 start npm -- start

sudo npx pm2 monit

프론트앤드로 들어가보기(웹사이트)

 

 

 

 

## 기타사항(에러고치기 위한 노력)

**1. node 재설치(버전변경)**

삭제

$sudo apt-get --purge remove node

$sudo apt-get --purge remove nodejs

설치

**nodejs 8 setup**

$curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash

**nodejs setup**

$sudo apt-get install -y nodejs

 

**2. aborting 뜨면 (에러) git reset --hard 침**

3. missing credentials -> S3 잘 안되면

## 현황보기 등 명령어

 

npx pm2 monit하면 현황 볼수 있음

sudo npm start && sudo npx pm2 monit 백앤드 켜기(반드시 sudo 붙여준다)

npx pm2 kill 끄기

에러로그 보는 법: npx pm2 logs --error

sudo npx pm2 list  --> 리스트 다시 볼 수 있음

sudo npx pm2 reload all --> 재시작

sudo su하면 root로 감(여기서 걍 명령어 입력해도 됨)

**※우분투 명령어**

ls 현재 폴더보기(dir)

ls-al 자세히 보기

pwd 현재 내 상태보기(경로)

 

nginx

sudo systemctl restart nginx

 

## lambda 관련

1. local에서 lambda 설치 후 폴더 및 파일 생성

2. 람다폴더에서 git push 보냄

3. 백앤드에서 git pull

4. cd ../lambda

5. sudo su --> sudo npm i (우분투에서 람다설치)

6. sudo apt install zip (Zip 설치)

7. exit 후 lambda$ 폴더에서 **  sudo zip -r aws-upload.zip ./*  ** 묶어주기

8. ls로 aws-upload.zip생성 확인

9. sudo curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip

10. ls로 awscliv2.zip 확인

11. sudo unzip awscliv2.zip

12. sudo ./aws/install

13. aws configure

14. .env에서 키랑 비번찾아 넣기

15. ap-northeast-2, format: json

16. aws s3 cp "aws-upload.zip" s3://nextpus

17. aws사이트 lamda로가서 함수생성

18. 함수코드 - 작업 업로드 amazon s3 업로드

19. https://nextpus.s3.ap-northeast-2.amazonaws.com/aws-upload.zip

20. 트리거 S3 ⇒ 접두사 original --> original 폴더내에 파일이 들어가면 변형-->thumb폴더에 넣어준다.

멀터로 s3업로드 s3가 람다로트리거 -->람다함수호출 --> thumb폴더로 넣어둠(즉, db에는 thumb으로 넣어주고 그걸빼서(json 200에서 프론트앤드에서 thumb로 해줘야 보인다)

즉, front에서는 thumb폴더에 있는걸 받아오면 됨

작업: router --> (location.replace(~~~)

 

변형시

21. git pull한다음

22. sudo rm aws-upload.zip

23. sudo rm -rf aws로 파일 삭제

24.  7번, 16번, 사이트에서 업로드

 

nginx 관련설치

sudo su

sudo lsof -i tcp:80

(나오는 값이 없어야 함, 나온다면 sudo kill -9 프로세스아이디(PID))

sudo apt-get install -y nginx

vim /etc/nginx/nginx.conf

(여기서 http 안에 server에 여러분 도메인(server_name)과 프록시 포트(3060같은 것)로 작성)

:wq!로 저장

sudo systemctl start nginx (정상 실행이면 바로 아무 말 없이 실행)

sudo lsof -i tcp:80 (nginx가 보여야 함)

sudo systemctl status nginx (오류검토)

 

Uncaught (in promise) TypeError: window.gtag is not a function

 

**도메인 관련**

wget https://dl.eff.org/certbot-auto            // certbot-auto 설치

chmod a+x certbot-auto                   //실행권한 부여

./certbot-auto

sudo certbot --nginx

여러분의 도메인이 보이면 1번 누르면 됨

나중에 갱신하려면 certbot-auto renew (자동화하려면 crontab 명령어 알아보기)

 

명령어 모음

// 에러검토: tail /var/log/nginx/error.log

// 시작 $ sudo service nginx start $ sudo systemctl start nginx $ sudo /etc/init.d/nginx start

// 재시작 $ sudo service nginx restart $ sudo systemctl restart nginx $ sudo /etc/init.d/nginx restart

// 중지 $ sudo service nginx stop $ sudo systemctl stop nginx $ sudo /etc/init.d/nginx stop

// 상태 $ sudo service nginx status $ sudo systemctl status nginx

// 설정 reload $ sudo service nginx reload $ sudo systemctl reload nginx $ sudo nginx -s reload

// 설정파일 문법 체크 $ sudo nginx -t

 

 

백앤드 서버 시작: sudo npm start

 

깃헙 올리면 cicd가 검토

AWS

빌드 후 용량줄일땐(tree shaking 검색)