들어가며
이번편에서는 배포에 대해서 알아보고자 합니다. 이전의 백엔드 배포편을 꼭 먼저 진행해주시길 바랍니다. 쿠팡이츠, Render로 백엔드 배포하기 프론트엔드 배포는 Netlify를 통해서 진행될 예정입니다. 그리고 이 역시 백엔드와 마찬가지로 원활한 진행을 위해서 GitHub 계정과 연동해서 회원가입해주시길 바랍니다.
Netlify로 배포하기
1. Add new site
2. Deploy with GitHub
3. 배포할 레포지토리 선택
배포할 레포지토리를 선택하면 아래처럼 나오게 될 것입니다. 그리고 하단의 배포를 눌러주시면 됩니다.
4. 주의할점
배포를 하면 오류가 발생합니다. 그런데 치명적인 오류가 아닌 이상 package.json에서 아래처럼 설정하면 무시하고 진행이 됩니다.
"build": "CI=false react-scripts build",5. TailwindCSS 프로덕션 빌드 설정
TailwindCSS 설정을 위해 package.json 파일에 tailwind:prodbuild 스크립트를 추가합니다. 이는 프로덕션 환경에서 사용되지 않는 CSS를 제거하여 최적화된 형태로 빌드하기 위함입니다.
"scripts": {
"tailwind:prodbuild":"NODE_ENV=production npm run tailwind:build",
"tailwind:build": "npx tailwindcss-cli@latest build -i src/styles/tailwind.css -o src/styles/styles.css",
"start": "npm run generate & npm run tailwind:build & react-scripts start",
"generate": "graphql-codegen --config codegen.yml",
"build": "CI=false react-scripts build",
"prebuild":"npm run tailwind:prodbuild",
"test": "react-scripts test",
"test:cov": "npm test -- --coverage --watchAll=false",
"eject": "react-scripts eject"
}각 스크립트의 역할
tailwind:build: 개발 환경에서 TailwindCSS를 빌드합니다.tailwind:prodbuild: 프로덕션 환경에서 TailwindCSS를 빌드하여 사용되지 않는 스타일을 제거합니다.prebuild:build스크립트가 실행되기 전에tailwind:prodbuild를 실행하여 최적화된 CSS 파일을 생성합니다.
6. Redirects 설정
Netlify에서 SPA(Single Page Application)로 배포할 때 라우팅 문제를 해결하기 위해 public/_redirects 파일을 생성하고 다음 내용을 추가합니다:
/* /index.html 200리디렉션에 관한 더 자세한 정보는 Netlify 리디렉션 문서에서 확인할 수 있습니다. 리디렉션 파일의 문법은 다음과 같습니다:
/home /
/blog/my-post.php /blog/my-post
/news /blog
/cuties https://www.petsofnetlify.com마치며
이로써 기나긴 쿠팡이츠 백엔드와 프론트엔드 편이 모두 마치게 되었습니다. 감사합니다.
