服務器發佈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>
複製代碼

2. 新增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
複製代碼

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

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

3. 下載完成以後解壓而且爲文件夾更名

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

4. 創建軟鏈接，爲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 
複製代碼

5. 查看軟連接創建是否成功

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 
複製代碼

2. 代碼部署

回到/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
複製代碼

總結

項目作完了，總要整整齊齊的發佈了纔有成就感對吧😁， 文中的服務器種類有點多，不過多學點也不吃虧😭 ，學會了配置服務器，再配合上Node的自動化腳本發佈, 發佈體驗簡直絲滑。

原文地址 若是以爲有用得話給個⭐吧