nginx에 배포된 linux vue-프런트엔드 Q&A-php.cn

nginx에 배포된 linux vue

WBOY

풀어 주다： 2023-05-11 09:12:07

원래의

944명이 탐색했습니다.

머리말

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

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

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

1부: 준비

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

정적 리소스 생성

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

npm run build

로그인 후 복사

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

创建 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 指令用于配置请求路由规则。

将配置文件链接到 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 지시문은 요청 라우팅 규칙을 구성하는 데 사용됩니다.

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

/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";
}

로그인 후 복사

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

2부: Nginx 구성 최적화

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

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!