이것은 Magic and Stripe 시리즈로 유료 회원 사이트 구축의 마지막 부분입니다. 계속하기 전에 다음 문서를 읽으십시오.

Stripe and Magic을 설정합니다.

.

.

Heroku에 배포

프로젝트 만들기

🚀 Heroku에 앱을 배포하고 싶으십니까? 먼저 install the Heroku CLI . 그런 다음 heroku create를 실행하여 새 Heroku 프로젝트를 생성합니다. 아래 표시된 것과 유사한 Heroku 앱 URL을 반환합니다.

$ heroku create

Creating app... done, ⬢ cryptic-waters-25194
https://cryptic-waters-25194.herokuapp.com/ | https://git.heroku.com/cryptic-waters-25194.git

구성 변수(.env) 설정

이제 앱에 대한 프로덕션 .env 변수를 설정해 보겠습니다. Heroku에서 새 프로젝트를 찾고 설정으로 이동합니다. Heroku에서는 Config Vars 아래에 .env 변수를 설정했습니다. Reveal Config Vars를 클릭하고 클라이언트 및 서버 측 환경 변수를 모두 입력하십시오.

Server.js 업데이트

Heroku가 앱을 빌드하는 방법을 알 수 있도록 다음을 server.js 파일에 추가하십시오.

/* File: server.js */

// For heroku deployment
if (process.env.NODE_ENV === 'production') {
  app.use(express.static('client/build'));
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  });
}

패키지.json 업데이트

package.json 에서 scripts 개체에 다음을 추가합니다.

/* File: The server's package.json */

"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"

이제 다음 명령을 실행하여 애플리케이션을 배포할 수 있습니다.

$ git add .
$ git commit -m 'your message'
$ git push heroku master

Heroku에서 라이브 앱에 대한 링크를 제공했어야 합니다. 축하해요! 🎉

아웃트로

오늘은 여기까지입니다! Stripe x Magic에 대한 더 많은 튜토리얼(예: 구독 멤버십 웹사이트를 만드는 방법)을 원하시면 아래 댓글 섹션에 알려주십시오.

다음 시간까지 🙋🏻‍♀️ ♡.