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

프론트엔드 기술의 발전으로 프론트엔드 책임의 범위가 넓어졌습니다. Vue.js는 JavaScript 프레임워크로서 프런트 엔드 개발에 널리 사용되었습니다. 애플리케이션이 계속 확장됨에 따라 웹 브라우저에서 액세스할 수 있도록 Vue.js 애플리케이션을 서버에 배포해야 합니다. 이 기사에서는 Vue.js 애플리케이션을 서버에 배포하는 방법을 소개합니다.

1. Vue.js 프로젝트 패키징

Vue.js 애플리케이션을 배포하기 전에 먼저 Vue.js 애플리케이션을 패키징해야 합니다. Vue.js 애플리케이션 패키징은 애플리케이션의 모든 정적 파일을 모아서 하나 이상의 파일로 병합하는 프로세스입니다. 패키징의 목적은 애플리케이션의 로딩 속도를 높이고 개발 및 배포를 단순화하는 것입니다.

Vue.js 애플리케이션의 경우 Vue CLI를 사용하여 패키징할 수 있습니다. Vue CLI는 Vue.js 프로젝트를 빠르게 생성하고 관리할 수 있는 Vue.js 명령줄 도구입니다. 먼저 Vue CLI가 로컬 컴퓨터에 설치되어 있는지 확인하세요. 명령 터미널에 다음 명령을 입력하세요.

npm install -g @vue/cli

Vue CLI 설치가 완료되면 다음 명령을 사용하여 Vue.js 프로젝트를 생성할 수 있습니다.

vue create my-vue-app

그런 다음 Vue.js 프로젝트 디렉터리를 입력하고 다음을 사용합니다. 다음 명령을 사용하여 패키징합니다.

npm run build

이 명령은 Vue.js 애플리케이션을 "dist"라는 폴더에 패키징합니다. 패키지된 폴더에는 애플리케이션의 모든 정적 파일과 브라우저에서 직접 열 수 있는 "index.html" 파일이 포함되어 있습니다.

2. 서버 선택

Vue.js 애플리케이션을 서버에 배포하기 전에 적합한 서버를 선택해야 합니다. Apache, Nginx, Express 등과 같이 Vue.js 애플리케이션을 호스팅하는 데 사용할 수 있는 다양한 유형의 서버가 있습니다. 여기서는 Nginx를 서버로 선택하겠습니다.

Nginx는 강력한 성능을 갖춘 경량 웹 서버이며 많은 대규모 웹 사이트에서 사용되는 서버입니다. Nginx는 확장성과 사용자 정의가 가능하며 Ubuntu 및 CentOS와 같은 운영 체제에서 실행될 수 있습니다.

3. 서버 구성

Nginx를 설치하기 전에 서버의 소프트웨어 패키지를 업데이트해야 합니다. 명령 터미널에 다음 명령을 입력하세요.

sudo apt update
sudo apt upgrade

소프트웨어 패키지를 업데이트한 후 다음 명령을 사용하여 Nginx를 설치할 수 있습니다.

sudo apt-get install nginx

설치가 완료되면 Nginx가 자동으로 시작됩니다. 다음 명령을 사용하여 Nginx의 실행 상태를 확인할 수 있습니다.

sudo systemctl status nginx

모든 것이 정상이면 Nginx가 실행 중인 것을 볼 수 있습니다.

다음으로 Vue.js 애플리케이션을 사용하려면 Nginx의 구성 파일을 수정해야 합니다. 먼저 Nginx의 기본 구성 파일을 백업해야 합니다. 명령 터미널에 다음 명령을 입력합니다.

sudo mv /etc/nginx/sites-available/default /etc/nginx/sites-available/default.bak

백업이 완료된 후 새 구성 파일을 생성할 수 있습니다. 명령 터미널에 다음 명령을 입력합니다.

sudo nano /etc/nginx/sites-available/default

파일에 다음을 추가합니다.

server {
  listen 80;
  server_name your-server-ip;

  location / {
      root /var/www/html/dist;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

"your-server-ip"를 서버의 IP 주소로 바꾸고 "/var/www/html/dist"를 변경해야 합니다. Vue.js 애플리케이션의 패키징 폴더 경로입니다.

파일을 저장하고 종료한 다음 Nginx를 다시 시작하여 변경 사항을 적용하세요. 명령 터미널에 다음 명령을 입력합니다:

sudo systemctl restart nginx

4. Vue.js 애플리케이션 배포

이제 Vue.js 애플리케이션을 서버에 배포할 준비가 되었습니다. Vue.js 애플리케이션의 패키징 폴더는 SCP 또는 FTP와 같은 도구를 사용하여 서버에 업로드할 수 있습니다. 업로드가 완료된 후 Nginx 사용자가 액세스할 수 있도록 패키징 폴더의 권한을 설정하십시오:

sudo chmod -R 755 /var/www/html/dist

Vue.js 애플리케이션이 서버에 성공적으로 배포되면 서버의 IP 주소를 Vue .js 애플리케이션에 액세스하기 위한 웹 브라우저.

Summary

Vue CLI를 통해 Vue.js 애플리케이션을 패키징하고 Nginx를 배포용 서버로 사용하면 Vue.js 애플리케이션을 인터넷에 빠르고 쉽게 배포할 수 있습니다. Nginx의 구성 파일을 필요에 맞게 자유롭게 사용자 정의할 수 있습니다. Vue.js 애플리케이션을 배포하려면 주의가 필요하지만 모든 Vue.js 개발자가 알아야 할 기술이기도 합니다.

위 내용은 Vue.js 프로젝트를 서버에 배포하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!