在windows服務(wù)器上部署Vue項(xiàng)目

第一步： 安裝Nginx

• 下載 Nginx Windows 包 官網(wǎng)
• 在服務(wù)器C:\Program Files\nginx（舉例，實(shí)際目錄自定）解壓包
• 解壓目錄下找到nginx.exe并雙擊
• 在瀏覽器（服務(wù)器或你的個(gè)人電腦上的）輸入localhost / [服務(wù)器ip]訪問(wèn)nginx服務(wù)，如果顯示“welcome nginx”則Nginx環(huán)境服務(wù)成功

個(gè)人電腦訪問(wèn)前，請(qǐng)確認(rèn)服務(wù)器80端口是否開通外網(wǎng)SLB

第二步： 拷貝前臺(tái)代碼到服務(wù)器

• 開發(fā)生成靜態(tài)部署文件：npm run build
• 復(fù)制項(xiàng)目目錄dist文件下的內(nèi)容，到服務(wù)器C:\www目錄下

第三步： 配置Nginx靜態(tài)文件訪問(wèn)服務(wù)

• 找到nginx解壓目錄下的conf/nginx.conf文件
• 如下修改配置：

    http {
        include       mime.types;
        default_type  application/octet-stream;
  
        #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
        #                  '$status $body_bytes_sent "$http_referer" '
        #                  '"$http_user_agent" "$http_x_forwarded_for"';
  
        #access_log  logs/access.log  main;
  
        sendfile        on;
        #tcp_nopush     on;
  
        #keepalive_timeout  0;
        keepalive_timeout  65;
  
        #gzip  on;
  
        server {
            listen       80;
            server_name  localhost;
  
            #charset koi8-r;
  
            #access_log  logs/host.access.log  main;
  
            location / {
                root   C:\www; #默認(rèn)訪問(wèn)目錄
                index  index.html; #默認(rèn)訪問(wèn)文件
                try_files $uri $uri/ /index.html; #目錄不存在則執(zhí)行index.html
            }
  
            #error_page  404              /404.html;
            ... #后面的不需要修改
  

在Linux服務(wù)器上部署Vue項(xiàng)目

第一步： 安裝Nginx

• 檢查gcc g++開發(fā)類庫(kù)是否裝好：rpm -qa | grep gcc, 如果未返回libgcc && gcc && gcc-c++三個(gè)包的版本號(hào)則需先安裝這三個(gè)包。（nginx依賴的包）

  鑒于我們用的阿里云環(huán)境默認(rèn)都是有裝的，故不寫怎裝這三個(gè)包。

• 下載 Nginx Linux 包 官網(wǎng)
• 上傳包nginx-1.12.2.tar.gz到/home/nginx目錄下(目錄自定義)
• 解壓nginx-1.12.2.tar.gz:

  cd /home/nginx 
  tar zxvf nginx-1.12.2.tar.gz
  

• 配置、編譯、安裝：

  cd nginx-1.12.2
  ./configure #配置
  make #編譯
  make install #安裝
  

• 啟動(dòng)并校驗(yàn)nginx安裝情況

  cd /usr/local/nginx/sbin
  ./nginx #啟動(dòng)
  ps -ef | grep nginx #查看nginx進(jìn)程，如果存在則安裝成功
  

第二步： 拷貝前臺(tái)代碼到服務(wù)器

• 生成靜態(tài)部署文件：npm run build
• 上傳靜態(tài)文件（build生成的文件，默認(rèn)在dist目錄下）到服務(wù)器路徑/root/project/www

第三步： 配置Nginx靜態(tài)文件訪問(wèn)服務(wù)

• 找到配置文件cd /usr/local/nginx/conf
• 如下修改配置：vim nginx.conf

    http {
        include       mime.types;
        default_type  application/octet-stream;
  
        #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
        #                  '$status $body_bytes_sent "$http_referer" '
        #                  '"$http_user_agent" "$http_x_forwarded_for"';
  
        #access_log  logs/access.log  main;
  
        sendfile        on;
        #tcp_nopush     on;
  
        #keepalive_timeout  0;
        keepalive_timeout  65;
  
        #gzip  on;
  
        server {
            listen       80;
            server_name  localhost;
  
            #charset koi8-r;
  
            #access_log  logs/host.access.log  main;
  
            location / {
                root   /root/project/www; #默認(rèn)訪問(wèn)目錄
                index  index.html; #默認(rèn)訪問(wèn)文件
                try_files $uri $uri/ /index.html; #目錄不存在則執(zhí)行index.html
            }
  
            #error_page  404              /404.html;
            ... #后面的不需要修改
  

nginx常用命令

nginx -s stop #強(qiáng)制關(guān)閉
nginx -s reload #重啟