服務器發佈Vue/Nuxt項目指南(圖文版本)

很多前端朋友可能不是那麼瞭解服務器配置。今天突然翻到之前寫的這篇文章，修改完善了之後分享給大家一些常見的的Web服務器部署項目的方式。

寫在前面

下面講的每一種服務器深入進去都很複雜，在這篇文章只是討論一下基本的部署和使用。更高級的知識和用法還需要各位朋友自行去探索和發現， 開始閱讀之前希望大家能先了解一些Linux基礎，就不至於看起來吃力了。

注: 下面所有的例子大多基於vue-router的history模式下打包生成的靜態文件，其他框架也都大同小異

Nginx服務器

Nginx 是一個高性能的HTTP和反向代理web服務器，在連接高併發的情況下，Nginx表現相當出色。

Nginx安裝

這裏就不講這個了吧， 有需要的朋友可以看這個

配置修改

爲了支持history模式， 我們要修改nginx/conf/nginx.conf文件

location / {
    root   html;
    try_files $uri $uri/ /index.html; # 只需要加上這麼一行
    index  index.html index.htm;
}

然後把靜態資源放在html文件夾內

然後啓動Nginx服務器

cd usr/local/nginx/sbin
./nginx

接着訪問你的服務器就行OK了。

GZip支持

nginx實現資源壓縮的原理是通過ngx_http_gzip_module模塊攔截請求，並對需要做gzip的類型做gzip壓縮，該模塊是默認基礎的，不需要重新編譯，直接開啓即可。大體配置如下

#開啓和關閉gzip模式
gzip on|off;

#gizp壓縮起點，文件大於1k才進行壓縮
gzip_min_length 1k;

# gzip 壓縮級別，1-9，數字越大壓縮的越好，也越佔用CPU時間
gzip_comp_level 1;

# 進行壓縮的文件類型。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript ;

#nginx對於靜態文件的處理模塊，開啓後會尋找以.gz結尾的文件，直接返回，不會佔用cpu進行壓縮，如果找不到則不進行壓縮
gzip_static on|off

# 是否在http header中添加Vary: Accept-Encoding，建議開啓
gzip_vary on;

# 設置壓縮所需要的緩衝區大小，以4k爲單位，如果文件爲7k則申請2*4k的緩衝區 
gzip_buffers 2 4k;

# 設置gzip壓縮針對的HTTP協議版本
gzip_http_version 1.1;

Nginx配置雖然簡單，但是它本身是非常強大的，代理，負載等等都是非常具有實用性的。

Apache服務器

Apache是世界使用排名第一的Web服務器軟件, 使用非常廣泛。由於VueRouter的hash模式本質上和靜態資源沒什麼區別，在Apache上發佈又比較簡單，這裏就跳過了發佈直接進入配置支持History模式

1. 修改Apache默認配置

首先要重新修改\conf\httpd.conf文件讓文件支持rewrite

找到

// 這一行需要解開註釋 引入這個模塊
LoadModule rewrite_module modules/mod_rewrite.so 

然後新增或者修改下面得代碼

# 重寫文件根目錄
DocumentRoot "/usr/local/apache/demo"
# 目錄
<Directory "/usr/local/apache/demo">
    #
    # Possible values for the Options directive are "None", "All",
    # or any combination of:
    #   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
    #
    # Note that "MultiViews" must be named *explicitly* --- "Options All"
    # doesn't give it to you.
    Options Indexes FollowSymLinks

    #
    # 修改未允許重寫
    AllowOverride all

    #
    # Controls who can get stuff from this server.
    #
    Require all granted
</Directory>

1. 新增htacces規則

上面操作時修改服務器得默認配置讓服務器支持Rewrite，下面來創建Rewrite規則

首先在和index.html同級得地方新建.htacces文件，具體內容可以參照Vue-Router官網給得例子

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Apache開啓Gzip壓縮

/usr/local/apache/bin/apxs -i -c -n -a mod_deflate.so

Tomcat服務器部署

現在這種前後端分離的大環境下，一般不會有太多人用Tomcat作web服務器。有的企業可能會配合着SpringMVC來一起使用，這裏也來寫一下。配置起來也很簡單。

配置server.xml

首先找到Tomcat服務器目錄中tomcat/conf/server.xml文件，找到Host，修改成你想要的配置。主要是appBase，它決定了靜態文件查詢的基礎目錄。

<Host name="localhost"  appBase="webapps"
      unpackWARs="true" autoDeploy="true">
  <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
          prefix="localhost_access_log." suffix=".txt"
          pattern="%h %l %u %t &quot;%r&quot; %s %b" />

</Host>

配置支持History模式

只需要在發佈的文件夾中新增WEB-INF配置文件夾中就行。如下圖

WEB-INF 文件夾放在項目中那麼tomcat會自動掃描文件夾中的web.xml然後添加配置。

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
                      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
  version="3.0"
  metadata-complete="true">
  
  <!-- <display-name>webapp</display-name> -->
  <description>
    webapp
  </description>
  <error-page>  
    <!-- 重寫404頁面 -->
    <error-code>404</error-code>  
    <location>/index.html</location>
  </error-page>  
</web-app>

這就配置完了，可以說是賊簡單了。至於怎麼安裝Tomcat服務器，大家自行解決吧😁

Nuxt項目（服務端渲染）

