내가 프리랜서가 되었을 때, 나는 배치를 두려워했다.창업 회사의 직원으로서 만약 어떤 문제가 생기면 나는 항상 동료들과 함께 즐길 수 있다.이것은 사치이다. 나는 더 이상 선택이 없을 때만 그것을 감상할 수 있다. 왜냐하면 지금 나는 주로 나 자신에게 의지해서 일하기 때문이다.그러나 고용인에서 프리랜서로의 변화도 나로 하여금 또 다른 것을 깨닫게 했다.
배치가 무서워 보일 수도 있지만 꼭 그렇지는 않다.
사실 이 강좌는 네가 다음 임무를 쉽고 빠르게 완성할 수 있다는 것을 증명할 것이다.Heroku에 배치된 js 응용 프로그램입니다.
이 자습서의 전제 조건:

지트

Heroku 계정(없으면 계정 만들기here

Heroku CLI(설정하지 않은 경우 먼저 사용here

노드js가 설치되어 있습니다. (본문을 작성할 때 Node.js 10.13 이상 버전이 필요합니다. 더 많은 정보는 Nexts.js - Getting Started

(선택 사항) 다음을 생성합니다.만약 당신이 아직

이 글을 읽고 있다면 로컬 호스트에서 실행할 가능성이 높다고 가정합니다.하지만 100% 확실한 건, 내가 어떻게 설정하는지 알려줄게.

npx create-next-app

# OR

yarn create next-app

생성 설정이 완료되면 개발 서버를 시작할 수 있습니다.

1. 소포를 업데이트합니다.json

Heroku는 dynos라는 Linux 컨테이너에서 응용 프로그램을 실행합니다.Heroku가 웹dyno를 실행할 때 $PORT라는 변수를 설정합니다.전송 요청을 받으려면 이 포트에 귀속해야 합니다.
이렇게 하려면 루트 패키지로 이동하십시오.json 및 시작 스크립트 업데이트:

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p $PORT"
  }

팁: 다양한 유형의 다이노와 작동 원리에 대한 자세한 내용은 Heroku의 설명서here를 참조하십시오.

2. 코드를git에 제출

우선, Git를 사용하여 코드를 Heroku로 전송할 것입니다.이것이 바로 응용 프로그램을git 리콜 프로토콜로 전환해야 하는 이유입니다. (만약 그렇지 않다면.)

git init
git add .
git commit -m "Initial commit"

3. Heroku 응용 프로그램 만들기

이 작업을 수행하려면 Heroku CLI(명령 Heroku login 사용 가능)에 로그인해야 합니다.완료되면 응용 프로그램을 만들 수 있습니다.

heroku create $APP_NAME

4. 코드를 Heroku 응용 프로그램에 밀어넣기

코드를 커밋하고 Heroku 응용 프로그램을 만든 후 이 코드를 응용 프로그램에 밀어넣을 수 있습니다.

git push heroku master

알림: 만약 당신이 있는 지점이 마스터 (예를 들어main이나 제품) 가 아니라면 다음과 같은 방식으로 코드를 전송할 수 있습니다.

git push heroku [your branch name]:master

배포가 완료되면 https://[app NAME]를 통해 응용 프로그램에 액세스할 수 있습니다.히로쿠프.com/.
봐라!

이 가능하다, ~할 수 있다,...

1) 오류 R10(시작 시간 초과) ->웹 프로세스가 시작 후 60초 이내에 $PORT에 바인딩하지 못했습니다.

당신의 코드를 제출했습니다. 이 코드를 Heroku 프로그램에 전송하고, 탭을 열어 새로운 반짝이는 프로그램을 보십시오. 그리고...아무것도 담을 수 없다.더 심각한 것은 오류가 발생했다는 소식을 받게 될 것이다.
먼저 다음 명령을 실행하여 로그를 확인합니다.

heroku logs --tail

그리고 빵!

Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

당황하지 마.소프트웨어 패키지를 업데이트하는 것을 잊어버릴 가능성이 가장 높습니다.json.이 파일을 되돌려줍니다. 시작 스크립트에 필요한 -p$포트가 있는지 확인하십시오.

2) 생성 캐시를 찾을 수 없습니다.복구 속도를 높이기 위해 캐시 생성 구성

코드를 Heroku로 전송하고 프로그램이 구축되고 있을 때 이 점을 볼 수 있습니다.이것은 잘못이 아니라 경고이다.이것은 프로젝트에 영향을 주지 않지만, 비교적 느린 구축을 초래할 수 있습니다.자세한 내용은 Next.js documentation on the subject를 참조하십시오.
이 문제를 해결하려면 패키지로 이동하십시오.json 및 다음을 추가합니다.

"cacheDirectories": [".next/cache"]

배포 후 팁 및 팁

배치가 완료되면 프로그램이 순조롭게 실행되기 위해 설정해야 할 사항이 아래에 열거되어 있습니다.

Heroku에서 환경 변수 설정하기

Heroku에서 환경 변수를 설정하는 방법에는 두 가지가 있습니다.

1) 종점 통과

먼저 모든 변수를 볼 수 있습니다.

heroku config

#If you just created your app, the result will probably be blank

새 변수를 설정합니다.또한 애플리케이션을 다시 시작합니다.

heroku config:set FOO=bar

변수를 삭제하려면 다음과 같이 하십시오.

heroku config:unset FOO

2) 대시보드 통과

환경 변수를 추가/편집/삭제하는 또 다른 방법은 대시보드를 통해 수행할 수 있습니다.
https://dashboard.heroku.com/apps 로 돌아가서 프로그램을 선택하십시오.설정으로 이동합니다.Config Vars 에서 원하는 대로 변경할 수 있습니다.

자동 배포

Github 계정이 있으면 Heroku의 자동 배치 기능에 관심이 있을 수 있습니다.즉, 변경 사항을 특정 지점 (예: 생산 부서) 으로 전송할 때마다 변경 사항은 자동으로 Heroku 응용 프로그램으로 전송된다는 뜻이다.
이렇게 하려면 대시보드로 이동하여 응용 프로그램을 선택합니다.Deploy 탭에서 배치 방법을 찾습니다.

그곳에서 Github 계정을 연결할 수 있습니다.완료되면 저장소와 분기를 선택할 수 있습니다.
만약 네가 이 문장을 좋아한다면, 너는 할 수 있다.