[정리]pre-project1

fastify로 서버 만들기

fastify generate .

/* package.json dependencies
    "fastify": "^3.0.0",
    "@fastify/cors": "7.0.0",
    "@fastify/mysql": "3.0.0",
    "@fastify-autoload": "^4.0.1",
    "fastify-cli": "^2.15.0",
    "fastify-plugin": "^3.0.0",
    "@fastify-sensible": "^4.1.0"
    */
npm i
// plugins/에 cors.js 추가, routes에 CRUD 추가 가능
npm run dev

react-app으로 클라이언트 만들기

create-react-app .
// REACT-APP-ENDPOINT 수정하기
npm run build

배포를 상정하고 클라이언트를 만드므로 빌드 단계에서 DNS 주소를 입력해둔다.

RDS 만들고, WAS에 연결하기

공식문서

원하는 api 요청에 원하는 로직 수행가능. 예를들어 DB 내용을 조회 후 출력하는 것.

민감한 정보이므로, dotenv를 사용하여 환경변수 등록해주기

배포를 상정하고 서버를 만드므로, fastify-cli를 참고하여 앱이 어떤 주소를 받을지 미리 정해준다.

// package.json
"start": "fastify start -l info -a 0.0.0.0 app.js"

node.js 앱 도커라이징

// Dockerfile
FROM node:16-alpine

# 앱 디렉터리 생성
WORKDIR /usr/src/app

# 앱 소스 추가
COPY . .

RUN npm install
# 프로덕션을 위한 코드를 빌드하는 경우
# RUN npm ci --only=production

EXPOSE 3000
CMD [ "npm", "run", "dev" ]

docker build . -t <tagname>
docker run -p <host-port>:<container-port> <image-name>

node.js 공식문서

m1 도커 이슈

--platform linux/amd64

프론트엔드 Code Pipe Line을 활용한 배포자동화

ECR 이미지 등록 -> Code build -> S3 배포

build spec 작성시 주의할 것. artifacts.baserepository에 build를 적어줘야 s3에 잘 전달됨.

백엔드 GitHubAction을 활용한 배포자동화

ECR 이미지 등록
secret에 DB관련 인증 정보를 암호화
AWS.yaml 파일에서 secret의 인증정보를 가져와서 배포자동화를 함. github에 어떤 민감한 정보도 올라가서는 안됨!
ECS의 환경변수에 DB 인증정보를 입력한다면 githubAction을 돌리기 위한 Task Definition JSON파일에 담길 수 밖에 없고, 그것을 github에 올려야 Action이 작동하므로, 인증정보가 github에 올라갈 수 있다. 주의할 것!

CDN 적용하기

CloudFront 서비스를 활용하여 퍼블릭 액세스가 허용된 s3에 CDN을 적용한다.
Access Denied 에러 해결
Fail to contact the origin

간단히 배포만하면 끝이지만, 오류페이지 및 api 요청에 따른 것들도 나중에 설정해줘서 웹의 기능을 추가할 수 있다.

Route53에서 레코드 생성하여 원하는 DNS로 접속시 cloudfront로 접속할 수 있게 설정한다.

로드밸런서 적용하기

Route 53에서 api.masonjar.click 레코드를 추가한다.

로드밸런서가 https 연결을 받을 수 있도록 443포트를 리스닝과 보안그룹을 설정한다.

DNS Checker로 연결되었는지 더욱 빠르게 확인할 수 있다.

SAM을 이용한 서버리스앱 배포

저작자표시

어쩌다 개발자