-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #16 from JongMany/feature/main
docs: README.md 문서 추가
- Loading branch information
Showing
1 changed file
with
133 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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.<anonymous> (/home/ec2-user/git/ci-cd-study/fe/node_modules/@prerenderer/rollup-plugin/dist/RollupPrerenderPlugin.js:140:34) | ||
at Generator.throw (<anonymous>) | ||
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. 결과 | ||
|
||
- 검색 결과에 잘 노출이 됨을 확인 | ||
<img width="965" alt="스크린샷 2024-07-08 오전 11 57 44" src="https://github.com/JongMany/portfolio/assets/61236589/e4a64c0e-c2a1-47dd-8ba2-dafcf9b993dc"> | ||
|
||
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를 사용 |