node.js ✖️ express.js ✖️ mysql 웹 응용 프로그램heroku가 공개될 때까지 방법

#이 기사가 할 수 있는 일
node.expressjs를 사용하면 mysql의 프로그램이heroku에 공개될 수 있습니다.
특히 노드.heroku depro를 사용할 때 mysql와 어떻게 연결해야 좋을지 상당히 막혔기 때문입니다.
총결산
# 참조 기사
기본 설계의 참고문
Vue.js로 만든 프로그램을 Heroku로 설계했습니다.
heroku에 업로드된 파일에서 mysql을 사용할 때 참고글
①
②
① heroku에서cleardB를 사용하는 방법의 기본 애니메이션
② 실제 데이터베이스에 넣은 값을 표시하기 전의 애니메이션
##① 로컬 개발

웹 응용 프로그램 VScode 설명 전 준비

mkdir hellotaro
cd hellotaro

github로 창고 만들기(README 미리 만들기)
URL 복사
종착역 상태에서

git init
git clone [githubのリポジトリのURL([]この外側のカッコは不要]]

이githubu의 창고와 파일의 링크가 완료되었습니다.
앞으로github를 통해 진전을 관리할 수 있습니다.

VScode 계속 사용

터미널 (hello-taro 디렉터리 내)
이게 패키지야.제작 json

npm init -y

상기 내용에 따라 파일 만들기"main": "index.js",서버에서 관리하는 파일의 이름은 app입니다.js 등 별명을 사용할 때 app를 사용합니다.js 같은 걸로 바꾸는 게 좋을 것 같아요.

express.js와 mysql의 준비

실행

{
  "name": "hello-taro",
  "version": "1.0.0",
  "description": "herokuでmysqlを扱う練習",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "githubのURLが記載"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/ユーザー名/hello-taro/issues"
  },
  "homepage": "https://github.com/ユーザー名#readme"
}

