nginx에 배포된 linux vue

머리말

현대 웹 개발에서는 일반적으로 웹 애플리케이션을 생성하고 관리하는 데 널리 사용되고 사용하기 쉬운 일부 도구가 사용됩니다. 여기에는 Linux, Vue 및 Nginx가 포함됩니다.

Linux는 서버 측 배포에 일반적으로 사용되는 오픈 소스 운영 체제입니다. Vue는 클라이언트 측 웹 애플리케이션 개발을 위한 널리 사용되는 프런트 엔드 JavaScript 프레임워크입니다. Nginx는 정적 자산을 호스팅하고 역방향 프록시를 통해 요청을 적절한 애플리케이션으로 라우팅하는 데 사용할 수 있는 고성능 웹 서버입니다.

이 기사에서는 Nginx에 Vue 애플리케이션을 배포하는 방법과 최적의 성능을 위해 필요한 구성 및 최적화를 수행하는 방법에 대해 설명합니다. 실제 Vue 애플리케이션을 예로 사용하고 이미 Linux 및 Nginx가 설치되어 있다고 가정합니다.

1부: 준비

Nginx에 애플리케이션을 배포하기 전에 몇 가지 준비를 수행해야 합니다. 시작하기 전에 수행해야 할 몇 가지 필수 단계는 다음과 같습니다.

1. 정적 리소스 생성

다음 명령을 실행하여 Vue 애플리케이션에 대한 정적 리소스를 생성하세요.

npm run build

이렇게 하면 서버에 배포할 정적 파일이 포함된 dist 디렉터리가 생성됩니다. dist 目录，其中包含用于部署到服务器的静态文件。

2. 创建 Nginx 配置文件

创建一个新的 Nginx 配置文件，用于托管我们的应用程序。假设您已经安装了 Nginx，可以在 /etc/nginx/sites-available/ 目录中创建一个新的文件以定义您的应用程序。

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

在文件中添加以下内容，以定义我们的应用程序：

server {
    listen 80;
    root /var/www/myapp/dist;
    index index.html;
    server_name myapp.example.com;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

在这个配置文件中，我们定义了我们的应用程序。listen 指令指定了应用程序将监听的端口。root 指令指定应用程序的根目录，即我们刚刚生成的 dist 目录。server_name 指令设置了应用程序的域名。location 指令用于配置请求路由规则。

3. 将配置文件链接到 sites-enabled

在 /etc/nginx/sites-enabled/

Nginx 구성 파일 만들기

애플리케이션 호스팅을 위한 새 Nginx 구성 파일을 만듭니다. Nginx가 설치되어 있다고 가정하면 /etc/nginx/sites-available/ 디렉터리에 새 파일을 생성하여 애플리케이션을 정의할 수 있습니다.

sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/myapp

파일에 다음 콘텐츠를 추가하여 애플리케이션을 정의합니다.

sudo nginx -t

이 구성 파일에서 애플리케이션을 정의합니다. listen 지시어는 애플리케이션이 수신할 포트를 지정합니다. root 지시문은 방금 생성한 dist 디렉터리인 애플리케이션의 루트 디렉터리를 지정합니다. server_name 지시문은 애플리케이션의 도메인 이름을 설정합니다. location 지시문은 요청 라우팅 규칙을 구성하는 데 사용됩니다.

구성 파일을 사이트 활성화에 연결

1. /etc/nginx/sites-enabled/ 디렉토리에 심볼릭 링크를 생성하여 방금 생성한 구성 파일에 연결합니다.

sudo systemctl restart nginx

그런 다음 Nginx 구성을 테스트하세요.

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

오류가 없으면 Nginx를 다시 시작하세요.

location ~* .(js|css|png|jpeg|jpg|gif)$ {
  expires 1y;
  add_header Cache-Control "public, no-transform";
}

2. 이제 애플리케이션에 액세스하여 공용 IP 주소 또는 도메인 이름에 배포할 수 있습니다.

2부: Nginx 구성 최적화

이제 Nginx에 애플리케이션을 성공적으로 배포했으므로 최고의 성능을 얻기 위해 몇 가지 필요한 최적화 및 구성을 수행해야 합니다.

Nginx 구성을 최적화하기 위해 취할 수 있는 몇 가지 단계는 다음과 같습니다.

Gzip 압축 켜기

Gzip 압축은 대역폭을 절약하고 페이지 로딩 속도를 높일 수 있습니다. Gzip 압축을 활성화하려면 Nginx 구성 파일에 다음 코드를 추가하세요.

listen 443 ssl http2;

캐싱 활성화

Vue 애플리케이션에서 JavaScript 및 CSS 파일과 같은 대부분의 정적 리소스는 배포 후 거의 변경되지 않습니다. 따라서 성능을 향상시키고 대역폭 사용량을 줄이기 위해 브라우저 캐싱을 활성화할 수 있습니다.

캐싱을 활성화하려면 다음 구성 지시어를 사용하세요.

listen 443 ssl http2;
ssl_certificate /path/to/cert.crt;
ssl_certificate_key /path/to/key.key;

이 지시어는 브라우저 캐싱을 활성화하고 브라우저가 1년 동안 동일한 캐시 파일을 사용하도록 설정합니다.

HTTP/2 사용

HTTP/2는 웹 사이트의 속도와 성능을 향상시키는 고급 프로토콜입니다. HTTP/2를 활성화하려면 Nginx 구성 파일에 다음 줄을 추가하세요.

rrreee

Enable SSL

SSL을 활성화하면 전송된 데이터가 안전하게 암호화되고 애플리케이션의 보안이 향상됩니다. SSL을 활성화하려면 다음 단계를 수행하세요. 🎜🎜a SSL 인증서 설치 🎜🎜 SSL 인증서를 구매하거나 자체 서명하거나 Let’s Encrypt와 같은 무료 인증 기관을 사용할 수 있습니다. 그런 다음 SSL 인증서와 키를 서버에 업로드합니다. 🎜🎜b. SSL 구성🎜🎜Nginx 구성 파일에서 SSL을 활성화하려면 다음 줄을 추가하세요. 🎜rrreee🎜이렇게 하면 Nginx 수신 HTTPS 포트가 정의되고 SSL 인증서와 키가 사용됩니다. 🎜🎜요약🎜🎜이 기사에서는 Nginx에 Vue 애플리케이션을 배포하는 방법에 대해 논의하고 최고의 성능을 얻기 위해 몇 가지 필요한 최적화 및 구성을 수행했습니다. 우리는 정적 리소스를 생성하고, Nginx 구성 파일을 생성하고, SSL, Gzip 및 캐싱을 최적화하는 방법을 배웠습니다. 이제 프로덕션 환경에 배포하기 위해 구축한 애플리케이션에 이러한 기술을 적용할 수 있습니다. 🎜

위 내용은 nginx에 배포된 linux vue의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!