發佈SSR項目的時候官方推薦了兩種方式服務端渲染應用部署 和 靜態應用部署。靜態應用部署的話基本上就失去了SSR的優勢，而且部署方式也和上面講的大同小異。這裏只講服務端渲染應用部署。

服務端渲染應用部署的話不同於靜態部署，我們同時要在服務器上部署上Node環境。

Node環境部署

1. cd到/usr/local文件夾並在這個文件夾下新建一個存放安裝環境的文件夾node後進入node文件夾（名字可以隨便起，這裏做demo就用node了）

cd /usr/local
mkdir -p node

1. 下載Node我這裏採用的是最新的長期服務版本，你想安裝其他的版本，可以在這裏查找，還可以使用nvm來管理你的Node,簡單教程

wget https://nodejs.org/dist/v10.13.0/node-v10.13.0-linux-x64.tar.gz

1. 下載完成之後解壓並且爲文件夾改名

# 解壓到當前文件夾
tar -zxvf node-v10.13.0-linux-x64.tar.gz -C ./
# 改名
mv node-v10.13.0-linux-x64/ ./node10.13.0

1. 建立軟連接，爲node,npm註冊環境變量(其他的npm全局包也要這樣註冊)

# 軟鏈接指向到node npm
ln -s /usr/local/node/node10.13.0/bin/node  /usr/local/bin/node
ln -s /usr/local/node/node10.13.0/bin/npm  /usr/local/bin/npm 

1. 查看軟鏈接建立是否成功

ls -al /usr/local/bin

顯示如下就表示成功了

接着使用node -v

node -v
# 出現版本號就是安裝成功了
v10.13.0

到這裏爲止我們的Node環境就安裝成功了，接下來進行nuxt部署

Nuxt部署

1. 全局安裝nuxt，然後按照上面的方式建立軟連接

# 安裝
npm i nuxt -g
# 建立軟連接
ln -s /usr/local/node/node10.13.0/bin/nuxt  /usr/local/bin/nuxt 

1. 代碼部署

回到/local文件夾下，我們建立一個nuxt文件用來存放我的nuxt項目。然後進入nuxt文件夾

# 回到local
cd ../
mkdir nuxt
cd nuxt

在本地環境中執行nuxt build,然後會生成一個.nuxt文件夾。

然後修改package.json,爲它加上新的內容，nuxt應用會根據下面的配置自動配置服務的端口號和地址。

"config": {
  "nuxt": {
    "host": "0.0.0.0", # 通過IPV4訪問
    "port": xxxx
  }
},

然後將項目中的.nuxt文件夾 static文件夾 package.json nuxt.config.js上傳到服務器的nuxt文件夾中，

然後在nuxt文件夾中執行

# 爲了方便我這這裏服務器上執行了install，正式項目不建議這麼幹
npm i

下載完成之後執行nuxt start出現下面的日誌就表示成功啓動了我們的nuxt應用

pm2使用

既然使用了Node服務，那我們最好是使用pm2做進程守護，至於pm2是什麼，以及pm2是幹什麼的，這篇文章我們不過多的贅述，有興趣可以自己看看。

首先安裝pm2

npm i pm2 -g
# 建立軟連接
ln -s /usr/local/node/node10.13.0/bin/pm2  /usr/local/bin/pm2 

然後在package.json中加入pm啓動指令或者直接像下面這樣啓動

# package.json
"scripts": {
    "pm2:nuxt": "pm2 start npm --name 'XXX' -- run nuxt:start", # 啓動名字爲xxx的進程
    "nuxt:start": "PORT=xxxx nuxt start",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "pm2:stop:all": "pm2 stop all" # 停止所有進程
  }
# 直接啓動命令
pm2 start npm --name 'XXX' -- run nuxt:start

出現這樣的日誌就表示成功

下面是一些常用的pm2命令

pm2 start 0        # 啓動 id爲 0的指定應用程序
pm2 restart 0      # 重啓 id爲 0的指定應用程序
pm2 stop 0         # 停止 id爲 0的指定應用程序
pm2 delete 0       # 刪除 id爲 0的指定應用程序

pm2 list           # 查看當前正在運行的進程
pm2 start all      # 啓動所有應用
pm2 restart all    # 重啓所有應用
pm2 stop all       # 停止所有的應用程序
pm2 delete all     # 關閉並刪除所有應用
pm2 logs           # 控制檯顯示所有日誌
 
pm2 logs 0         # 控制檯顯示編號爲0的日誌
pm2 show 0         # 查看執行編號爲0的進程
pm2 monit xxx      # 監控名稱爲xxxx的進程

至此，一個Nuxt應用就算是部署完成了。

出現過的問題

1. 通過koa server.js啓動的的時候外網無法訪問。用的是阿里雲的服務器，安全組規則都添加了。

   這個問題的具體出現原因我暫時還沒找到，只是後來換了nuxt start外網纔可以順利訪問。希望有瞭解到大佬能解答一下。

2. 權限不足使用sudo su找不到node npm等命令

   這個很簡單， 我們再重新建立一邊軟鏈接就行了

   sudo ln -s /usr/local/bin/node /usr/bin/node
   sudo ln -s /usr/local/lib/node /usr/lib/node
   sudo ln -s /usr/local/bin/npm /usr/bin/npm

總結

項目做完了，總要整整齊齊的發佈了纔有成就感對吧😁， 文中的服務器種類有點多，不過多學點也不吃虧😭

原文地址 如果覺得有用得話給個⭐吧