diff --git a/README.md b/README.md index e3447fe..15bc478 100644 --- a/README.md +++ b/README.md @@ -1 +1,133 @@ -# CI/CD 학습하기 +# 포트폴리오 웹사이트 + +# 마주했던 에러 + +1. SEO 최적화 + + a. React Helmet Async + Prerenderer 를 활용하여 SEO 최적화를 시도 + + ``` + [plugin:Prerender Plugin] [plugin Prerender Plugin] Unable to prerender all routes! + x Build failed in 3.47s + error during build: + [Prerender Plugin] [plugin Prerender Plugin] listen EACCES: permission denied 127.0.0.1:443 + at getRollupError (file:///home/ec2-user/git/ci-cd-study/fe/node_modules/rollup/dist/es/shared/parseAst.js:396:41) + at error (file:///home/ec2-user/git/ci-cd-study/fe/node_modules/rollup/dist/es/shared/parseAst.js:392:42) + at Object.error (file:///home/ec2-user/git/ci-cd-study/fe/node_modules/rollup/dist/es/shared/node-entry.js:19589:20) + at Object. (/home/ec2-user/git/ci-cd-study/fe/node_modules/@prerenderer/rollup-plugin/dist/RollupPrerenderPlugin.js:140:34) + at Generator.throw () + at rejected (/home/ec2-user/git/ci-cd-study/fe/node_modules/@prerenderer/rollup-plugin/dist/RollupPrerenderPlugin.js:29:65) + at processTicksAndRejections (node:internal/process/task_queues:96:5) + ``` + + - 위와 같은 에러 발생하여 Prerenderer/@Puppeteer 레포지토리의 이슈를 확인해봤으나 동일 문제는 발생하지 않음 + + b. Github 내의 문서를 통해 옵션을 새로 설정 + EC2의 리눅스에 퍼피티어를 설치 + + ``` + sudo yum update -y + sudo yum install -y atk.x86_64 cups-libs.x86_64 gtk3.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXtst.x86_64 pango.x86_64 alsa-lib.x86_64 + ``` + + c. 결과 + + - 검색 결과에 잘 노출이 됨을 확인 + 스크린샷 2024-07-08 오전 11 57 44 + +2. EC2의 성능으로 프로젝트 빌드를 하지 못하였음 + + a. Node.js의 메모리를 늘리기 + + ``` + 1. 현재 용량 확인하기 + $ node -e 'console.log(v8.getHeapStatistics().heap_size_limit/(1024*1024))' + $ 499.25 + + 2. 용량 늘리기 + NODE_OPTIONS=--max-old-space-size=8000 npm run build + ``` + + - 이 방법으로도 해결되지 않음 + + b. 메모리 스왑 방식 사용 + + ``` + sudo dd if=/dev/zero of=/mnt/swapfile bs=1M count=2048 + sudo mkswap /mnt/swapfile + sudo swapon /mnt/swapfile + ``` + + - 부족한 RAM 메모리를 디스크의 일부를 대신 사용하도록 설정해줌으로써 메모리 문제를 해결하는 방법을 활용 + - 이 방법으로는 해결이 됨 + + c. 사용하지 않는 의존성들 제거 + + - 직접 구현할 수 있는 코드는 직접 만들어 사용하고 해당 라이브러리들은 제거 + +# 사용한 라이브러리 + +### 프론트엔드 + +#### UI라이브러리 + +- React +- TailwindCSS +- Three.js / Framer Motion +- WebGL (GLSL) + +#### SEO 최적화 + +- React-Helmet-Async / Puppeteer / @prerenderer + +#### Testing + +- Vitest / React Testing Library + +### 백엔드 + +# 실행 방법 + +### 프론트엔드 + +1. 루트 경로에서 fe 폴더로 이동 + +``` +cd ./fe +``` + +2. 패키지, 의존성 설치 + +``` +npm install +``` + +3. 프로젝트 실행 + +``` +npm run dev +``` + +### 백엔드 + +1. 루트경로에서 be 폴더로 이동 + +``` +cd ./be +``` + +2. 패키지 및 의존성 설치 + +``` +npm install +``` + +3. 프로젝트 실행 + +``` +npm run dev +``` + +# 빌드 및 배포 방법 + +1. AWS EC2 환경에서 프론트엔드, 백엔드 배포 +2. Nginx를 사용