nuxt로 만든 앱을 heroku에 배포

요 전날 nuxt.js에서 만든 앱을 heroku에 배포했으므로 메모로 작성했습니다.

전제

하드웨어

・macbook pro13　m1칩 비탑재

소프트웨어

· macOS bi sur 11.3
· nuxt 2.14.6
・패키지 매니저:yarn

작업 개요

일반적으로 다음 작업을 수행하면 배포할 수 있습니다.
내가 막힌 점은 ⑥⑦입니다만, 에러 내용은 후술합니다.

①heroku 계정 생성
②heroku cli 도입
③heroku에 로그인
④ heroku에서 앱 만들기
⑤ 환경 변수 설정
⑥Procfile 만들기
⑦.gitignore 설정
⑧ 배포

작업 상세

①heroku 계정 생성

htps : // jp. 헤로쿠. 코m/ 방문하여 계정 만들기

②heroku cli 도입

아래의 코드를 실행, 실행이 끝난 경우는 패스해 문제 없습니다.$ brew install heroku/brew/heroku

③heroku에 로그인

아래 코드 실행$ heroku login
실행하면 로그인 할 것인지 확인되므로 enter 키를 실행하십시오

Log In을 클릭하여 터미널로 돌아갑니다.
터미널의 표시가 아래와 같으면 OK입니다.
Logged in as <メールアドレス>

④ heroku에서 앱 만들기

아래 명령을 실행하십시오. <앱 이름>에 원하는 이름을 설정하세요.
그러나 이미 존재하는 것은 등록할 수 없으므로 여러 번 조정해야 합니다.$ heroku create <アプリの名前>

⑤ 환경 변수 설정

아래 명령도 터미널에서 실행하십시오.

※ 브라우저에서 heroku에 로그인하여 작성한 앱의 "settings"의 "Config Vars"에서도 변경할 수 있습니다.
$ heroku config:set NPM_CONFIG_PRODUCTION=false
$ heroku config:set HOST=0.0.0.0
$ heroku config:set NODE_ENV=production

⑥Procfile 만들기

앱 바로 아래에서 파일 이름 "Procfile"을 만듭니다.
yarn lock과 같은 계층입니다. 확장자는 필요하지 않습니다.
설명 내용은 아래의 한 줄입니다.
web: yarn start
※패키지 매니저에 따라 다릅니다.
자신의 package.json을 확인하십시오."scripts": {
"start": "nuxt start",
"generate": "nuxt generate",
},


⑦.gitignore 설정

.nuxt, dist를 gitignore에서 제거하십시오.

이 작업이 완료되지 않으면 아래와 같이 오류가 발생합니다.

2021-05-01T04:46:13.991279+00:00 app[web.1]: │                                                                                 │
2021-05-01T04:46:13.991279+00:00 app[web.1]: │   ✖ Nuxt Fatal Error                                                            │
2021-05-01T04:46:13.991280+00:00 app[web.1]: │                                                                                 │
2021-05-01T04:46:13.991280+00:00 app[web.1]: │   Error: Output directory `dist/` does not exists, please use `nuxt generate`   │
2021-05-01T04:46:13.991280+00:00 app[web.1]: │   before `nuxt start` for static target.                                        │
2021-05-01T04:46:13.991281+00:00 app[web.1]: │                                                                                 │
2021-05-01T04:46:13.991281+00:00 app[web.1]: ╰────────────────────────────────────────────────────────────────────────���────────╯

⑧ 배포

아래 명령을 실행하십시오. git 환경에 따라 마지막은 master에서 오류가 발생합니다.
이 경우 master를 main으로 변경하여 실행해보십시오.
$ git push heroku master
잠시 시간이 걸리지만 오류가 발생하지 않으면 $ heroku open 를 실행하여 앱을 엽니다.

그건 그렇고, 내가 배포 한 응용 프로그램은 여기입니다.
h tps // 아마이몬-으로 시시온. 어리석은 p. 코m/