도메인 전반에 걸친 Vue 패키징 및 배포

머리말

프로젝트 개발 시 우리가 사용하는 도메인 이름이 백엔드 인터페이스의 도메인 이름과 일치하지 않기 때문에 도메인 간 문제가 발생하는 경우가 많습니다. 개발 환경에서는 프록시를 구성하여 도메인 간 문제를 해결할 수 있지만 패키징 및 배포 후에는 다른 방법을 사용하여 도메인 간 문제를 해결해야 합니다. 이 기사에서는 vue-cli3를 사용하여 도메인 간 패키징 및 배포하는 방법을 소개합니다.

1. 교차 출처란 무엇입니까?

CORS(교차 출처 리소스 공유)는 웹 페이지가 다른 소스에서 리소스를 가져오는 것을 방지하는 브라우저의 동일 출처 정책의 제한 사항입니다. 동일한 프로토콜, 도메인 이름 및 포트 번호. 원본이 아닌 소스 경로에서 요청이 시작되면 브라우저는 요청을 거부합니다.

2. vue-cli3 패키징의 여러 모드

vue-cli3에서는 패키징이 세 가지 모드로 나뉩니다.

1. 테스트 모드(빌드-테스트)
   테스트 모드는 코드를 개발 환경 실행 가능 모드로 패키징합니다. 소스맵 디버깅 기능을 자동으로 활성화합니다.
2. 빌드 모드(build-prod)
   빌드 모드는 코드를 압축하고 난독화하며 프로덕션 환경에 배포하는 데 적합합니다.
3. 생성 및 미리보기 모드(서브)
   서브 모드는 코드를 핫 업데이트하고 개발 중 미리보기 및 테스트에 적합한 미리보기 서비스를 제공합니다.

3. 크로스 도메인 솔루션 패키징 및 배포

크로스 도메인을 패키징하고 배포할 때 크로스 도메인 문제를 해결하려면 nginx를 사용하여 역방향 프록시를 수행해야 합니다.

nginx는 Windows, Linux, Mac 등 다양한 운영 체제에서 실행할 수 있는 고성능 웹 서버입니다. 매우 강력하며 역방향 프록시, 로드 밸런싱, 캐싱 등에 사용할 수 있습니다.

1. Install nginx

Linux 환경에서는 다음 명령을 통해 nigix를 설치할 수 있습니다.

sudo apt-get update
sudo apt-get install nginx

2. Configure nginx

nginx를 설치한 후 도메인 간 문제를 해결하려면 nginx를 구성해야 합니다.

먼저, 일반적으로 /etc/nginx/conf.d/default.conf에서 nginx 구성 파일을 찾아야 합니다. 다음 명령을 통해 nginx 구성 파일을 엽니다.

sudo vim /etc/nginx/conf.d/default.conf

그런 다음 다음과 같이 서버 세그먼트를 찾습니다. :

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;
        #access_log  /var/log/nginx/host.access.log  main;

        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ .php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ .php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /.ht {
        #    deny  all;
        #}
    }

위치 세그먼트 아래에 역방향 프록시를 구성해야 합니다. 예를 들면 다음과 같습니다.

location /api {
            proxy_pass http://192.168.0.100:8080; # 后端API地址
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_set_header X-NginX-Proxy true;
            proxy_http_version 1.1;
            proxy_connect_timeout 600;
            proxy_read_timeout 600;
            proxy_send_timeout 600;
            proxy_buffer_size 64k;
            proxy_buffers 4 64k;
            proxy_busy_buffers_size 128k;
            proxy_temp_file_write_size 128k;
            # 解决跨域
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Authorization,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            # 缓存时间，单位秒。这里设置的是6小时
            expires 21600s;
            # 收到304响应后，再次请求的时间间隔
            proxy_cache_valid 200 304 12h;
        }

그중 Proxy_pass 다음의 주소는 백엔드 API 주소로 변경되어야 하며 add_header는 교차 도메인 문제를 해결합니다.

3. vue.config.js 구성 수정

vue-cli3에서는 vue.config.js의 publicPath를 구성하여 패키지 파일을 도메인 이름과 독립적으로 만들 수 있습니다. 구체적인 구성은 다음과 같습니다.

module.exports = {
  publicPath: '',
  devServer: {
    // 设置跨域代理
    proxy: {
      '/api': {
        target: 'http://192.168.0.100:8080', // 后端API地址
        ws: true,
        changOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  chainWebpack: (config) => {
    config.optimization.delete('splitChunks');
  }
}

Among /api는 백엔드 API 주소의 접두사이고 대상 구성은 백엔드 API 주소입니다.

4. Packaging and 배포

위 구성 후 vue 프로젝트를 패키징하고 배포할 수 있습니다. 패키징이 완료된 후 /dist 디렉터리의 모든 파일을 nginx 구성의 루트 디렉터리(일반적으로 /usr/share/nginx/html)에 복사한 다음 nginx 서비스를 다시 시작합니다.

sudo service nginx restart

이때, 우리는 도메인 전반에 걸쳐 vue-cli3 패키징 및 배포를 구현하는 데 성공했습니다.

요약

이 글에서는 nginx 역방향 프록시를 사용하여 vue-cli3 패키징 및 배포의 도메인 간 문제를 해결하는 방법을 소개합니다. 위의 구성을 통해 크로스 도메인 문제를 해결하고 프로덕션 환경에 배포할 수 있습니다. 물론 nginx에 대한 사용자 액세스 권한 활성화 등 배포 과정에서 보안 문제에 주의해야 합니다. 물론, jsonp, websocket 등과 같은 도메인 간 문제를 해결하기 위해 다른 방법을 사용할 수도 있습니다.

위 내용은 도메인 전반에 걸친 Vue 패키징 및 배포의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!