PROJECT

[AWS] μžλ°”μ½”λ“œμ—†μ΄ REACT μ—μ„œ RDS 에 μžˆλŠ” 데이터 κ°€μ Έμ˜€κΈ°. μ§„μ§œ AtoZ

thovy 2022. 11. 21. 04:26
728x90
λ°˜μ‘ν˜•
SMALL

μ‹œμž‘ πŸ‘Š

μ„±κ³΅ν•΄μ„œ 이 글을 μ“°κΈ° κΉŒμ§€ 3μΌμ΄λ‚˜ κ±Έλ Έλ‹€. 맀일 μƒˆλ²½ 4μ‹œκΉŒμ§€ ν‚€λ³΄λ“œ λΆ€μ…”κ°€λ©΄μ„œ 502 504 와 μ”¨λ¦„ν–ˆμ§€λ§Œ. μ—λŸ¬μ˜ 원인은 λ‚΄κ°€ μƒκ°ν•˜λ˜ 것듀이 μ•„λ‹ˆμ—ˆλ‹€. μ „λΆ€.

기본이 맀우 μ€‘μš”ν•˜λ‹€λŠ” κ±Έ κΉ¨λ‹«λŠ” 3μΌμ΄μ—ˆλ‹€.

μš°μ„  λ‚˜λŠ” μžλ°”μ½”λ“œ 없이 react 만으둜 νŽ˜μ΄μ§€λ₯Ό λ§Œλ“€κ³  μ‹Άμ—ˆκΈ° λ•Œλ¬Έμ—
μžλ°” api 와 λ°μ΄ν„°λ² μ΄μŠ€ κ°€ μ—†λ‹€. mysql 도 μ‚¬μš©ν•˜μ§€ μ•Šμ•˜λ‹€.

ν•˜μ§€λ§Œ λ°μ΄ν„°λ² μ΄μŠ€μ˜ ν•„μš”μ„±μ„ 느꼈고 RDS λ₯Ό λ§Œλ“€μ—ˆμ§€λ§Œ, RDS λ§Œλ“€κΈ°
λκΉŒμ§€ μΈν…”λ¦¬μ œμ΄λ₯Ό 켜기 μ‹«μ—ˆκΈ° λ•Œλ¬Έμ— RDS 둜 λ°”λ‘œ μ—°κ²°ν•  순 μ—†λ‚˜? ν•΄μ„œ 3μΌλ™μ•ˆ 끙끙 μ•“μ•˜λ‹€.

νŠΉλ³„ν•˜κ²Œ
λ‚΄κ°€ μ‚¬μš©ν•˜κ³  μžˆλŠ” 건
λ‚˜λŠ” TS , http-proxy-middleware λ₯Ό μ‚¬μš©ν•œλ‹€. 그리고 μ•žμœΌλ‘œ express 와 mysql 을 μ‚¬μš©ν•  κ±°λ‹€.
이게 이 νŒŒνŠΈμ—μ„œ μ€‘μš”ν•œ 것듀이고 λ‚˜λ¨Έμ§„ 뭐 달라져도 상관 없을 것 κ°™λ‹€.

μ§„μ§œ μ‹œμž‘ πŸ‘Š

κΉ”μ•„μ•Όν•  것듀이 μžˆλ‹€.

  1. express
    npm install express

  2. mysql
    npm install mysql

  3. 그리고 λ‚˜μ€‘μ— crypt κ°€ μ—†λ‹€λŠ” μ—λŸ¬κ°€ λ‚  μˆ˜λ„ μžˆλŠ”λ° λ§Œμ•½ κ·Έλ ‡λ‹€λ©΄
    npm install bcrypt

    ν•˜μ§€λ§Œ (κΈ°μ΄ˆμ§€μ‹μ΄ μ—†λŠ”) λ‚΄κ°€ 봀을 땐 crypt ν•„μš”μ—†λ‹€. μ—λŸ¬λ‚˜λ©΄ κ·Έ λ•Œ κΉ”μž.

μ„€μΉ˜ 끝

μ§„μ§œ μ§„μ§œ μ‹œμž‘ πŸ‘Š

μ„œλ²„λ§Œλ“€κΈ°

  1. server 폴더λ₯Ό λ§Œλ“ λ‹€.

    config μ•ˆ λ§Œλ“€μ–΄λ„ λœλ‹€. ν•„μš”μ—†λ‹€.

  2. express 둜 test λ₯Ό ν•΄λ³Έλ‹€. 일단 λ¨Όμ € μ„œλ²„κ°€ λ˜μ•Όν•˜λ‹ˆκΉŒ.

  3. server.js λ₯Ό λ§Œλ“ λ‹€. tsλŠ” μ•ˆλœλ‹€.

    // server.js
    // express λͺ¨λ“ˆ 호좜
    const express = require('express');
    const app = express();
    const PORT = process.env.PORT || 4000;
    

