기타치는 개발자의 야매 가이드

요즘 aws ec2 docker nginx svelteKit 이렇게 해보고 있는데

일단 build 경로에 대해 이야기 해보자

빌드경로가 다른 블로그나 사이트에선 /app/build에 있다는데 왜 안나올까 한다

일단 svelte.config.js 파일에서

이렇게 되어 있으면 별도로 빌드 경로를 지정해 주지 않는이상 .svelte-kit 에만 빌드 파일이 

만들어 지는것 같다.

따로 경로 지정해 줘도 안먹히는거 같고

그러다가 nginx 한번에 연결시키는건 포기하고 

사실 프록시 할필요도 딱히 없고 해서 단독으로 올려보려고 하는데

node로 올리면 된다는 글을 보았다. 

그런데

node build/index.js 뭐 이런명령어를 치라는데

안먹힌다

일단 뭐가 문제일까 생각해보니

build 경로도 없고 index.js 파일은 .svelte-kit 폴더의 아웃풋 안에 서버폴더 안에 있었다.

다시 여기저기 작은 svelte 생태계를 찾아 보니

svelte.config.js 파일의 어댑터를 노드로 설정을 해야 한다고 한다

그래 어댑터가 오토로 되어 있어서 자동으로 막 해준다고 하는데 

이젠 명확히 어떤 서버에 올릴지 목적이 생겼지 않은가 svelteKit 프로젝트를 node서버에 올리기 위해

npm i -D @sveltejs/adapter-node 

이 명령어로 노드어댑터 설치 해주고 

svelte.config.js 파일 상단에 

aws ec2 환경에서 gitaction이랑 docker을 사용해 

svelteKit 으로 된 프로젝트를 도커로 빌드해서 ecr에 푸시하고 ec2에 npm run dev 로  CI/CD로

띄우는것까지는 작업을 하고

이제 nginx를 붙여볼까 하면서 도커파일좀 건드려 보고 있는데

검색해서 나온 것들은 

엔진스에 스벨트 빌드해서 나온 아티팩트를 서빙하려고

COPY --from=build /app/public /usr/share/nginx/html

이렇게 해뒀는데 

COPY failed: stat /app/public: file does not exist
Error: Process completed with exit code 1.

이런 에러가 나온다

도커 빌드 할때 저 위치를 찾을수 없다고 나오는데 한참을 헤매다가 

빌드파일은 .svelte-kit에 있다는걸 알아냈다

그러나

COPY --from=build /app/.svelte-kit /usr/share/nginx/html

으로 수정을 하더라도 도커 빌드는 되지만 nginx에서는 게이트웨이 오류가 난다.

스벨트가 따로 index.html 파일을 생성하지 않기 때문이다.

아마 nginx를 사용하려면 컨테이너 2개 띄워서

nginx->svlete로 프록시해주는 구조로 가야 할것 같다.

괜히 한큐에 끝내보려고 아둥바둥 시간 많이 썻다.

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

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

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

문제가 되었던 코드는

이 부분이었다

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

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

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

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

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

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

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

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

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

얼마전까지 이직한 회사에서 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

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

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

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