Vue.js 프로젝트를 EC2에서 Nginx로 배포하는 방법

Vue.js로 만든 프론트엔드 프로젝트를 EC2에 배포하고, Nginxx를 통해 정적 파일을 서빙하는 방법을 정리했다.또한, 백엔드 API와 연동하는 설정 및 Swagger 접속 설정까지 포함했다. 1. 프로젝트 빌드EC2에 배포하기 전에 Vue 프로젝트를 빌드해야 한다.Vue 프로젝트 폴더에서 다음 명령어를 실행한다.npm run build 빌드가 완료되면 dist 폴더가 생성된다.이 dist 폴더 안에는 assets 폴더와  index.html 파일이 포함되어 있다. 이제 EC2 인스턴스의 Nginx root 경로로 파일을 옮겨야 한다.파일을 전송하는 방법은 scp 명령어를 사용하면 된다.여기에서 볼 수 있다. 2. Nginx 설치 및 설정1) Nginx 설치EC2 인스턴스에 인스턴스에 접속한 후 다..

• format_list_bulleted Spring
• · 2025. 3. 8.
• textsms

Vue란?

1. VueVue.js(뷰)는 프로그레시브(Progressive) 자바스크립트 프레임워크로, 사용자 인터페이스(UI)를 만들기 위해 사용된다.한마디로 웹 화면을 더 동적으로 만들고 유지보수를 쉽게 해주는 도구 2. 특징1) 컴포넌트 기반화면을 작은 단위로 나눠서 개발 가능재사용성과 유지보수성이 높음2) 반응형(Reactivity) 시스템데이터가 변경되면 자동으로 화면이 업데이트됨3) 단일 파일 컴포넌트(SFC, .vue 파일)HTML, CSS, JS를 한 파일에서 관리 가능코드 가독성이 좋고 유지보수가 쉽다.4) 확장성Router, Pinia, CLI/Vite 등 다양한 툴을 지원하고 있다.CLI와 Vite는 Vue 개발 환경을 제공하는 빌드 도구Vite 기반에서 Vue 프로젝트 생성하기Node.js 설..

• format_list_bulleted Vue
• · 2025. 2. 26.
• textsms