개인프로젝트 1-5 리퀘스트 처리를 위한 WAS 서버 구축

Node.js 서버 환경 설정

필요한 패키지 설치

$ npm install express mysql body-parser bcryptjs

• express: 서버를 구성하는 데 사용
• mysql: MySQL 데이터베이스 연결을 위해 사용
• body-parser: POST 요청의 본문을 파싱
• bcryptjs: 비밀번호를 암호화하고 비교하는 데 사용

 

웹서버 코드 작성

이것도 chatgpt한테 시킴. 편안함과 동시에 느껴지는 위기감 (편안함 승)

// server.js
const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');
const bcrypt = require('bcryptjs');

const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// MySQL 데이터베이스 설정
const db = mysql.createConnection({
  host: 'localhost',
  user: 'your_db_user',
  password: 'your_db_password',
  database: 'your_db_name'
});

db.connect((err) => {
  if (err) throw err;
  console.log('MySQL Connected...');
});

// 로그인 엔드포인트
app.post('/signin', (req, res) => {
  const { id, password } = req.body;

  // 사용자 확인
  const query = 'SELECT * FROM users WHERE id = ?';
  db.query(query, [id], (err, results) => {
    if (err) return res.status(500).send(err);

    if (results.length === 0) {
      return res.status(401).json({ message: 'Invalid ID or password' });
    }

    const user = results[0];

    // 비밀번호 검증
    bcrypt.compare(password, user.password, (err, isMatch) => {
      if (err) return res.status(500).send(err);

      if (!isMatch) {
        return res.status(401).json({ message: 'Invalid ID or password' });
      }

      res.json({ message: 'Login successful', user: { id: user.id, name: user.name } });
    });
  });
});

// 회원가입 엔드포인트
app.post('/signup', (req, res) => {
  const { id, password, name } = req.body;

  // 비밀번호 암호화
  bcrypt.hash(password, 10, (err, hashedPassword) => {
    if (err) return res.status(500).send(err);

    // 사용자 정보 저장
    const query = 'INSERT INTO users (id, password, name) VALUES (?, ?, ?)';
    db.query(query, [id, hashedPassword, name], (err, result) => {
      if (err) return res.status(500).send(err);

      res.json({ message: 'User registered successfully' });
    });
  });
});

// 서버 시작
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

 

DB (AWS RDS) 연결

아래 부분에 AWS RDS 연결을 위한 값들을 적어주면 된다. 보안 문제로 여기에 자세히 적진 않았다.

// MySQL 데이터베이스 설정
const db = mysql.createConnection({
  host: 'localhost',
  user: 'your_db_user',
  password: 'your_db_password',
  database: 'your_db_name'
});

 

Vue 파일과 서버 연동

Login.vue 파일의 export default{}에서 methods:{} 부분들을 수정해준다. 버튼 클릭시 웹서버로 리퀘스트를 보내도록!

// Login.vue
export default {
  data() {
    return {
      id: '',
      password: ''
    };
  },
  methods: {
    async onLogin() {
      try {
        const response = await fetch('http://localhost:3000/signin', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ id: this.id, password: this.password })
        });
        
        const result = await response.json();
        if (response.ok) {
          console.log(result.message);
        } else {
          console.error(result.message);
        }
      } catch (error) {
        console.error('Error logging in:', error);
      }
    },
    async onSignup() {
      try {
        const response = await fetch('http://localhost:3000/signup', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ id: this.id, password: this.password, name: 'Sample Name' })
        });

        const result = await response.json();
        if (response.ok) {
          console.log(result.message);
        } else {
          console.error(result.message);
        }
      } catch (error) {
        console.error('Error signing up:', error);
      }
    }
  }
};

 

AWS 환경으로 마이그레이션

이렇게 Local 환경으로 구성했고, AWS 환경으로 옮겼다.

갑자기 비약했지만 삐약삐약

AWS 환경 구축은 아래 정리해두었다!

3-tier architecture on EC2, RDS (Vue.js+Node.js+MySQL)