[AWS] μλ°μ½λμμ΄ REACT μμ RDS μ μλ λ°μ΄ν° κ°μ Έμ€κΈ°. μ§μ§ AtoZ
μμ π
μ±κ³΅ν΄μ μ΄ κΈμ μ°κΈ° κΉμ§ 3μΌμ΄λ κ±Έλ Έλ€. λ§€μΌ μλ²½ 4μκΉμ§ ν€λ³΄λ λΆμ κ°λ©΄μ 502 504 μ μ¨λ¦νμ§λ§. μλ¬μ μμΈμ λ΄κ° μκ°νλ κ²λ€μ΄ μλμλ€. μ λΆ.
κΈ°λ³Έμ΄ λ§€μ° μ€μνλ€λ κ±Έ κΉ¨λ«λ 3μΌμ΄μλ€.
μ°μ λλ μλ°μ½λ μμ΄ react λ§μΌλ‘ νμ΄μ§λ₯Ό λ§λ€κ³ μΆμκΈ° λλ¬Έμ
μλ° api μ λ°μ΄ν°λ² μ΄μ€ κ° μλ€. mysql λ μ¬μ©νμ§ μμλ€.
νμ§λ§ λ°μ΄ν°λ² μ΄μ€μ νμμ±μ λκΌκ³ RDS λ₯Ό λ§λ€μμ§λ§, RDS λ§λ€κΈ°
λκΉμ§ μΈν
리μ μ΄λ₯Ό μΌκΈ° μ«μκΈ° λλ¬Έμ RDS λ‘ λ°λ‘ μ°κ²°ν μ μλ? ν΄μ 3μΌλμ λλ μμλ€.
νΉλ³νκ²
λ΄κ° μ¬μ©νκ³ μλ 건
λλ TS , http-proxy-middleware λ₯Ό μ¬μ©νλ€. κ·Έλ¦¬κ³ μμΌλ‘ express
μ mysql
μ μ¬μ©ν κ±°λ€.
μ΄κ² μ΄ ννΈμμ μ€μν κ²λ€μ΄κ³ λλ¨Έμ§ λ λ¬λΌμ Έλ μκ΄ μμ κ² κ°λ€.
μ§μ§ μμ π
κΉμμΌν κ²λ€μ΄ μλ€.
express
npm install express
mysql
npm install mysql
κ·Έλ¦¬κ³ λμ€μ
crypt
κ° μλ€λ μλ¬κ° λ μλ μλλ° λ§μ½ κ·Έλ λ€λ©΄npm install bcrypt
νμ§λ§ (κΈ°μ΄μ§μμ΄ μλ) λ΄κ° λ΄€μ λ
crypt
νμμλ€. μλ¬λλ©΄ κ·Έ λ κΉμ.
μ€μΉ λ
μ§μ§ μ§μ§ μμ π
μλ²λ§λ€κΈ°
server
ν΄λλ₯Ό λ§λ λ€.config
μ λ§λ€μ΄λ λλ€. νμμλ€.express
λ‘test
λ₯Ό ν΄λ³Έλ€. μΌλ¨ λ¨Όμ μλ²κ° λμΌνλκΉ.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
λ₯Ό μΌμ€λ€.
- κ·Έλ κ² λλ©΄, ν°λ―Έλμμλ
Server run : http://localhost:4000/
μ΄ μΆλ ₯λκ³ - μΉ λΈλΌμ°μ μμ
localhost:4000
μ μ μνλ©΄{test:Server Response Success}
κ° μΆλ ₯λμ΄μμ κ±°λ€.
λ°λ~!
μλ²μ React μ°κ²°νκΈ°
μλ²λ λ§λ€μκ³ , react axios λ‘ μλ²μ μ°κ²°ν μ μμ΄μΌνλ€.
- 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
})
)
...
}
- κ·Έ λ€μ,
server.js
μμ μ°λ¦¬κ° μ‘°κΈ μ μ λ§λ€μλ/
μ/api/test
λ‘ λ°κΏλμΌλ©΄
μ°λ¦¬λ λΈλΌμ°μ μμ server κ° λ³΄λΈServer Reseponse Success
λ°κ² λλ€.
μλ§ console μ λ€μ΄μ¨ response.data.test μ 보면 μμ κ±°λ€.
κ°μ΄νλ€
μ°κ²°μ μ±κ³΅νλ€λ©΄ μ΄μ λλ¬λ€. μ΄μ rds μ μ μν΄ μΏΌλ¦¬λ§ λ 리면 λλ€.
MySQL λ‘ RDS μ λ°μ΄ν° μμ²νκΈ°
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
- μ°λ¦¬κ°
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 λ‘ νλ‘ νΈ λ°± λͺ¨λ ν΄κ²°ν μ μκ² λμλ€.