(끝의-save는 지금 하지 않아도 묵인하는 것처럼 할애한다. 참고: npm install-save
다양한 모듈을 추가합니다.package.json에서

npm install express

이 추가되었습니다.
mysql 설치

"dependencies": {
    "express": "^4.17.1"

packgage.json에서 "mysql": "^2.18.1"추가되다.
※ mysql 사용 시 생략하지만, 사전에 홈brew 등 장치에 mysql 설치
참조:
https://reffect.co.jp/node-js/express-js-connect-mysql#MySQL-4
https://reffect.co.jp/laravel/mysql-laravel-in-mac
#### 칼럼
package.json의 기술을 밖에서 복사해서 npm init를 실행하면 이 기술과 상응하는 모듈의 모습을 설치할 수 있습니다 (이 부분은 의심스러운 점이 있습니다)
여기까지의 패키지.json

npm install mysql

VS코드로 코드 쓰기

index.js

{
  "name": "hello-taro",
  "version": "1.0.0",
  "description": "herokuでmysqlを扱う練習",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ユーザー名/hello-taro.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/ユーザー名/hello-taro/issues"
  },
  "homepage": "https://github.com/ユーザー名/hello-taro#readme",
  "dependencies": {
    "express": "^4.17.1",
    "mysql": "^2.18.1"
  }
}

설명
터미널에서 실행

const express = require('express')
var mysql = require('mysql')
const app = express()


var port = process.env.PORT || 5000;

app.get('/',(req, res)=>{
    
      res.send('helloえくすぷれす');
  })

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

한 후 포트 5000호에 "hello 숨김"을 표시합니다

###해설

const express = require('express')
const mysql = require('mysql')
const app = express()

express.처리 jsconst mysql = require('mysql')에서 mysql을 처리합니다.
이것은 기본 설명입니다

중요

로컬 시작 시 이 섹션var port = 3002대응할 수 있지만,heroku의 depuro에서process.env.PORT || 5000;사용하다.

var port = process.env.PORT || 5000;

방문 루트 "/"에서 Hello를 호출할 때 숨겨진 설명을 설명합니다
app.listen () 을 통해 포트를 읽고 실행합니다.
이로써 웹 응용 프로그램의 로컬 기술이 완성되었습니다
## ② heroku 공개(mysql 사용하지 않는 상태)
※ 헤로쿠의 사전 등록 완료
로그인 내용은 할애(Google에 기사가 많음)

VScode 새로 제작된 Procefile

(Procefile은 heroku로 서버를 시작할 때 필요한 것입니다.
"node index.js"의 내용을 설명하는 local로 서버를 시작하는 파일)
Procfile
Procefile과 패키지를 분리합니다.json에 도달한script

app.get('/',(req, res)=>{
    
      res.send('helloえくすぷれす');
  })

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

※ 위와 같이 기술된 기사는 봤지만, 이번엔 필요 없음 ※

hello-taro 디렉터리의 터미널에서heroku 응용 프로그램을 만듭니다

web: node index.js

프로그램을 만들 때heroku 계기판에 만든 프로그램 이름을 표시합니다

디자인

단말기

//今回この内容は使用しません
  "scripts": {
    "start":"node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
//今回この内容は使用しません

성공 후 터미널 시작

이런 기술을 표시합니다. https://hello-taro.herokuapp.com/ deployed to Heroku링크를 클릭하면 공개 여부를 확인할 수 있습니다.
참고로 git push heroku 마스터에 오류가 발생했을 때,github의 지정한 지점 (기본적으로 마스터) 에서push를 한 번 더 업데이트하십시오
시도할 수 있다git push heroku master.
위 업로드heroku(mysql 미사용) 완료
## ③ heroku의cleardB를 사용하여 mysql에서 사용 가능
※ clearDB 사용 시 허루쿠 전 신용카드 등록 필요

cleardB 가져오기~heroku 계기판의 대응

단말기
실행

heroku login
heroku create hello-taro//ここのcrate以下の記載は任意（入力なしだとランダム名になる）

이 조작으로 igitte 계획 (clearDB의 무료 계획) 에 등록됨
순조롭게 완성되면cleardB는heroku 계기판의 해당 응용 프로그램 Resources에 로그인합니다

계기판의 Settings를 한층 더 확인하다

이 화면으로 이동
중간 Config Vars의 Reveal Config Vars 선택

위 화면 열기
여기는 현재 상황입니다.CLEARDB_DATABASE_URL확인은 기술만 했어요.
터미널로 돌아가기
실행

git add .
git commit -m '任意のコメント'
heroku git:remote -a hello-taro //hellotaro部分は自分のherokuのアプリ名を入れる
git push heroku master

.
현재 프로그램에서 사용되는cleardB의 mysql 항목의 로그인 내용을 확인할 수 있습니다
디스플레이 결과는 다음과 같습니다.

heroku addons:create cleardb:ignite

위의mysql://ユーザー名:パスワード@ホスト名/データベース名?reconnect=true지금부터 사용을 시작하겠습니다.
여기mysql://ユーザー名:パスワード@ホスト名/データベース名?reconnect=true파일 복사
실행

heroku config | grep CLEARDB_DATABASE_URL

일단 성공하다
아까 화면에.URL 추가

이로써heroku 계기판의 대응 종료

DB 준비

table plus라는 sql 관리 GUI 도구를 사용합니다.
이 프로그램의 내용을 미리 다음과 같이 정리하면 이후의 기술이 더욱 사용하기 쉽다

//ターミナル画面
あなたのmac@Mac hello-taro % heroku config | grep CLEARDB_DATABASE_URL
CLEARDB_DATABASE_URL: mysql://ユーザー名:パスワード@ホスト名/データベース名?reconnect=true

테이블 더하기 기호를 열고 "Createa new connection"을 통해 새 연결을 만듭니다.

mysql 선택

Name: 임의로 OK (이번엔 디렉터리와 같은 이름으로 hello-taro)
heroku에 등록된 호스트 이름
User:heroku에 등록된 사용자 이름
로그인 암호
위의 내용을 입력하고 Connect 선택

DB 선택 화면을 선택할 때 Herroku에서 자동으로 만든 DB 이름이 등록되어 있기 때문에 이 DB를 선택하고 엽니다

이번에 Hello Table을 표시하기 위해서 testTable를 만들었어요.

제작된 테이블의 데이터는 위에서 말한 바와 같다
테스트 데이터 직접 입력

테이블 플러스 준비 완료

VScode에 데이터베이스 연결에 대한 설명을 쓰십시오

index.js를 다음 내용으로 변경

heroku config:set DATABASE_URL='mysql://ユーザー名:パスワード@ホスト名/データベース名?reconnect=true'

상세 설명

mysql://
bdc03c01341ef9 //ユーザー名
:
b01bd8f4 //パスワード
@
us-cdbr-east-02.cleardb.com //ホスト名
/
heroku_e21642c342a4850 //DB名
?reconnect=true

heroku의cleardB를 통해 얻은 값을 입력하십시오

const express = require('express')
var mysql = require('mysql')
const app = express()

//ここを追加=============================
const connection =
   mysql.createConnection({
      host:'us-cdbr-east-02.cleardb.com',
      user:'bdc03c01341ef9',
      password:'b01bd8f4',
      database:'heroku_e21642c342a4850'
   });
//============================================


var port = process.env.PORT || 5000;

app.get('/',(req, res)=>{
//ここを追加===================================================
connection.query('SELECT * FROM test',(error,results)=>{
    res.send('hello'+results[0].name+':'+results[0].text);
      console.log(results)
      console.log(results[0])
      console.log(results[0].name)
      console.log(results[0].text)
  })
//===============================================
  })

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

get의 설명에서 SELECT 문구를 사용하여test표의 값을 얻습니다.
얻은 값은 매개 변수results에 저장됩니다
DB에서results 값을 가져오고 표시해야 하기 때문에 컨트롤러에서 값이 있는지 확인합니다.
획득한 값은 다음과 같다.

아까 테이블 플러스에 저장된 값을 알고 있습니다.
이 상태node index.js포트 5000호

표시
로컬 검사는 이것으로 끝냅니다.
여기서 헤로쿠로 올리세요.
방법은 위에서 언급한 Heroku를 업로드하는 것과 같다

const connection =
   mysql.createConnection({
      host:'us-cdbr-east-02.cleardb.com',
      user:'bdc03c01341ef9',
      password:'b01bd8f4',
      database:'heroku_e21642c342a4850'
   });

눌렀을 때 URL에도 Hello Traw: 부드러움
지금까지 노드였습니다.js x express.heroku 프로그램을 사용할 수 있습니다.
여기에 적용하면 더 큰 규모의 앱에 공개할 수 있을 것 같다.