svelteKit으로 만든 프로젝트를 개발환경 docker compose 에서 올려보려고 하는데

페이지가 작동되지 않는다는 메세지만 나타난다?

포트설정도 제대로 했고 도커에서 정상적으로 올라간것도 확인 했는데

뭐가 문제인지를 몰라 한참을 헤맸다

 

아래는 svelteKit 프로젝트에 만든 도커 파일이다.

 

1. DockerFile

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Node.js 18 버전을 사용합니다.
FROM node:18
 
# 앱 디렉터리를 만듭니다.
WORKDIR /app
 
# 앱 소스 코드를 복사합니다.
COPY . .
 
# 앱 종속성 설치를 실행합니다.
RUN npm install
 
# 앱을 빌드합니다.
RUN npm run build
 
 
# 앱 실행을 위한 명령어를 지정합니다.
CMD ["npm", "run", "start"]
 cs

 

 

2. docker-compose.yml 파일

1
2
3
4
5
6
7
8
9
version: "3.9"
services:
  app:
    build: .
    ports:
      - "5173:5173"
    environment:
      NODE_ENV: production
 
 cs

 

?? 뭐 문제가 없어 보인다. 그리고 저 문제로 검색을 해봐도

nginx관련된 내용만 잔뜩 나온다 난 nginx 안쓰는데!

그러다 한 문서를 발견했다.

 

https://github.com/sveltejs/kit/discussions/5673

 

dockerize sveltekit · sveltejs/kit · Discussion #5673

I have an issue with running sveltekit app through the docker container. I am able to run an app in docker but when I want to make some changes on frontend UI I can see them only for one second. An...

github.com

 

문제는

CMD npm run dev

이부분이었다.

이걸 

CMD npm run dev -- --host

이런식으로 써줘야 한단다.

난 dev대신 start 스크립트를 따로 만들었으니 

도커파일을 수정하면

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Node.js 18 버전을 사용합니다.
FROM node:18
 
# 앱 디렉터리를 만듭니다.
WORKDIR /app
 
# 앱 소스 코드를 복사합니다.
COPY . .
 
# 앱 종속성 설치를 실행합니다.
RUN npm install
 
# 앱을 빌드합니다.
RUN npm run build
 
 
# 앱 실행을 위한 명령어를 지정합니다.
CMD ["npm", "run", "start", "--", "--host"]
 
 
 cs

 

이렇게 수정을 해줘야 하는 것이었다.

한참동안 뭔가 문제인지 몰랐는데 문제점을 찾아서 다행이다.

이 블로그를 찾아오는 다른 사람들도 이와같은 문제였다면 잘 해결했길 바란다.

저작자표시

'Yame Programmer > SVELTE' 카테고리의 다른 글

[svelte] svelteKit 빌드 경로 /build 안나올때  (0) 2023.03.09
[svelte] svelteKit 빌드파일 위치  (0) 2023.03.08
[svelte] document is not defined 에러 해결 방법  (0) 2023.02.28
[svelte] svelte tailWindcss 적용하기  (0) 2023.02.20
[svelte] svelteKit 시작 해보도록 하자  (0) 2023.02.17

요즘 svelte랑 tailwind css 사용해서 조금씩 뭔가 만들어 보고 있는데

드롭다운 메뉴를 만들어 보려고 하던 와중

document is not defined 이런 에러가 나타났다.

문제가 되었던 코드는

1
2
3
4
5
6
7
$: {
    if (isOpen) {
      document.addEventListener('click', handleClickOutside);
    } else {
      document.removeEventListener('click', handleClickOutside);
    }
  }
 cs

이 부분이었다

 

이 에러는 JavaScript가 브라우저 내에서 실행되는 환경에서만 document 객체가 정의되기 때문에

 Node.js 환경에서 실행될 때 발생하는 에러였다 SvelteKit 프로젝트에서는 서버에서 실행 중인

노드 코드에서는 document 객체를 사용할 수 없기 때문이었다.

그래서 스택오버플로우를 찾아보니 onMount를 사용해 해결 하는 방법이 있었다

 

1
2
3
4
5
6
7
8
9
10
11
import { onMount } from 'svelte';
 
$: {
    if (isOpen) {
      document.addEventListener('click', handleClickOutside);
    } else {
        onMount(() => {
            document.removeEventListener('click', handleClickOutside);
        });
    }
  }
 cs

 

이렇게 온마운트 안에 다큐먼트를 사용하는 코드를 넣으면 해결이 된다.

onMount는 컴포넌트가 처음으로 DOM에 렌더링 될 때 실행되는 함수이다.

아마 위 코드를 사용할때 다큐먼트가 정의되지 않은 상태에서 에러가 발생하는듯 하다.

스벨트의 라이프 싸이클에 대해서 나중에 한번 정리를 해봐야겠다.

 

 

저작자표시

'Yame Programmer > SVELTE' 카테고리의 다른 글

[svelte] svelteKit 빌드 경로 /build 안나올때  (0) 2023.03.09
[svelte] svelteKit 빌드파일 위치  (0) 2023.03.08
[svelte] svelteKit + docker 지금 이 페이지가 작동하지 않습니다. 해결  (0) 2023.03.03
[svelte] svelte tailWindcss 적용하기  (0) 2023.02.20
[svelte] svelteKit 시작 해보도록 하자  (0) 2023.02.17

 

오랜만에 블로그에 들어와 본다.

얼마전까지 이직한 회사에서 react를 사용했었는데 너~~~무 오랜만에 react를 해보니 바뀐것도 많이 바뀌었고

프론트 개발하기 좀더 편하게 했던거 같다.

 

그리고 조금더 알아보니 요즘 프론트엔드에 vue 이후로도 svelte , qwik , solid  이런 새로운것들이

나타나고 있어서 그중 압도적으로 코드량이 적다고 하는 svelte를 시작해 보려고 한다.

svelte를 시작한 이유

1. 그나마 새로나온 애들중 커뮤니티 사이즈가 좀 있다.

2. 코드량이 압도적으로 적다.

3. qwik나 solid는 react랑 굉장히 유사하다고 해서 좀 다른걸 해보고 싶었다.

4. 원랜 vue를 하려고 했는데 뭐가 또 새로 잔뜩 나왔으니까 새로낭노걸로 해보자는 심리

 

일단 데모버전으로 좀 까작거려 보다가 이것저것 만들어볼 생각이다.

기본적으로 시작하기 위한 명령어 ( 부트스트랩보다 요즘 tailwind가 또 좋다길래 일단 써본다)

npm init svelte@latest my-app
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.cjs -p

대충 이렇게 명령어 쳐놓고 한번 대충 올려보기나 해보자

이번기회에 타입스크립트도 공부하기 위해 타입스크립트 사용할수 있도록 선택을 했다.

외부망 끊겨있는 플젝도 끝났고 새로 공부하기로 했으니 다시 블로그에 글도 좀 올리고 해야겠다

저작자표시

'Yame Programmer > SVELTE' 카테고리의 다른 글

[svelte] svelteKit 빌드 경로 /build 안나올때  (0) 2023.03.09
[svelte] svelteKit 빌드파일 위치  (0) 2023.03.08
[svelte] svelteKit + docker 지금 이 페이지가 작동하지 않습니다. 해결  (0) 2023.03.03
[svelte] document is not defined 에러 해결 방법  (0) 2023.02.28
[svelte] svelte tailWindcss 적용하기  (0) 2023.02.20

+ Recent posts

티스토리툴바