AWS에서 MSSQL DB와 Vue + .NET Core로 웹사이트 구축하기

이 글에서는 AWS 인프라를 이용해 MSSQL DB와 Vue 프론트엔드, .NET Core 백엔드를 연결해 웹사이트를 구축하는 방법을 소개합니다. VPC, RDS, EC2 같은 AWS 서비스를 활용하고, 전체 프로젝트를 단계별로 진행합니다. 샘플 코드도 포함하였으니 참고하세요!

---

목차

1. AWS 인프라 준비
   • 1.1 VPC 구성
   • 1.2 RDS에 MSSQL 서버 생성
   • 1.3 EC2 인스턴스 생성 (.NET Core 서버 호스팅)
2. 백엔드 설정 (.NET Core)
   • 2.1 프로젝트 생성 및 MSSQL 연결
   • 2.2 REST API 구축
3. 프론트엔드 설정 (Vue)
   • 3.1 Vue 프로젝트 생성 및 API 호출
   • 3.2 결과 렌더링
4. 배포 및 연동
5. 결론

---

1. AWS 인프라 준비

1.1 VPC 구성

1. AWS 콘솔에 로그인하고 VPC 서비스로 이동합니다.
2. 새로운 VPC를 생성합니다.
   • VPC 이름: my-vpc
   • IPv4 CIDR: 10.0.0.0/16
3. 서브넷 두 개 생성:
   • public-subnet: 10.0.1.0/24 (EC2에 할당)
   • private-subnet: 10.0.2.0/24 (RDS에 할당)
4. 인터넷 게이트웨이를 생성하고 VPC에 연결합니다.
5. 라우팅 테이블을 설정해 public 서브넷이 인터넷에 접근할 수 있도록 구성합니다.

---

1.2 RDS에 MSSQL 서버 생성

1. RDS 서비스로 이동하고 새 데이터베이스 생성 클릭.

2. Microsoft SQL Server 선택 후 다음과 같이 설정:

   • 배포 옵션: 프리티어(Free Tier)
   • DB 인스턴스 식별자: my-mssql-db
   • 사용자 이름: admin
   • 비밀번호: your_password
   • VPC: my-vpc
   • 서브넷 그룹: private-subnet 사용

3. 보안 그룹을 설정해 EC2 인스턴스에서 RDS로 접근 가능하도록 MSSQL의 기본 포트 1433을 허용합니다.

---

1.3 EC2 인스턴스 생성 (.NET Core 서버)

1. EC2 서비스에서 새 인스턴스 생성.
2. Amazon Linux 2 AMI 선택 후 인스턴스 타입은 t2.micro로 설정합니다.
3. SSH 접속을 위해 키 페어를 생성하고 다운로드합니다.
4. 인스턴스에 다음 패키지를 설치합니다:

   sudo yum update -y
   sudo yum install -y dotnet-sdk-7.0

---

2. 백엔드 설정 (.NET Core)

2.1 프로젝트 생성 및 MSSQL 연결

EC2에 SSH로 접속한 후, 다음 명령어로 .NET Core 프로젝트를 생성합니다:

dotnet new webapi -o MyApi
cd MyApi

appsettings.json 파일을 열어 MSSQL DB 연결 문자열을 추가합니다:

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=<RDS_ENDPOINT>;Database=mydb;User Id=admin;Password=your_password;"
  }
}

필수 패키지 설치:

dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet add package Microsoft.EntityFrameworkCore.Tools

---

2.2 REST API 구축

Models/Product.cs 파일을 생성해 간단한 모델을 정의합니다:

namespace MyApi.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
    }
}

Controllers/ProductController.cs에 다음 코드를 작성해 REST API를 구성합니다:

using Microsoft.AspNetCore.Mvc;
using MyApi.Models;
using System.Collections.Generic;

[Route("api/[controller]")]
[ApiController]
public class ProductController : ControllerBase
{
    [HttpGet]
    public IEnumerable<Product> Get()
    {
        return new List<Product>
        {
            new Product { Id = 1, Name = "Laptop", Price = 1200 },
            new Product { Id = 2, Name = "Phone", Price = 800 }
        };
    }
}

이제 API 서버를 실행합니다:

dotnet run

---

3. 프론트엔드 설정 (Vue)

3.1 Vue 프로젝트 생성 및 API 호출

로컬 환경에서 Vue 프로젝트를 생성합니다:

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app

src/components/ProductList.vue 파일을 생성해 API를 호출합니다:

<template>
  <div>
    <h1>Product List</h1>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - {{ product.price }} USD
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [],
    };
  },
  mounted() {
    fetch('http://<EC2_PUBLIC_IP>:5000/api/product')
      .then(response => response.json())
      .then(data => {
        this.products = data;
      });
  },
};
</script>

---

3.2 결과 렌더링

Vue 개발 서버를 실행합니다:

npm run serve

웹 브라우저에서 http://localhost:8080에 접속해 결과를 확인합니다.

---

4. 배포 및 연동

1. EC2 서버에 .NET Core API 배포

   • API 프로젝트를 빌드하고 EC2 서버로 전송합니다:

     dotnet publish -c Release -o out
     scp -i your-key.pem -r out/ ec2-user@<EC2_PUBLIC_IP>:/var/www/MyApi

   • EC2에서 API 서버를 실행:

     cd /var/www/MyApi
     dotnet MyApi.dll

2. 보안 그룹 설정

   • EC2의 보안 그룹에서 포트 5000을 열어 API에 접근 가능하도록 설정합니다.

3. Vue 프론트엔드 배포

   • Vue 앱을 빌드:

     npm run build

   • 생성된 파일을 S3에 업로드해 정적 사이트 호스팅을 구성합니다.

---

5. 결론

이제 AWS에서 MSSQL DB, .NET Core API, Vue 프론트엔드가 모두 연결된 웹사이트가 완성되었습니다. 이번 프로젝트에서는 AWS 인프라와 백엔드, 프론트엔드의 상호작용을 경험했습니다. 더 나아가 로드 밸런서, HTTPS 인증서를 추가해 사이트를 고도화할 수 있습니다.

---

이 블로그 글이 도움이 되셨기를 바랍니다! 질문이 있으면 댓글로 남겨주세요. 🚀