前言

文章始發於我的自媒體博客《https://blog.kyeteo.cn》,選自《Vuejs開發技巧》系列文章

nuxt是基於vue-server-readerer開發的vuejs服務端渲染框架，它極大的避免了我們基於vue cli創建項目自己搭建服務端渲染的繁瑣過程，今天我們就來講一講如何部署一個基於nuxt開發的web應用

部署環境要求

• linux服務器
• 安裝好的nginx web服務器
• npm

nuxt部署

• 在nuxt項目更目錄執行

npm run build

• 用sftp工具將以下文件上傳到服務器中我們已經創建好的目錄中

在nuxt項目根目錄中將.nuxt,server,static,env,nuxt.config.js,package.json六個文件上傳上去，其中env文件為自定義配置文件，可根據實際自己有無使用選擇上傳

• 安裝正式依賴

在服務器nuxt項目根目錄中執行以下命令，--production參數是隻安裝非編譯型依賴，主要體現在指令只會安裝package.json中dependencies中的依賴，不會安裝devDependencies中的依賴包

npm install --production

• 安裝pm2

pm2是用於node進程管理的進程守護工具，它能夠使我們node項目因出現不可控制的因素報錯crash而快速自動重啟，類似python應用的supervisor一樣

npm install -g pm2

• 編寫pm2配置文件

在nuxt項目根目錄創建pm2.json文件，內容如下

{
 "apps": [
 {
 "name": "自定義啟動應用名稱", 
 "script": "server/index.js",
 "out_file": "日誌目錄/logs/nuxt_out.log",
 "error_file": "日誌目錄/logs/nuxt_error.log",
 "cwd": "nuxt項目在服務器中的根目錄位置",
 "max_memory_restart": "200M",
 "autorestart": true,
 "node_args": [],
 "args": [],
 "instances": 4,
 "exec_mode": "cluster",
 "env": {
 NODE_ENV: "production"
 }
 }
 ]
}

• pm2啟動nuxt應用

在nuxt項目根目錄執行

pm2 restart pm2.json

看到如下便是啟動成功

pm2啟動

接下來我們就可以通過默認3000端口訪問了（前提是服務器開放了3000端口，否則會出現無法訪問的現象）

使用nginx做端口代理

很多時候我們訪問的網站地址是類似這樣的xxx.domain.com,這些鏈接是不包括端口的，我們該如何實現這個功能呢，這個就離不開我們強大的nginx的prosy_pass功能了，接下來我們一步步實現以上功能

• 配置根據域名進入端口

server
{
 listen 80;
 server_name xxx.domain.com; #該域名是接下來我們直接通過這個鏈接訪問nuxt應用
 index index.php index.html index.htm default.php default.htm default.html;
 root /www/wwwroot/nuxt項目根目錄;
}

通過以上配置，我們訪問xxx.domain.com就會直接訪問到/www/wwwroot/nuxt項目根目錄/下面的index.html文件

• 將80端口訪問的內容代理到本機的3000端口上（3000端口為nuxt應用默認啟動的端口）

server
{
 listen 80;
 server_name xxx.domain.com; #該域名是接下來我們直接通過這個鏈接訪問nuxt應用
 index index.php index.html index.htm default.php default.htm default.html;
 root /www/wwwroot/nuxt項目根目錄;
 # 代理端口
 location / {
 proxy_http_version 1.1;
 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection "upgrade";
 proxy_set_header Host $host;
 proxy_set_header X-Nginx-Proxy true;
 proxy_cache_bypass $http_upgrade;
 proxy_pass http://127.0.0.1:3000;
 }
}

這時候重啟nginx(nginx reload)後我們發現可以通過xxx.domain.com訪問內容了，可是我們發現報錯了，一些靜態資源無法訪問，出現這些問題其實是代理出現了問題，我們在這個基礎之上再調整下就好了(●'◡'●)

• 代理nuxt項目的靜態資源

server
{
 listen 80;
 server_name xxx.domain.com; #該域名是接下來我們直接通過這個鏈接訪問nuxt應用
 index index.php index.html index.htm default.php default.htm default.html;
 root /www/wwwroot/nuxt項目根目錄;
 # 代理端口
 location / {
 proxy_http_version 1.1;
 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection "upgrade";
 proxy_set_header Host $host;
 proxy_set_header X-Nginx-Proxy true;
 proxy_cache_bypass $http_upgrade;
 proxy_pass http://127.0.0.1:3000;
 }
 # 代理靜態資源
 location ^~ /_nuxt/{
 proxy_set_header Host $host;
 proxy_pass http://127.0.0.1:3000;
 }
 location ^~ /js/{
 proxy_set_header Host $host;
 proxy_pass http://127.0.0.1:3000;
 }
 location ^~ /css/{
 proxy_set_header Host $host;
 proxy_pass http://127.0.0.1:3000;
 }
 location ^~ /image/{
 proxy_set_header Host $host;
 proxy_pass http://127.0.0.1:3000;
 }
}

重啟nginx,瀏覽器打開xxx.domain.com，發現一切都正常啦

結語

今天有關nuxt部署的技巧就分享到這裡啦，覺得不錯就點下你們寶貴的關注吧┭┮﹏┭┮，或者有什麼其他問題可以下方留言喲，我會一一解答（不限前端，後端，不限開發語言喲）(●'◡'●)