Fuze) Next.ts + node.ts 배포 과정

AWS

- EC2생성

보안그룹 80, 443 포트를 전체로 열어놓기

ssh 22 포트는 접근 아이피 제한해놓기.

 

Next.js Front 배포 방법

 

 

- 의존성 설치

 

// ubuntu apt-get 업데이트 및 기본 패키지 설치

sudo apt-get update

sudo apt-get install build-essential

sudo apt-get curl

 

// node 설치 (https://github.com/nodesource/distributions 참고)

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

sudo apt-get install -y nodejs

 

// yarn 설치 (https://blkcoding.blogspot.com/2019/04/yarn-install-instead-of-cmdtest.html 참고)

sudo apt remove cmdtest

sudo apt remove yarn

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

sudo apt-get update && sudo apt-get install yarn

 

// global하게 필요한 패키지 설치

yarn global add webpack webpack-cli pm2 typescript

 

// DB 설치 (로컬에서 구성했을 경우) m.blog.naver.com/6116949/221992559683 참고

sudo apt update && sudo apt-get -y upgrade 

sudo apt-get install -y mariadb-server

mysql // 접근

set password for '이름'@'localhost'=password('비번');
FLUSH PRIVILEGES;  # 변경한 설정을 적용하기 위한 명령어

mysql -u 이름 -p // 접근

 

 

- nginx 설치 및 reverse-proxy 설정

sudo apt-get install nginx
nginx -v // 버전 확인

 

한 인스턴스 내부에 백, 프론트를 동시에 돌리고 있다면 다음과 같이 구성해주자.

이번 백엔드 엔드 포인트를 /api/{api_ver} 로 통일해서 /api로 접근하면 5000번 포트로 접근하도록 만들어주었다.

service nginx restart // 재시작
sudo nginx -t // 테스트

 

 

프론트에서는 fetching baseURL을 잡아두었다. 환경에 따라 별도로 구성하기로.

// .env.local
NEXT_PUBLIC_FETCH_BASEURL=http://localhost:5000/api/v1

// baseURL 형성
axios.defaults.baseURL = process.env.NEXT_PUBLIC_FETCH_BASEURL;

 

http://localhost:5000 이런 식이 아니라. https://fuzekorea.com/api/v1/.... 처럼 도메인으로 요청이 가야 한다.

 

 

- Cerbot을 이용한 https 접근 설정

darrengwon.tistory.com/547

certbot를 활용한 https 인증서 발급 및 환경 설정

certbot이 자동완성해주는 리다이렉트가 작동하지 않아서 

return 404; 를 제거하고 301로 리다이렉트 해줬습니다.

백엔드 세팅 과정

darrengwon.tistory.com/1273

더 나은 node.js 기반 server를 위한 아키텍쳐 + 팁들!

 

 

그 외 잡다한 사항들과 트러블 슈팅

1. Next.js에서의 환경 변수 관리

nextjs.org/docs/basic-features/environment-variables#test-environment-variables

 

.env.local을 사용하는데 dotenv패키지를 설치해줬다면 지워주자. 애초에 이런 패키지를 설치할 필요가 없다. 설치하면 에러만 남…

클라이언트에서 환경변수에 접근하기 위해서 NEXT_APP_ 접두사를 붙여서 접근 가능

CRA에서는 REACT_APP_ 을 붙이는데서 착안한 듯,  붙이지 않으면 서버 사이드에서만 접근 가능하다. 

 

해당 접두사를 붙이고 싶지 않고 접근하길 원한다면 next.config.js 부분을 수정해서 접근 가능하게 만들어 줄 수는 있지만, 권장하지 않는다. 클라이언트 노출시키고 싶으면 NEXT_APP_을 붙이고, 아니면 서버 사이드에서만 써라.

 

환경 변수는 빌드 타임에 고정되므로, 바꿨다면 다시 재 빌드해야 한다. 왜 안되는지 계속 고생 ㄴㄴ해

 

2. 미들웨어의 순서

DB 연결 => cors, logger등 각종 미들웨어 => 라우트 순으로 진행해야 한다.

