실용적인 개발 2: 프런트엔드

키프로스의 스페셜티 커피숍에 대한 간단한 프로젝트 개발이 계속됩니다. 에서는 API 마이크로서비스에 대해, 두 번째 부분에서는 프런트엔드 사이트에 대해, 마지막 기사에서는 텔레그램 봇에 대해 이야기했습니다.

project code이(가) 열려 있고 웹사이트https://specialtycoffee.cy/가 열려 있습니다.

건축물

웹사이트에는 커피숍 마커가 있는 지도와 정보 페이지의 두 페이지만 있습니다. 스타트업에는 다른 것이 필요하지 않지만 피드백을 위해 Telegram과 이메일이 있습니다.

구현은 무료 계층의 모듈식 바닐라 JavaScript 및 Google 지도이며 항상 Mapbox, Mapquest 및 기타 서비스로 대체할 수 있습니다.

REST API의 지도와 데이터가 동시에 로드되고 준비가 되면 GeoJson 데이터 배열의 마커가 지도에 추가되고 클러스터에 수집됩니다. 마커를 클릭하면 Google Places API에 회사 ID(cid)에 대한 요청이 전송되고 더 큰 Google 지도에서 회사 카드에 대한 링크가 포함된 작은 설명(정보 창)이 열립니다. 리뷰 등이 있습니다. 이 링크는 cid를 사용하여 생성됩니다.

Google 지도를 사용할 수 없는 경우 오류 메시지가 있는 스텁이 표시되지만 웹 사이트 탐색은 계속 작동합니다.

비동기 실행 덕분에 모든 것이 간단하고 빠릅니다.

저는 Vite을 사용하여 매우 빠르고 간단하게 프로젝트를 빌드합니다.

사이트 방문자에 대한 분석 및 통찰력을 위해 Google 태그 관리자 대신 Google 애널리틱스를 직접 연결하여 사용합니다(이 방법으로 트래픽이 약간 적음). 정보 창 열기는 사이트 전환을 계산하기 위해 목표 달성으로 분석에 기록됩니다. 사용된 플러그인은 vite-plugin-radar 입니다.

vite-plugin-html-purgecss 및 vite-plugin-minify 두 개의 추가 플러그인을 사용하면 최종 빌드에서 사용하지 않는 모든 코드를 제거할 수 있습니다. 설정하는 데 15분이 걸렸습니다. 괜찮습니다.

구성

일반 옵션 및 비밀 이름은 .env 파일에 저장되고 로컬 재정의는 .env.local 파일에 저장됩니다.

모니터링

.env에서와 동일한Sentry VITE SENTRY DSN의 빈 값을 지정하고(명확성을 위해) 실제 값을 secret에 씁니다.

전개

관리형 마이크로 VM Firecracker가 있는 동일한Fly.io 플랫폼. 여기에서 마이크로서비스 API를 호스팅하는 것보다 훨씬 쉽고 4줄 Dockerfile이면 충분합니다.

FROM pierrezemb/gostatic
COPY docker/config/headerConfig.json /config/
COPY dist/ /srv/http/
ENTRYPOINT ["/goStatic", "--fallback", "/index.html"]

CI/CD

이는 약간 더 복잡합니다. 먼저 Github Action Vite로 빌드를 생성한 다음 flyctl 여기서 컨테이너를 생성하고 프로덕션 VM에 배포합니다. 이 경우 모든 비밀은 GitHub 프로덕션 환경에 저장됩니다.

이 시점에서 웹 사이트는 라이브 상태이고 프로덕션에서 호스팅되며 모든 사용자가 액세스할 수 있습니다. 실제로 프로젝트가 완료되었습니다 :-)

Frontend repository , 웹사이트 https://specialtycoffee.cy/ .

세 번째 섹션에서는 Telegram 봇을 만드는 방법에 대해 살펴보겠습니다.