1. Vue 프로젝트 빌드
운영 환경에서는 개발 서버(npm run serve)가 아니라 정적 파일로 빌드된 결과물을 배포해야 합니다.
위 명령을 실행하면 dist/ 디렉터리에 배포 가능한 정적 파일이 생성됩니다.
2. 웹 서버 설정 (Nginx 추천)
Vue는 정적 사이트이므로, Nginx를 사용하여 호스팅하는 것이 일반적입니다.
1) Nginx 설치 (Ubuntu 기준)
2) Vue 배포 파일을 Nginx 디렉터리에 복사
3) Nginx 설정 파일 수정
Nginx 설정을 /etc/nginx/sites-available/default에서 수정합니다.
아래 내용을 추가 또는 수정하세요.
listen 80;
server_name your-domain.com;
root /var/www/html;
index index.html;
location / {
try_files $uri /index.html;
}
}
저장 후 종료(Ctrl + X → Y → Enter).
4) Nginx 재시작
이제 브라우저에서 http://your-domain.com 또는 http://서버IP로 접속하면 Vue 애플리케이션이 실행됩니다.
4) Nginx 설정
vi /etc/nginx/sites-available/default
server {
listen 80 default_server;
listen [::]:80 default_server;
# SSL configuration
#
# listen 443 ssl default_server;
# listen [::]:443 ssl default_server;
#
# Note: You should disable gzip for SSL traffic.
# See: https://bugs.debian.org/773332
#
# Read up on ssl_ciphers to ensure a secure configuration.
# See: https://bugs.debian.org/765782
#
# Self signed certs generated by the ssl-cert package
# Don't use them in a production server!
#
# include snippets/snakeoil.conf;
root /var/www/html;
# Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;
server_name _;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ =404;
}
# pass PHP scripts to FastCGI server
#
#location ~ \.php$ {
# include snippets/fastcgi-php.conf;
#
# # With php-fpm (or other unix sockets):
# fastcgi_pass unix:/run/php/php7.4-fpm.sock;
# # With php-cgi (or other tcp sockets):
# fastcgi_pass 127.0.0.1:9000;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
운영 서버에서 Nginx에 SSL(HTTPS)을 적용하는 방법을 설명합니다.
무료 SSL 인증서인 Let's Encrypt를 사용하여 도메인에 HTTPS를 활성화할 수 있습니다.
1. Certbot 및 Let's Encrypt 설치
Let's Encrypt에서 SSL 인증서를 자동으로 발급 및 갱신하는 Certbot을 설치합니다.
Ubuntu (예: Ubuntu 20.04, 22.04)
2. Nginx 서버 블록 설정 확인
Let's Encrypt는 인증서를 발급하기 전에 도메인이 Nginx에서 올바르게 설정되었는지 확인합니다.
Nginx 설정 파일(/etc/nginx/sites-available/default 또는 /etc/nginx/sites-available/your-domain.com)을 열어 다음과 같이 구성해야 합니다.
기본 Nginx 설정 (HTTP)
아래와 같이 server_name을 도메인에 맞게 설정하세요.
이제 Nginx 설정을 적용하고 재시작합니다.
3. SSL 인증서 발급
이제 Certbot을 사용하여 SSL 인증서를 발급합니다.
-d 옵션 뒤에 사용할 도메인을 입력하세요.
설치 과정
Certbot이 실행되면 다음과 같은 과정이 진행됩니다.
- 이메일 입력: 인증서 갱신 알림을 받을 이메일을 입력하세요.
- 약관 동의: "Y"를 입력하세요.
- HTTPS 강제 리디렉션 설정:
- 1을 선택하면 HTTP(80)와 HTTPS(443) 모두 사용 가능
- 2를 선택하면 HTTP 요청을 HTTPS로 강제 리디렉션
보통 **2(HTTPS 강제 적용)**를 선택하는 것이 좋습니다.
설치 성공 메시지
설치가 완료되면 아래와 같은 메시지가 출력됩니다.
이제 https://example.com에서 사이트에 접근할 수 있습니다.
4. 자동 갱신 설정
Let's Encrypt 인증서는 90일마다 만료되므로, 자동 갱신을 설정해야 합니다.
자동 갱신이 잘 동작하는지 확인하려면 다음 명령을 실행하세요.
자동 갱신이 정상적으로 동작하면 인증서가 90일마다 자동 갱신됩니다.
추가로, cron을 설정하여 주기적으로 실행할 수도 있습니다.
아래 줄을 추가하여 매일 새벽 3시에 인증서를 갱신하도록 설정합니다.
5. HTTPS 설정 확인
이제 브라우저에서 https://example.com을 입력하여 HTTPS가 정상적으로 적용되었는지 확인하세요.
추가적으로, Qualys SSL Labs를 이용하여 보안 등급을 확인할 수 있습니다.
SSL Labs 테스트에서 도메인을 입력하면 SSL 설정을 분석해 줍니다.