단계별 React, NodejS 및 MySQL 단순 전체 스택 애플리케이션 2018(부품: 6)

이 글에서는 파트 5의 버그를 해결하고 Github에 업로드하고 heroku.com에 프로젝트를 보여주려고 합니다.

이제 프로젝트의 첫 번째 버전을 Github 및 Heroku에 배포하기 전에 스타일을 지정하고 프로젝트를 단계별로 개선할 수 있습니다.
첫 번째: Github.com으로 이동하여 프로젝트 계정을 만드세요.
Github는 Git을 사용하여 버전 관리를 위한 웹 기반 호스팅 서비스입니다. 주로 컴퓨터 코드에 사용됩니다. 자체 기능을 추가할 뿐만 아니라 Git의 모든 분산 버전 제어 및 소스 코드 관리(SCM) 기능을 제공합니다. 모든 프로젝트에 대한 액세스 제어 및 버그 추적, 기능 요청, 작업 관리 및 위키와 같은 여러 협업 기능을 제공합니다.
터미널에서 클라이언트 폴더를 열고 npm 실행 빌드 명령을 사용하여 배포할 준비를 합니다.

GitHub 계정을 열고 저장소 탭으로 이동하여 새 버튼을 눌러 프로젝트에 대한 새 저장소를 만듭니다.



리포지토리 이름을 입력하고 체크리스트가 있는 README로 이 리포지토리 초기화를 추가한 다음 .gitignore 버튼을 눌러 배포할 노드 모듈 폴더를 무시합니다. 따라서 프로젝트 다운로드 및 업로드가 더 빨라지지만 VSCode에서 (npm install) 명령으로 프로젝트를 다운로드한 후 기억하십시오. 터미널은 프로젝트의 모든 요구 사항과 함께 node-module 폴더를 추가해야 합니다. 텍스트 상자에 노드를 입력하고 리포지토리 생성 버튼을 누릅니다.



이제 heroku 웹사이트에서 계정을 개설하세요(Heroku는 개발자가 클라우드에서 완전히 애플리케이션을 구축, 실행 및 운영할 수 있게 해주는 PaaS(Platform as a Service)입니다: www.heroku.com)

그런 다음 대시보드에서 새 버튼을 누른 다음 heroku 새 앱을 설정하기 위한 새 앱 버튼을 만듭니다.


다음 단계:


이제 배포 탭에서 github 버튼을 클릭하고 검색 장소에서 github 저장소를 찾으십시오.



그런 다음 연결 버튼을 누릅니다.
이제 페이지 하단에서 (자동 배포 활성화)를 클릭하여 github에서 변경 후 앱을 자동으로 배포합니다.
다음 단계는 리소스 탭으로 이동하여 heroku 앱에 mysql 데이터베이스를 추가하는 것입니다.
jawsDB mysql 무료 버전을 추가하는 것을 잊지 마십시오.

그런 다음 mysql을 클릭하여 다른 페이지로 이동하여 heroku mysql 사용자 이름과 암호에 액세스합니다.

이제 연결 문자열을 복사하여 프로젝트 내부에 mySql 데이터베이스 주소로 붙여넣어야 합니다. 따라서 app.js의 33-38행에 있는 코드 아래에 있습니다.

const connection = mysql.createConnection({
  host: 'localhost',
  user:'root',
  password:'myjs123',
  database:'simple-react-sql-db'
});

호스트 사용자 암호와 연결 문자열의 데이터베이스 주소로 변경해야 합니다.
이제 애플리케이션을 테스트하여 제대로 작동하는지 확인하십시오.
지금 매핑할 새 데이터베이스에 사용자 테이블이 없기 때문에 이 오류를 확인해야 합니다. 따라서 MySQL 워크벤치에서 홈 탭으로 이동하여 heroku 데이터베이스를 추가하고 새 데이터베이스에 테이블을 추가하십시오.

이제 heroku 앱 데이터베이스에 테이블 복사 및 붙여넣기 문이 있는 localhost 데이터베이스에서 heroku에 해당 테이블을 가질 수 있습니다.


이제 데이터를 데이터베이스에 삽입하십시오.

마지막 변경 사항은 html-routes.js 파일의 백엔드 경로 폴더에 있습니다. 데이터베이스 이름을 heroku 앱 데이터베이스로 변경해야 합니다.

응용 프로그램을 다시 테스트하면 오류 없이 작동합니다.
이제 우리는 프로젝트를 빌드해야합니다 ...