우분투에서 vue.js 배포하기

1. Vue.js 프로젝트 빌드

먼저, Vue.js 프로젝트를 배포 가능한 정적 파일로 빌드해야 합니다. 아래 명령어를 터미널에서 실행하여 dist/ 폴더를 생성합니다. vite.config.js에 다음과 같은 내용을 추가한다.

# vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    outDir: '/var/www/vue-app/dist',  // 빌드된 파일을 저장할 경로
  },
  base: '/',  // publicPath와 유사한 개념으로, 경로를 루트로 설정
  
})

위의 방식은 서버에 빌드되기 전 파일을 올리고 서버에서 직접 빌드할 때 사용하면 편하다.

빌드 전에 서버의 /var/www/vue-app/dist 경로에 빌드 파일을 저장하려면, 해당 경로에 대한 쓰기 권한을 설정해야 한다. 권한이 없는 경우 다음 명령어로 설정하세요.

# 디렉토리가 없는 경우 생성
sudo mkdir -p /var/www/vue-app/dist

# 현재 사용자에게 쓰기 권한 부여
sudo chown -R $USER:$USER /var/www/vue-app/dist

이제 프로젝트를 빌드하여 결과물을 /var/www/vue-app/dist 경로에 생성할 수 있다. 

npm run build

2. nginx 설치하기

nginx에 대해서 알아볼까요. 엔진 엑스라고 부르고 홈페이지(https://nginx.org/en/)의 설명을 gpt-4o로 요약한 내용이다.

nginx 개요: nginx("엔진 엑스")는 HTTP 웹 서버, 리버스 프록시, 콘텐츠 캐시, 로드 밸런서, 메일 프록시 서버, 그리고 TCP/UDP 프록시 서버로 사용되는 다목적 소프트웨어입니다. 이고르 시소예프가 개발했으며, 높은 성능과 적은 자원 소모로 유명합니다. 전 세계에서 가장 많이 사용되는 웹 서버이며, Docker와 Kubernetes와의 통합으로 인기도가 높습니다.

주요 기능:

1. HTTP 서버 기능:
   • 정적 파일 제공 및 인덱스 파일 지원.
   • 캐싱과 로드 밸런싱을 지원하는 리버스 프록시 기능.
   • SSL/TLS, HTTP/2, HTTP/3 지원.
   • 모듈형 아키텍처로 압축, 스트리밍, 이미지 변환 지원.
2. 기타 HTTP 기능:
   • 이름 기반, IP 기반 가상 호스팅 지원.
   • 접근 제어, 맞춤형 로그 기록, URI 재작성 기능.
   • 응답 속도 제한, A/B 테스트, njs 스크립팅 언어 지원.
3. 메일 프록시 서버:
   • POP3, IMAP, SMTP 프로토콜과 SSL/TLS 암호화를 지원.
   • 외부 HTTP 인증 및 메일 서비스 로드 밸런싱 제공.
4. TCP/UDP 프록시:
   • TCP/UDP 연결 프록시 및 SSL/TLS 지원.
   • 클라이언트 주소 기반 접근 제어 및 로드 밸런싱 제공.

아키텍처 및 확장성:

• 마스터-워커 구조를 사용.
• 중단 없이 설정 변경 및 업그레이드 가능.
• 리소스 효율적이며, 10,000개 이상의 비활성 연결을 최소한의 메모리로 관리.

지원되는 플랫폼:

• FreeBSD, Linux, Solaris, macOS, Windows 등 다양한 운영체제에서 테스트됨.

설치 방법은 다음과 같다.

sudo apt update
sudo apt install nginx

3. nginx 설정 파일 구성

이제 Nginx를 통해 Vue.js 애플리케이션을 서비스하기 위한 설정을 진행합니다. Nginx 설정 파일은 일반적으로 /etc/nginx/sites-available/ 또는 /etc/nginx/conf.d/ 경로에 있습니다.

새로운 설정 파일을 생성하거나 기본 설정 파일을 편집합니다.

sudo nano /etc/nginx/sites-available/vue-app

다음과 같은 내용을 작성합니다.

server {
    listen 80;  # HTTP로 서비스할 포트
    server_name thiskorea.iptime.org;  # 사용할 도메인이 thiskorea.iptime.org
    # 기본 서버로 설정하고 싶다면
    # server_name _; #('_'는 모든 요청을 처리)

    root /var/www/vue-app/dist;  # 빌드된 dist 폴더 경로

    index index.html;

    location / {
        try_files $uri $uri/ /index.html;  # Vue Router의 히스토리 모드를 지원
    }

    # 로그 설정 (선택 사항)
    access_log /var/log/nginx/thiskorea_access.log;
    error_log /var/log/nginx/thiskorea_error.log;

    # 기타 옵션 (보안 헤더, gzip 압축 등)
    location ~* \.(ico|css|js|gif|jpe?g|png)$ {
        expires 30d;
        add_header Cache-Control "public, no-transform";
    }
}

이제 설정을 활성화 할 차례이다. 만약 default 파일에 작성하였다면 아래 명령어는 실행하지 않아도 됩니다.

sudo ln -s /etc/nginx/sites-available/vue-app /etc/nginx/sites-enabled/

nginx 설정 테스트 및 재시작

설정 파일을 작성한 후, 설정에 오류가 없는지 테스트하고, nginx를 재시작하여 변경사항을 적용합니다.

# Nginx 설정 테스트
sudo nginx -t

# Nginx 재시작
sudo systemctl restart nginx

위 설정을 통하면 성공적으로 Vue.js 프로젝트를 배포할 수 있습니다.