vite 프로젝트용 Dockerfile을 작성했는데, 배포와 build는 잘 되는게 구현이 안됐다.
이유
해결 방법
최종 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 여기 필수 참고
처음에 성공을 한 방법
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
cd node_modules/react-scripts
and ran npm dedupe
to de-duplicate multiple versionsnpm 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
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
를 자동으로 사용함