docker vite typscript 이미지 생성하기

서론 : Docker, vite, npm에 대한 이해가 낮았어서 올바르게 빌드하기 보다는, container 내부에 접속해서 실행만 하는 과정입니다..  추후 좀 더 학습하게 되면 보완하겠습니다.  혹은 지적하실 부분 있다면 해주세요 
우선 제가 container 내부에서 run dev를 햇는지에 대한 과정정도로 이해해주시면 될 거 같습니다..

npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

요즈음 자주 쓰는 vite를 통해서 app을 생성하겠습니다.
이후  해당 프로젝트 명으로 이동, 이후 설치 및 실행하면

cd  my-app
npm i
npm run dev

아래 사진과 같은 화면을 볼 수 있습니다.

cra에서와 마찬가지로 file생성 build  run 3가지 단계로 할려고 파일을 작성했는데 에러가 떴습니다..

FROM node:18-alpine

WORKDIR /app

COPY ["package.json", "package-lock.json*", "./"]

RUN npm install

COPY . .

EXPOSE 8080

CMD ["npm","run","dev"]

 

 

What's Next?
PS C:\ssgrepo\suhongFTpracticeRF\practice\my-app> docker run --publish 8000:8000 node-docker
node:internal/modules/cjs/loader:1080
  throw err;
  ^

Error: Cannot find module '/app/server.js'
    at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
    at Module._load (node:internal/modules/cjs/loader:922:27)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

Node.js v18.17.1
PS C:\ssgrepo\suhongFTpracticeRF\practice\my-app> docker build --tag node-docker .
[+] Building 6.9s (10/10) FINISHED                                                                                                             docker:default
 => [internal] load .dockerignore                                                                                                                        0.0s
 => => transferring context: 2B                                                                                                                          0.0s 
 => [internal] load build definition from dockerfile                                                                                                     0.0s 
 => [internal] load metadata for docker.io/library/node:18-alpine                                                                                        0.8s 
 => [1/5] FROM docker.io/library/node:18-alpine@sha256:3482a20c97e401b56ac50ba8920cc7b5b2022bfc6aa7d4e4c231755770cf892f                                  0.0s 
 => [internal] load build context                                                                                                                        0.6s 
 => => transferring context: 1.31MB                                                                                                                      0.6s 
 => CACHED [2/5] WORKDIR /app                                                                                                                            0.0s 
 => CACHED [3/5] COPY [package.json, package-lock.json*, ./]                                                                                             0.0s 
 => CACHED [4/5] RUN npm install                                                                                                                         0.0s 
 => [5/5] COPY . .                                                                                                                                       4.1s 
 => exporting to image                                                                                                                                   1.3s 
 => => exporting layers                                                                                                                                  1.3s 
 => => writing image sha256:71266c50c7e333301fccb3a3138957b69f7e031c380d57056d1d72ce04880b87                                                             0.0s 
 => => naming to docker.io/library/node-docker                                                                                                           0.0s 

What's Next?
  View summary of image vulnerabilities and recommendations → docker scout quickview
PS C:\ssgrepo\suhongFTpracticeRF\practice\my-app> docker run --publish 8000:8000 node-docker
node:internal/modules/cjs/loader:1080
  throw err;
  ^

Error: Cannot find module '/app/server.js'
    at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
    at Module._load (node:internal/modules/cjs/loader:922:27)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

이를 해결하기 위해서 구글링 해보다가 관련 게시글을 찾았습니다.
https://dev.to/ysmnikhil/how-to-build-with-react-or-vue-with-vite-and-docker-1a3l
관련 연습 코드 잇는 github 링크입니다. 

https://github.com/suhong99/container-practice 

GitHub - suhong99/container-practice

How to use React or Vue with Vite and Docker

우선 docker-compose.yml 파일을 루트에 생성합니다.

version: "3.4"
services:
  vite_docker:
    image: node:18-alpine
    container_name: vite_docker
    entrypoint: /bin/sh
    ports:
      - 8080:8080
    working_dir: /srv/app
    volumes:
      - type: bind
        source: ./
        target: /srv/app
    tty: true

관련 설명은  https://blockchainstudy.tistory.com/62에서한글로 번역되어 있습니다.

version : compose의 버전

services 안에 설명을 적습니다

컨테이너가 여러개 있을 수 있어서 우선

 vite_docker로 시작합니다. ( 이를 작성했기 때문에 container_name을 굳이 적지 않아도 됩니다)
  image : 어떤 이미지를 사용할 지 
 container_name : 이름 (위의 이름과 다를떄)
entrypoint  : 컨테이너 내에서 실행될 애플리케이션을 가리킵니다.  Alpine 이미지를 사용하고 있기 때문에  위에를 적어야한다 ( 틀렸을 수도 있습니다 ㅠ.)

ports : 연결할 포트 (Dockerfile과 동일한 기능) 추후 뒤에 부분은 vite.confing에 설정한 port와 같아야합니다.
working_dir : 작업할 디렉토리 . 컨테이너 접근시 해당위치로 갑지가

volumes :  해당 키워드로 호스트 파일을 사용할 수 있게 되고 빌드나 리스타트 해당 작업이 가능합니다.
이때 host 파일 업데이트를 bind 키워드를 통해 반영 가능합니다. 호스트 source를 target 위치로 옮길 수 있습니다 (제가 해석한 바에 의하면 ...)

tty는 컨테이너를 지속적으로 run하기 위해 사용합니다.

이후 vite.config.ts 에서 server 부분 코드를 추가해주셔야합니다.

export default defineConfig({
  plugins: [react()],
  server: {
    // open: true,
    host: true,
    port: 8080, // This is the port which we will use in docker
    watch: {
      usePolling: true,
    },
  },
  build: {
    outDir: "build",
    sourcemap: true,
  },
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "src/setupTests",
    mockReset: true,
  },
})

server에서 host port watch 설정을 해야지만 윈도우 환경에서 docker가 가능하다고 합니다.

이후 도커 컴포즈 작업이  끝났으면 build하면 됩니다.

docker-compose up --build --no-recreate -d

처음 빌드할 떄는 위 키우워드를 사용해야 합니다. 이후에는

docker-compose up -d

 

compose의 경우 일반 dockerfile과 확인하는 명령어가 다르더군요.

docker-compose ps

를 통해 확인해야 합니다.

이후 해당 컨테이너로 이동후에 npm i 와 run dev를 하면  로컬환경에서 컨테이너를 확인할 수 있습니다.

docker exec -it vite_docker sh

npm i && npm run dev

 

 

docker 컨테이너 내부에서 나오려면 exit를 입력하면 됩니다.!

참고 링크

How to use React or Vue with Vite and Docker

https://dev.to/ysmnikhil/how-to-build-with-react-or-vue-with-vite-and-docker-1a3l
https://blockchainstudy.tistory.com/62
https://www.youtube.com/watch?v=yIpDRI5cTdI