제 멋대로 순서를 하다가는 왜 자꾸 CORS 관련 설정을 마쳤는데도 왜 cors 에러가 뜨는지 고생하게 된다.

 

3. typeorm 구성에서의 name 속성 문제

name을 설정하고 연결했더니 계속 Connection "default" was not found. 에러가 발생하더라.

typeorm을 기본적으로 name이 default인 설정을 찾아 연결을 시도한다.

multiple connection을 사용하고 싶을 때만 name을 지정하고, 하나만 사용할 때는 name을 지정하지 말자.

const connectionOptions: ConnectionOptions = {
  name: "fuze", // 이 녀석이 문제를 일으켰었다.
  type: 'mariadb',
  host: process.env.DB_ENDPOINT,
  port: Number(process.env.DB_PORT),
  username: process.env.DB_USERNAME,
  password: process.env.DB_PASSWORD,
  database: 'fuze', // 실제 db이름
  synchronize: env === 'development' ? true : false,
  logging: false,
  entities: [User],
};

 

4. CRA, Next 환경에서는 Enum, const Enum을 사용하지 말고 as cosnt를 사용하도록 합시다.

 

tree shaking의 관점에서 컴파일된 결과물을 보면

Enum은 너무 많고 (물론 사용 가능은 합니다! 빌드도 잘 되구요)

const Enum은 일반 const 변수처럼 처리되나 isolatedModules 옵션을 키게 되면 별반 차이가 없어지게 된다.

as const를 쓰세요. 용량도 적어지고, 좋습니다.

 

아래처럼 사용하면 됩니다.

export const Country = {
  US: 'us',
  CA: 'ca',
  AU: 'au',
  KR: 'kr',
};

export type COUNTRY = typeof Country[keyof typeof Country];

 

 

5. Nginx proxy 설정에서 발생하는 502 bad gateway

=> 원인을 살펴보니 pm2 watch 를 안 쓰고 서빙해서 계속 노드 서버가 껐다 켜졌다를 반복하고 있었더라.

 

우선 nginx가 기록한 로그를 확인해보자.

-f 옵션을 주어서 실시간으로 에러를 확인할 수 있다.

tail -f /var/log/nginx/error.log

 

[error] 470103#470103: *47 connect() failed (111: Connection refused) while connecting to upstream, client: xxx.xxx.xxx.xxx, server: fuzekorea.com, request: "POST /api/v1/auth/signup HTTP/1.1", upstream: "http://127.0.0.1:5000/api/v1/auth/signup", host: "fuzekorea.com", referrer: "https://fuzekorea.com/user/signup"

 

이럴리가 없어서 5000번 포트에 실제로 돌고 있나 확인해봤더니...

 

www.cyberciti.biz/faq/unix-linux-check-if-port-is-in-use-command/

$ sudo lsof -i -P -n
$ sudo lsof -i -P -n | grep LISTEN
$ doas lsof -i -P -n | grep LISTEN ### [OpenBSD] ###

 

확인해보니 백엔드가 안돌고 있었다.

확인해보니 pm2 watch 옵션을 안 껐었다. 끄고 난 후에 편안하게 서비스가 가능해졌다!

 

6. typeORM synchronize=false로 설정한 후 ER_NO_SUCH_TABLE 에러 문제 => migration

 

개발 단계야 뭐 synchronize 설정을 키면 자동으로 테이블을 생성해주지만, production 환경에서는 이런 짓을 하면, 기존 고객이나 정보들이 전부 삭제되고 제로 베이스에서 시작하고 새로 테이블을 만들 수 있기 때문에 절대로 true로 놓아서는 안된다.

 

그렇다면 수작업으로 CREATE TABLE ... 로 직접 테이블을 만들어야 하는가? 이는 현명한 짓이 아니다. 테이블이 몇개가 될 줄 알고...

그래서 마이그레이션하기로 했다.

 

본래 django에서도 migration해봐서 알겠지만, 데이터 스키마가 시행하여 현재 코드와 실제 DB 스키마를 sync해주는 역할을 한다. production 환경에서 DB 스키마에 수정사항이 생기면 migration해야 한다.

처음 synchronize를 끈 후 production에 올릴 때도 migration을 하면 된다.