Azure Web App Server와 MySQL 서버 연결하기

DB Server연결하기

시작하기 전에,

1. Azure로 DB 구축하기 를 참고해서 DB서버 생성 후, mysql에 연동시킨다. (맨 아래의 예제 코드넣는 부분은 할 필요없음!!)

2. 연동한 후, 새로운 데이터 베이스를 생성한다.

   CREATE DATABASE `[DB이름]`;
   

3. cmd에서, 다음을 실행한다.

    cd 프로젝트 폴더
   npm install mysql
   

시작하기

Visual Studio Code에서 React 프로젝트를 Open하고,

1. server폴더를 생성한다.
2. server폴더 안에 server.js파일을 만든다.

그 후, 다음 예제 코드를 복사해 붙여넣기한다.

• 여기서, config의 host , user, password는 시작하기 전에 만든 DB서버의 것들을 붙여넣는다.

• 그리고 database 부분에는 mysql workbench에서 생성한 DB이름을 넣으면 된다.

const mysql = require('mysql');

var config =
{
    host: 'mydemoserver.mysql.database.azure.com',
    user: 'myadmin@mydemoserver',
    password: 'your_password',
    database: 'quickstartdb',
    port: 3306,
    ssl: false
};

const conn = new mysql.createConnection(config);

conn.connect(
    function (err) { 
    if (err) { 
        console.log("!!! Cannot connect !!! Error:");
        throw err;
    }
    else
    {
       console.log("Connection established.");
           queryDatabase();
    }   
});

function queryDatabase(){
       conn.query('DROP TABLE IF EXISTS inventory;', function (err, results, fields) { 
            if (err) throw err; 
            console.log('Dropped inventory table if existed.');
        })
       conn.query('CREATE TABLE inventory (id serial PRIMARY KEY, name VARCHAR(50), quantity INTEGER);', 
            function (err, results, fields) {
                if (err) throw err;
            console.log('Created inventory table.');
        })
       conn.query('INSERT INTO inventory (name, quantity) VALUES (?, ?);', ['banana', 150], 
            function (err, results, fields) {
                if (err) throw err;
            else console.log('Inserted ' + results.affectedRows + ' row(s).');
        })
       conn.query('INSERT INTO inventory (name, quantity) VALUES (?, ?);', ['orange', 154], 
            function (err, results, fields) {
                if (err) throw err;
            console.log('Inserted ' + results.affectedRows + ' row(s).');
        })
       conn.query('INSERT INTO inventory (name, quantity) VALUES (?, ?);', ['apple', 100], 
        function (err, results, fields) {
                if (err) throw err;
            console.log('Inserted ' + results.affectedRows + ' row(s).');
        })
       conn.end(function (err) { 
        if (err) throw err;
        else  console.log('Done.') 
        });
};

그 다음,

cmd에서

cd server
node server.js

실행하면, cmd화면에는 다음과 같은 로그가 찍힌다.

그리고 mysql workbench에서 확인해보면, Table이 생성되고 값들이 Insert된 것을 확인할 수 있다.

여기까지 DB서버와 통신하는 방법을 알아보았고, 이제 Wep App을 배포해서 DB서버와 연동을 해 볼 예정!

Azure에서 Node.js 웹앱 만들기(배포하기)

로컬에 있는 React 프로젝트를 배포하기 위해서 필요한 Tool을 설치해야함!

Visual Studio Code의 Extension에서 Azure Tools를 설치

설치가 완료되면 Azure 아이콘이 생성 되는데, 이걸 클릭하면, 아래와 같은 화면이 나온다. 빨간 박스쳐진 Deploy to Web app을 클릭하면 Web App을 생성할 수 있다.

이 부분에서는 배포하고자 하는 프로젝트 폴더를 선택한다. Browse를 눌러 다른 폴더를 선택 할 수도 있고, 현재 Visual Studio Code에 열려있는 폴더를 선택할 수 있다.(예시에서는 main_page폴더가 열려있는 상태여서 목록에 뜬것!)

이제부터는 계속 따라하면 된다.

여기서는 Web App의 이름을 정하는데, 이세상에 단 하나뿐인 이름을 써야하는것 주의!

여기서는 리소스 그룹을 생성하는 부분인데, 같이 관리해야하는 프로젝트는 같은 그룹에 넣는것이 좋다. 처음 만드는 것이라면 Create new resource group을 선택하여 새로운 리소스그룹을 만들어 진행한다.

Node.js를 사용하여 프로젝트를 진행하기 때문에, Node 14 LTS를 선택하면된다.

Linux를 선택해야 하는데, Azure 홈페이지에서도 Windows를 선택해서 Web App을 생성하면 아래에서 나올 서비스플랜이 없다는 메시지가 뜨면서 에러가 난다.

쭉 따라하면

Yes를 클릭하면 배포가 시작된다.

배포가 완료되면, APP SERVICE항목에 배포한 Web App이 보여지고, 마우스 우클릭-Browse Website를 클릭하면 배포한 웹페이지를 확인할 수 있다.

Reference

• Azure에서 Node.js 웹앱 만들기
• 기존 Azure App Service를 Azure Database for MySQL 서버에 연결
• Azure로 DB 구축하기