SSAFY 특화 프로젝트 기록_20240321

탱귤생귤·2024년 3월 21일
0

19일 차

오늘 한 것

  • 어제 에러 해결
  • 프론트엔드 수동 배포 완료

어려웠던 점

  • Pipeline script를 작성하는 부분에서 docker hub에 push하기와 service health check에서 계속 에러가 났었다.

  • vite 프로젝트용 Dockerfile을 작성했는데, 배포와 build는 잘 되는게 구현이 안됐다.

    • 이유

      • vite는 127.0.0.1:5173 환경으로 디폴트로 세팅하기 때문
    • 해결 방법

      • host를 0.0.0.0으로 설정
    • 최종 vite.config.ts 파일

      import { defineConfig } from "vite";
      import react from "@vitejs/plugin-react";
      
      // https://vitejs.dev/config/
      export default defineConfig({
        plugins: [react()],
        server: {
          port: 3000,
          host: "0.0.0.0",
        },
      });
      

새로 알게 된 점

  • 어제 났던 [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. 에러 해결

    • 에러 발생 이유 : 위에서 성공한 방법은 npm dedupe 를 밑처럼 두개 버전에 같아졌기 때문임. 근데 .dockerignore 를 올리면 node_modules 가 제외되고 새롭게 npm install을 하는데, 이때는 수정하기 전 버전으로 버전이 다르게 나와서 에러가 뜨는 것임

      ├─┬ @storybook/preset-create-react-app@4.1.2
      │ └─┬ @pmmmwh/react-refresh-webpack-plugin@0.5.7
      │   └── react-refresh@0.11.0 deduped
      ├─┬ @storybook/react@6.5.7
      │ └── react-refresh@0.11.0
      └─┬ react-scripts@5.0.1
        └── react-refresh@0.11.0 deduped
      
  • https://github.com/storybookjs/storybook/issues/17049 여기 필수 참고

  • 처음에 성공을 한 방법

    1. Ran npm ls react-refresh and it shows a different of react-refresh package versions
    ├─┬ @storybook/preset-create-react-app@4.1.2
    │ └─┬ @pmmmwh/react-refresh-webpack-plugin@0.5.7
    │   └── react-refresh@0.14.0
    ├─┬ @storybook/react@6.5.7
    │ └── react-refresh@0.11.0
    └─┬ react-scripts@5.0.1
    
    1. cd node_modules/react-scripts and ran npm dedupe to de-duplicate multiple versions
    2. https://github.com/facebook/create-react-app/issues/11810
    3. Ran npm ls react-refresh to check existing versions for react-refresh
    ├─┬ @storybook/preset-create-react-app@4.1.2
    │ └─┬ @pmmmwh/react-refresh-webpack-plugin@0.5.7
    │   └── react-refresh@0.11.0 deduped
    ├─┬ @storybook/react@6.5.7
    │ └── react-refresh@0.11.0
    └─┬ react-scripts@5.0.1
      └── react-refresh@0.11.0 deduped
    
    1. npm start compiles & runs successfully
  • 그리고 .dockerignore 을 만드니까 다시 같은 에러 발생

    • 에러 발생 이유 : 위에서 성공한 방법은 npm dedupe 를 밑처럼 두개 버전에 같아졌기 때문임. 근데 .dockerignore 를 올리면 node_modules 가 제외되고 새롭게 npm install을 하는데, 이때는 수정하기 전 버전으로 버전이 다르게 나와서 에러가 뜨는 것임

      ├─┬ @storybook/preset-create-react-app@4.1.2
      │ └─┬ @pmmmwh/react-refresh-webpack-plugin@0.5.7
      │   └── react-refresh@0.11.0 deduped
      ├─┬ @storybook/react@6.5.7
      │ └── react-refresh@0.11.0
      └─┬ react-scripts@5.0.1
        └── react-refresh@0.11.0 deduped
      
  • 해결 방법(https://github.com/facebook/create-react-app/issues/11810 필수 참고)

    • 여기서 package.json 에 버전을 아예 0.11.0 으로 만들어버리는 코드를 넣으면 된다고 함
      "overrides": {
        "react-refresh": "0.11.0"
      }
  • 근데 지금까지 했던 게 전부 react 프로젝트 설정값이어서 우리는 vite로 프로젝트 만들어서 다시 함

  • 이 Dockerfile로 변경

FROM node:21-alpine
WORKDIR /app
COPY package*.json .
RUN npm install
COPY . .
EXPOSE 3000
CMD [ "npm", "run", "dev" ]
  • docker buildx build
    • buildx 는 여러 플랫폼 용으로 빌드할 수 있는 기능같은 여러 기능을 포함한 CLI 확장 플러그인이다.
    • docker buildx build 는 그래서 buildx로 build를 할 때 쓰는 커맨드이다. 그리고 이걸 할 때는 Moby/BuildKit 를 자동으로 사용함
      • 도커 컨테이너에 자동으로 이미지가 있는 것을 확인
    • https://80000coding.oopy.io/54dc871d-30c9-46cb-b609-2e8831541b5e

내일 할 것

  • docker-compose.yml 작성
  • 무중단 배포

0개의 댓글