Vue Storefront 2를 Heroku에 배포하는 방법 🚀

이 기사에서는 Vue Storefront 2 애플리케이션을 Shopify와 Heroku에 통합하여 5분 만에 배포하는 과정을 안내합니다!

Vue Storefront란 무엇입니까?

Vue Storefront은 헤드리스 상거래를 위한 초고속 프런트엔드 플랫폼입니다. Vue Storefront를 사용하여 사이트 성능을 높이고 고객 여정을 형성하며 개발자의 창의성을 자유롭게 하십시오. 마지막 프런트엔드입니다.

암호

새로운 Vue Storefront 2 프로젝트를 생성하기 위해 가장 먼저 해야 할 일은 다음 명령으로 CLI를 실행하는 것입니다.

npx @vue-storefront/cli init

CLI는 프로젝트 이름과 원하는 통합에 대해 묻습니다.



이 자습서에서는 다음 스크린샷에 표시된 대로 Shopify를 선택했습니다.



프로젝트 구조는 다음과 비슷해야 합니다.



이제 다음을 실행하여 필요한 종속 항목을 모두 설치해 보겠습니다.

yarn

그리고 개발 모드에서 프로젝트를 실행하여 예상대로 작동하는지 확인합니다.

yarn dev

http://localhost:3001가 포함된 브라우저 탭을 열면 다음 결과가 표시되어야 합니다.



애플리케이션이 작동하기 위해 마지막으로 변경해야 할 사항은 환경 변수를 APP_PORT에서 PORT에서 nuxt.config.ts로 바꾸는 것입니다.

  server: {
    port: process.env.PORT || 3001, // Previously process.env.APP_PORT
    host: '0.0.0.0'
  },

이렇게 하면 Heroku가 프로젝트를 올바르게 빌드하고 적절한 포트에서 서비스할 수 있습니다.

헤로쿠

Vue Storefront를 Heroku에 배포하려면 설명된 heroku CLI를 설치해야 합니다here.

그동안 Heroku 인스턴스에 필요한 환경 변수를 설정할 수 있습니다.



더 쉬운 테스트를 위해 아래에 복사하겠습니다.

BASE_URL=vsf-heroku.herokuapp.com
HOST=0.0.0.0
SHOPIFY_DOMAIN=vsf-next-pwa.myshopify.com
SHOPIFY_STOREFRONT_TOKEN=03f21475b97c18fa05c0ab452c368af4

다음으로 다음 명령을 사용하여 Vue Storefront 프로젝트에서 로그인해야 합니다.

heroku login

우리가 좋아하는 이름으로 heroku에 대한 원격 git을 추가해 보겠습니다.

heroku git:remote -a vsf-heroku

마지막으로 준비가 되었으면 새 코드를 heroku 브랜치에 푸시할 수 있습니다.

git push heroku main

모든 것이 예상대로 진행된 경우 https://vsf-heroku.herokuapp.com/를 방문하면 다음 결과가 표시됩니다.

요약

잘했어요! 방금 Heroku에 Vue Storefront 2 애플리케이션을 배포하고 호스팅했습니다! 통합 및 모듈로 애플리케이션을 확장할 수 있는 방법을 확인하려면 지금 바로 Vue Storefront docs을 확인하는 것이 좋습니다.