Heroku에 Rails API/React 애플리케이션 배포하기, 2부: 프런트엔드 배포

히어로쿠! 애플리케이션의 Rails API 백엔드를 Heroku에 배포한 후 여기까지 왔을 것입니다. 아직 안 했어? 보시고 다시 오세요.



백엔드 앱의 URL이 필요하므로 미리 준비해 두십시오.

4단계: Rails 프런트엔드 준비

앱이 Heroku에게 거절하지 않도록 합시다. (나는 절대 멈추지 않을 것이고, 당신은 나를 만들 수 없습니다.)

4.1 새 지점 만들기

당신은 당신의 백엔드를 위해 그것을 했다, 다시 하자. 로컬 리포지토리에 새 분기를 만들고 원격으로 푸시합니다. 일관성을 위해 기본이라고 부르지만 원하는 이름을 선택할 수 있습니다. 나중에 이 분기를 사용하여 GitHub에서 자동 배포할 것입니다.

$ git checkout -b main
$ git push -u origin main

4.2 업데이트 작업

백엔드 API에서 정보를 가져오는 모든 작업을 업데이트합니다. localhost를 사용하는 코드를 찾고 있습니다. URL을 새 Heroku 앱 도메인으로 바꿉니다.

myActions.js

export const updateListing = (listingUpdateData, listingId) => {
    return dispatch => {
        const listing = {listing: listingUpdateData}
        return fetch(`https://your-app-name.herokuapp.com/${listingId}`, {
            method: "PATCH",
            headers: {
              "Content-Type": "application/json"
            }, body: JSON.stringify(listing)
          })
        .then(response => response.json())
        .then(resp => {
            if(resp.errors){
                alert(resp.errors)
            } else {
                dispatch(editListing(resp.data))
            }
        })
    }
}

5단계: 프런트엔드 Heroku 앱 만들기

Heroku CLI 또는 Heroku 웹 애플리케이션 내에서 이 작업을 수행할 수 있습니다.

다음 부분은 Heroku CLI를 사용하려는 경우에만 해당됩니다.
CLI의 repo 디렉토리 내에서:

$ heroku create app-frontend --buildpack https://github.com/mars/create-react-app-buildpack.git
$ git remote add heroku [email protected]:app-frontend.git 

웹 앱을 사용하려는 경우:

로그인

새로 만들기 > 새 앱 만들기: app-frontend

설정 > 빌드팩 > 추가 > https://github.com/mars/create-react-app-buildpack.git

어떤 방식으로 애플리케이션을 생성하든 GitHub에서 자동 배포하도록 선택하는 것이 좋습니다.

배포 방법 > GitHub에 연결

프런트엔드 React GitHub 리포지토리 찾기

위에서 생성한 브랜치를 선택합니다(제 예에서는 main을 사용했습니다)

자동 배포 활성화

내 앱을 처음 배포하려고 시도했을 때 내 앱이 매우 손상되었습니다. 정신없이 인터넷 검색을 한 후 this 을 찾았는데 루트 디렉터리에 static.json 파일을 만들도록 지시합니다.

정적.json

{ "root": "build/", "routes": { "/**": "index.html" } }

이 응용 프로그램을 처음 만들 때 패키지 관리자 필드를 재생하고 있었기 때문에 yarn.lock 파일과 package-lock.json 파일도 있었습니다. 필요한 패키지가 npm 명령으로 추가되었는지 확인한 후 yarn.lock 파일을 삭제했습니다.

전반적으로 알고 있었다면 프런트엔드 배포가 훨씬 쉬웠을 것입니다.

질문, 의견, 현명한 발언? 배포가 순조롭게 진행되길 바랍니다! 내가 놓친 것이 있다고 생각되면 알려주세요!