|
1 | 1 | # Wrap up
|
2 | 2 |
|
| 3 | +## 20240404 |
| 4 | + |
| 5 | +### 오늘 한 것 |
| 6 | + |
| 7 | +- 발표날! |
| 8 | +- 시연 매뉴얼 작성 후 시연 도움 |
| 9 | + |
| 10 | +## 20240403 |
| 11 | + |
| 12 | +### 오늘 한 것 |
| 13 | + |
| 14 | +- PPT 제작 |
| 15 | +- `.env`파일 docker container에 추가 |
| 16 | + |
| 17 | +### 어려웠던 점 |
| 18 | + |
| 19 | +- `.env`를 젠킨스에서 만들고 파일까지 생성하는데, 도커에 들어가지 않았다. |
| 20 | + - `.dockerignore`에 env파일이 들어있었음!! |
| 21 | + |
| 22 | +### 새로 알게 된 점 |
| 23 | + |
| 24 | +- 프론트 컨테이너 들어가는 법 |
| 25 | + |
| 26 | + - `docker exec -it artchain_frontend_b /bin/sh` |
| 27 | + |
| 28 | +- `.env`파일 추가하기 |
| 29 | + [https://velog.io/@votogether2023/AWS-EC2-배포-시-env-파일-설정feat.젠킨스](https://velog.io/@votogether2023/AWS-EC2-%EB%B0%B0%ED%8F%AC-%EC%8B%9C-env-%ED%8C%8C%EC%9D%BC-%EC%84%A4%EC%A0%95feat.%EC%A0%A0%ED%82%A8%EC%8A%A4) |
| 30 | + |
| 31 | + - `Dockerfile` 에서 `.env` 복사 |
| 32 | + - `.dockerignore` 에서 `.env` 삭제 |
| 33 | + - Dockerfile 내용 |
| 34 | + ```bash |
| 35 | + FROM node:21-alpine |
| 36 | + WORKDIR /app |
| 37 | + COPY package*.json . |
| 38 | + RUN npm install |
| 39 | + COPY .env . |
| 40 | + COPY . . |
| 41 | + EXPOSE 3000 |
| 42 | + CMD [ "npm", "run", "dev" ] |
| 43 | + ``` |
| 44 | + - 추가 부분 |
| 45 | + |
| 46 | + ```bash |
| 47 | + stage('Image Build & DockerHub Push') { |
| 48 | + steps { |
| 49 | + // '/frontend' 디렉토리로 이동 |
| 50 | + dir('frontend') { |
| 51 | + script { |
| 52 | +
|
| 53 | + sh ''' |
| 54 | + touch .env |
| 55 | + echo 'VITE_ART_COIN_CONTRACT_ADDRESS=0xE5856017Db7b4023383c867Ea65bc178B7F023C1' >> .env |
| 56 | + echo 'VITE_MARKET_CONTRACT_ADDRESS=0x538F17DB8FdB2bba76D14E420161412e9d0Bd2CA' >> .env |
| 57 | + ''' |
| 58 | + // Docker Hub에 로그인 (Docker Hub Access Token이 필요) |
| 59 | + docker.withRegistry('', registryCredential) { |
| 60 | + sh "docker buildx create --use --name mybuilder" |
| 61 | + sh "docker buildx build --platform linux/amd64,linux/arm64 -t $imageName:$BUILD_NUMBER --push ." |
| 62 | + sh "docker buildx build --platform linux/amd64,linux/arm64 -t $imageName:latest --push ." |
| 63 | + } |
| 64 | +
|
| 65 | + } |
| 66 | + } |
| 67 | + } |
| 68 | + } |
| 69 | + ``` |
| 70 | + |
| 71 | +### 내일 할 것 |
| 72 | + |
| 73 | +- PPT 만들기 |
| 74 | + |
| 75 | +## 20240402 |
| 76 | + |
| 77 | +### 오늘 한 것 |
| 78 | + |
| 79 | +- 파비콘 추가 |
| 80 | +- docker에서 기존의 image가 삭제 되지 않아 jenkins script에 삭제 커맨드 추가 |
| 81 | + |
| 82 | +### 어려웠던 점 |
| 83 | + |
| 84 | +- 기존 이미지 삭제하는 것을 처음에는 `docker rmi $(docker images -f "dangling=true" -q)` 했는데, jenkins script에서는 변수가 되지 않았다. |
| 85 | + |
| 86 | +### 새로 알게 된 점 |
| 87 | + |
| 88 | +- 사용하지 않는 이미지를 삭제하기 위해서는 `docker image prune -f`을 해야한다. |
| 89 | +- SSE를 사용하기 위해서는 SSE 허가 설정을 NginX에서 해야한다. |
| 90 | + |
| 91 | +### 내일 할 것 |
| 92 | + |
| 93 | +- PPT 만들기 |
| 94 | + |
| 95 | +## 20240401 |
| 96 | + |
| 97 | +### 오늘 한 것 |
| 98 | + |
| 99 | +- axios 생성 |
| 100 | +- 크롬창 너비 500보다 더 작게 만드는 방법 찾기 |
| 101 | + |
| 102 | +### 어려웠던 점 |
| 103 | + |
| 104 | +- 사진과 dto를 함께 첨부하는 axios가 정말 힘들었다 |
| 105 | + |
| 106 | +### 새로 알게 된 점 |
| 107 | + |
| 108 | +- 사진과 dto를 함께 첨부할 때 formData에 append를 해야 하는데, dto를 JSON으로 변환해서 그냥 append를 하면 안된다. blob로 변환해서 append를 해야함 |
| 109 | + |
| 110 | +### 내일 할 것 |
| 111 | + |
| 112 | +- 포팅메뉴얼 작성 |
| 113 | + |
| 114 | +## 20240331 |
| 115 | + |
| 116 | +### 오늘 한 것 |
| 117 | + |
| 118 | +- axios 생성 |
| 119 | + |
| 120 | +### 어려웠던 점 |
| 121 | + |
| 122 | +- 사진과 dto를 함께 첨부하는 axios가 어려움ㅠ |
| 123 | + |
| 124 | +### 내일 할 것 |
| 125 | + |
| 126 | +- axios 완료 |
| 127 | + |
| 128 | +## 20240329 |
| 129 | + |
| 130 | +### 오늘 한 것 |
| 131 | + |
| 132 | +- 개인/기업 마이페이지 백 메서드 생성 후 이미 있던 거라 삭제ㅠ |
| 133 | +- axios 생성 |
| 134 | + |
| 135 | +### 어려웠던 점 |
| 136 | + |
| 137 | +- axios를 처음 하는거라 처음에는 조금 어려웠다 |
| 138 | + |
| 139 | +### 내일 할 것 |
| 140 | + |
| 141 | +- axios 완료 |
| 142 | + |
| 143 | +## 20240328 |
| 144 | + |
| 145 | +### 오늘 한 것 |
| 146 | + |
| 147 | +- 메타마스크-모바일 웹 연동 |
| 148 | +- 코인 민팅 함수 호출 |
| 149 | + |
| 150 | +### 어려웠던 점 |
| 151 | + |
| 152 | +- dApp이 뭔지 몰라 아주 바닥부터 시작했다ㅎㅎ |
| 153 | +- 그리고 connectWallet을 해야하는지 몰라서 삽질 했음 |
| 154 | +- 연동 완료 후, 코인 민팅을 할 때 리액트와 타입스크립트를 몰라서 완성된 함수를 import하는 게 어려웠다. |
| 155 | +- 메타마스크- 모바일 웹 연동 |
| 156 | + |
| 157 | +[https://velog.io/@rjc1704/메타마스크-지갑-연결-데스크탑-모바일](https://velog.io/@rjc1704/%EB%A9%94%ED%83%80%EB%A7%88%EC%8A%A4%ED%81%AC-%EC%A7%80%EA%B0%91-%EC%97%B0%EA%B2%B0-%EB%8D%B0%EC%8A%A4%ED%81%AC%ED%83%91-%EB%AA%A8%EB%B0%94%EC%9D%BC) |
| 158 | + |
| 159 | +- dApp이 무엇인지 |
| 160 | + - 블록체인 플랫폼을 뜻함 |
| 161 | + - https://upbitcare.com/academy/education/blockchain/239 |
| 162 | +- connectWallet 버튼을 생성해야함 |
| 163 | +- 연결 확인을 해야함 |
| 164 | +- https://metamask.github.io/metamask-deeplinks/ 에서 디앱 링크 생성 |
| 165 | +- 모바일 웹으로 그 링크로 입장 |
| 166 | +- 메타마스크 앱이 있어야함. 앱 내 브라우저에서 우리 웹사이트 보면 됨 |
| 167 | + |
| 168 | +### 내일 할 것 |
| 169 | + |
| 170 | +- 포트원 끝내기 |
| 171 | +- 더미 데이터 넣기 |
| 172 | + |
3 | 173 | ## 20240327
|
4 | 174 |
|
5 | 175 | ### 오늘 한 것
|
|
11 | 181 |
|
12 | 182 | - 타입스크립트를 하나도 모르는 상태로 포트원을 하는 게 처음에 정말 막막했다.
|
13 | 183 | - 그리고 카카오페이 결제 페이지에서 `mInfo:1 Failed to launch 'intent://kakaopay/pg?url=' because the scheme does not have a registered handler.`에러가 떠서 너무 슬펐다. 이유가 개발자 모드 자체 지원이 안된다는 말을 보고는 가슴이 찢어질 것 같았다.
|
14 |
| - |
15 |
| -### 새로 알게 된 점 |
16 |
| - |
17 | 184 | - 인증 결제 흐름 : [https://github.com/iamport/iamport-manual/blob/master/인증결제/background.md](https://github.com/iamport/iamport-manual/blob/master/%EC%9D%B8%EC%A6%9D%EA%B2%B0%EC%A0%9C/background.md)
|
18 | 185 | - 포트원 결제 연동
|
19 | 186 |
|
|
125 | 292 |
|
126 | 293 | - IAM Identity Center 에서 만든 계정으로 S3에 Access Key와 Secret Access Key를 넣으면 없다고 오류가 남
|
127 | 294 | - 그래서 새로운 IAM 계정 만들어서 하니까 성공
|
128 |
| -
|
129 |
| -### 새로 알게 된 점 |
130 |
| -
|
131 | 295 | - IAM Identity Center란
|
132 | 296 | - AWS SSO(Single Sign-On)의 후속 서비스로 한 번의 로그인으로 통합 서비스 이용 가능
|
133 | 297 | - 계정을 만들어서 로그인 → 안전한 루트 계정이라고 생각하면 됨
|
|
155 | 319 | - Pipeline Script의 `Groovy`와 그 안의 `sh` 문법이 초면이라 문법에서 오류가 나면 힘들었다.
|
156 | 320 | - Script에서 전역변수 설정
|
157 | 321 | - Nginx가 restart되면 내려가서 reload를 해야했는데, `nginx.service is not active, cannot reload`에러 발생
|
158 |
| -
|
159 |
| -### 새로 알게 된 점 |
160 |
| -
|
161 | 322 | - 돌아가는 container의 image를 지우면 안된다.
|
162 | 323 | - 한 개의 image로 여러 container을 돌릴 수 있다.
|
163 | 324 | - 무중단 배포 순서
|
|
186 | 347 |
|
187 | 348 | - 자꾸 `[ERROR] WebSocket connection to ‘wss~’ `라는 에러가 뜨는데 이걸 못보고 그 밑의 hmr을 수정하라는 오류를 보고 그걸 고치느라 오래 걸림. hmr 설정을 하면 무한 새로고침이 됐다.
|
188 | 349 | - 무중단 배포 자체
|
189 |
| -
|
190 |
| -### 새로 알게 된 점 |
191 |
| -
|
192 | 350 | - Nginx 웹소켓 연결
|
193 | 351 | - https://blog.naver.com/hsmang/221837039250
|
194 | 352 | - `nginx default.conf`에서 아래의 내용을 추가함
|
|
240 | 398 |
|
241 | 399 | ```
|
242 | 400 |
|
243 |
| -### 새로 알게 된 점 |
244 |
| -
|
245 | 401 | - 어제 났던 `[ERROR] module not found: error: you attempted to import /app/node_modules/react-refresh/runtime.js which falls outside of the project src/ directory. relative imports outside of src/ are not supported.` 에러 해결
|
246 | 402 |
|
247 | 403 | - 에러 발생 이유 : 위에서 성공한 방법은 `npm dedupe` 를 밑처럼 두개 버전에 같아졌기 때문임. 근데 `.dockerignore` 를 올리면 `node_modules` 가 제외되고 새롭게 npm install을 하는데, 이때는 수정하기 전 버전으로 버전이 다르게 나와서 에러가 뜨는 것임
|
@@ -350,9 +506,6 @@ CMD [ "npm", "run", "dev" ]
|
350 | 506 | module not found: error: you attempted to import /app/node_modules/react-refresh/runtime.js which falls outside of the project src/ directory. relative imports outside of src/ are not supported. you can either move it inside src/, or add a symlink to it from project's node_modules/.
|
351 | 507 | ```
|
352 | 508 | - 한번 성공했는데 `.dockerignore`생성 후 다시 에러 발생
|
353 |
| -
|
354 |
| -### 새로 알게 된 점 |
355 |
| -
|
356 | 509 | - 위에서 마지막 에러를 제외하고 오류가 났던 이유는, create-react-app으로 프로젝트를 만들면 필요한 react-scripts가 없어서 연결이 안됐음.
|
357 | 510 |
|
358 | 511 | 1. `npm ERR! Missing script: "start"` 에러 발생
|
@@ -396,9 +549,6 @@ CMD [ "npm", "run", "dev" ]
|
396 | 549 | ### 어려웠던 점
|
397 | 550 |
|
398 | 551 | - Jenkins 컨테이너 내리고 재실행해도 화면은 뜨는데 자꾸 403이 떴다. 그리고 컨테이너와 이미지를 내리고 돌려도 초기화가 되지 않음
|
399 |
| -
|
400 |
| -### 새로 알게 된 점 |
401 |
| -
|
402 | 552 | - Nginx-Jenkins 연결
|
403 | 553 | 1. 처음에는 잘 몰라서 EC2내의 nginx의 기본 링크를 젠킨스페이지(8081포트)로 연결시키고, Docker내의 nginx에서는 기본 링크를 3000포트로 연결시켜서 충돌이 났던 것임.
|
404 | 554 | 1. EC2내의 nginx설정을 지우고, nginx 기본 링크를 젠킨스 페이지로 연결하니 무한로딩되던 페이지가 빠르게 에러페이지 나오는 걸로 발전함
|
@@ -451,8 +601,6 @@ CMD [ "npm", "run", "dev" ]
|
451 | 601 |
|
452 | 602 | 에서 `proxy_pass http://j10a708.p.ssafy.io:8081;`(젠킨스 경로)로 바꾸니까 연결은 잘됨; 아무튼 내일 더 해봐야겠음
|
453 | 603 |
|
454 |
| -### 새로 알게 된 점 |
455 |
| -
|
456 | 604 | - 리버스 프록시를 설정하면서 nginx의 역할에 대해 더 자세히 알게 됐다.
|
457 | 605 | - `vim /etc/nginx/conf.d/default.conf` 설정
|
458 | 606 |
|
|
0 commit comments