// localhost:4000 으둜 μ ‘μ†ν•˜λ©΄ μ‘λ‹΅ν•˜λŠ” api
app.get('/', (req,res) =>{
res.send( {test:'Server Response Success'} );
})

// vscode 터미널에 찍힐 log
app.listen(PORT, () => {
console.log(Server run : http://localhost:${PORT}/)
})

// λͺ¨λ“ˆ 내보내기
module.exports = app;


4. μ΄λ ‡κ²Œ ν•΄μ„œ μƒˆλ‘œμš΄ 터미널을 μ—΄μ–΄μ„œ
```bash
C:\Users\ ... \project> cd server
C:\Users| ... \project\server> node server.js

λ₯Ό μž…λ ₯ν•΄ server ν΄λ”μ—λ“€μ–΄κ°€μ„œ server λ₯Ό μΌœμ€€λ‹€.

  1. κ·Έλ ‡κ²Œ 되면, ν„°λ―Έλ„μ—μ„œλŠ” Server run : http://localhost:4000/ 이 좜λ ₯되고
  2. μ›Ή λΈŒλΌμš°μ €μ—μ„œ localhost:4000 에 μ ‘μ†ν•˜λ©΄ {test:Server Response Success} κ°€ 좜λ ₯λ˜μ–΄μžˆμ„ κ±°λ‹€.

λ”°λž€~!

μ„œλ²„μ— React μ—°κ²°ν•˜κΈ°

μ„œλ²„λŠ” λ§Œλ“€μ—ˆκ³ , react axios 둜 μ„œλ²„μ— μ—°κ²°ν•  수 μžˆμ–΄μ•Όν•œλ‹€.

  1. axios 의 λ©”μ„œλ“œκ°€ μ‚¬μš©λ  곳에(λ‚˜λŠ” App.tsx μ—μ„œ useEffect 둜 μ‚¬μš©ν•  κ±°λ‹€.) get λ©”μ„œλ“œλ₯Ό μ΄μš©ν•΄ λ°μ΄ν„°μš”μ²­μ„ ν•΄μ€€λ‹€.
    // App.tsx
    ...
    

useEffect(()=>{
awsTest()
},[])

function awsTest(){
axios.get('/api/test')
.then((response)=>{
console.log("awsTest",response);
})
.catch((error)=>{
console.log("error", error);
})
}


2. `setupProxy.js` μ—μ„œ `/api` λ₯Ό λ°›μ•„μ•Όν•˜λ‹ˆκΉŒ μ„€μ •ν•΄μ£Όμž.
```js
// setupProxy.js

module.exports = (app)=>{
  ...
  app.use(
    createProxyMiddleware('/api',{
      target:'http://localhost:4000',
      changeOrigin:true
    })
  )
  ...
}
  1. κ·Έ λ‹€μŒ, server.js μ—μ„œ μš°λ¦¬κ°€ 쑰금 전에 λ§Œλ“€μ—ˆλ˜ / 을 /api/test 둜 λ°”κΏ”λ†“μœΌλ©΄
    μš°λ¦¬λŠ” λΈŒλΌμš°μ €μ—μ„œ server κ°€ 보낸 Server Reseponse Success λ°›κ²Œ λœλ‹€.
    μ•„λ§ˆ console 에 λ“€μ–΄μ˜¨ response.data.test 에 보면 μžˆμ„ κ±°λ‹€.

κ°œμš΄ν•˜λ‹€

연결에 μ„±κ³΅ν–ˆλ‹€λ©΄ 이제 끝났닀. 이제 rds 에 접속해 쿼리만 날리면 λœλ‹€.

MySQL 둜 RDS 에 데이터 μš”μ²­ν•˜κΈ°

  1. server.js 에 μ μ–΄λ²„λ¦¬μž. λ‹€λ₯Έ 곳에 μ λŠ” μ‚¬λžŒλ“€μ΄ 많던데, λ‚œ 그런 건 λͺ¨λ₯΄κ² κ³ . μ™ μ§€ λͺ°λΌλ„ κ·Έλ ‡κ²Œ ν•˜λ‹€κ°€ 3일을 λ³΄λƒˆλ‹€.
    // server.js
    

...

const mysql = require('mysql'); // express λ₯Ό κ°€μ Έμ˜¨ 것 처럼 mysql 도 κ°€μ Έμ˜€μž.
connection = mysql.createConnection({
host:'RDS의 μ—”λ“œν¬μΈλ“œ',
port:'RDS의 포트',
user:'RDS의 λ§ˆμŠ€ν„° μ‚¬μš©μž 이름',
password:'RDS의 λ§ˆμŠ€ν„° μ‚¬μš©μž λΉ„λ°€λ²ˆν˜Έ',
database:'λ°μ΄ν„°λ² μ΄μŠ€ 이름', // RDS λ°μ΄ν„°λ² μ΄μŠ€ μ‹λ³„μžκ°€ μ•„λ‹˜.
});

...


2. 그리고 κ·Έ 밑에 `/api/test` API λ₯Ό 쑰금 μˆ˜μ •ν•΄λ³΄μž.
```js
// server.js

...

app.get('/api/test', (req,res) => {
    var sql = 'SELECT * FROM viewcount'
    connection.connect(function(err){
        if(err){
            throw console.log("servererror", err);
        }else{
            connection.query("SELECT * FROM viewcount", function(err, rows, fields){
                console.log(rows);
                res.send(rows);
            })
        }
    })
})

...

μ°Έκ³ : AWS RDS Docs

  1. μš°λ¦¬κ°€ App.tsx μ—μ„œ axios 둜 데이터λ₯Ό μš”μ²­ν•΄, response λ₯Ό console 에 찍도둝 ν–ˆμœΌλ‹ˆ

heide 둜 μž„μ‹œλ‘œ λ„£μ–΄μ€¬λ˜ 데이터가

λΈŒλΌμš°μ € μ½˜μ†”μ—λ„ 잘 ν‘œν˜„λ˜λŠ” κ±Έ λ³Ό 수 μžˆλ‹€.

끝

λ„ˆλ¬΄ 쉽닀.

결둠은

ν”„λ‘ νŠΈ axios 둜 μš”μ²­ν•˜κ³  λ°±μ—”λ“œ 역할을 ν•  express κ°€ RDS λ°μ΄ν„°λ² μ΄μŠ€μ— μ ‘κ·Όν•˜λŠ” κ±°λ‹€.
κ·Έλž˜μ„œ express api κ°€ axios λ₯Ό 잘 λ°›μ•„μ£Όλ©΄μ„œ RDS 에 μ œλŒ€λ‘œ μ ‘κ·Όν•  수 μžˆμ–΄μ•Όν•œλ‹€.

504 error 502 error 둜 skip-name-resolveλ₯Ό ON 으둜 바꿔라. time 을 λŠ˜μ—¬λΌ λ“±λ“± λ‹€ ν–ˆμ§€λ§Œ, λ‚˜λŠ” 뭘 λ°”κΏ€λ €κ³  해도 λ°”λ€Œμ§€λ„ μ•Šκ³ ,

λ³„μ˜ 별 짓을 λ‹€ ν–ˆμ§€λ§Œ,

기본을 μ•Œκ³  μ°¨κ·Όμ°¨κ·Ό ν•˜λ©΄ λ„ˆλ¬΄ μ‰½κ²Œ ν’€λ¦¬λŠ” κ±°λ‹€.
엉망진창

κ²°λ‘ : μ“Έλ°μ—†λŠ” μ—λŸ¬λ‘œ κ³ λ―Όν•˜μ§€λ§κ³  κΈ°λ³Έ λ‘œμ§μ„ μ œλŒ€λ‘œ νŒŒμ•…ν•˜μž!

axios - express - database

proxymiddleware λ₯Ό μ•ˆ μ“Έ μˆ˜λ„ μžˆλŠ”λ° 그러면 μ–΄μ©Œλ‚˜? proxyλ₯Ό ν•΄μ•Όμ§€ ;

μ§„μ§œ 끝

3 μΌλ™μ•ˆ κ³ μƒν–ˆλ‹€.
3 μΌλ™μ•ˆ λ‹€μ–‘ν•œ μ—λŸ¬λ₯Ό λ§Œλ‚˜κ³  λ‹€μ–‘ν•œ 해결법을 보고 μ‹œλ„ν•΄λ΄€μ§€λ§Œ μ œλŒ€λ‘œ ν•΄κ²° 된 건 μ—†μ—ˆλ‹€.
κ²°κ΅­ λ‚΄κ°€ ν•˜λ‹€λ³΄λ‹ˆ 'μ•„ 이게 μ΄λ ‡κ²Œ λ˜λŠ”κ±°μ˜€λ„€? 그럼 μ΄λ ‡κ²Œ ν•˜λŠ”κ±° μ•„λ‹κΉŒ?' ν•˜κ³  λšλ”±λšλ”± ν•΄λ³Έ κ±°λ‹€.
μ§€κΈˆ λ‹Ήμž₯만 봐도 μ€‘μš”ν•œ path 와 정보듀을 env νŒŒμΌμ— 넣지도 μ•Šκ³  μ—°κ²°λ§Œ 돼라 제발...!!! ν•˜λ©΄μ„œ λ§Œλ“ κ±°λΌ.
μ•žμœΌλ‘œ 고쳐야할 뢀뢄이 λ§Žλ‹€.

λšλ”±μ΄κ°€ 되기 μ‹«μœΌλ©΄ 기본을 κ³΅λΆ€ν•˜μž! (569384번째 말함)

이제 μš°λ¦¬λŠ” μžλ°”μ½”λ“œ 없이 ts, js 둜 ν”„λ‘ νŠΈ λ°± λͺ¨λ‘ ν•΄κ²°ν•  수 있게 λ˜μ—ˆλ‹€.

728x90
λ°˜μ‘ν˜•
LIST