将Vue項目部署到伺服器上

這裡使用兩種方式将項目部署到伺服器上，nginx和nodeJS(pm2進行管理)，主要記錄一下。

一.準備

伺服器系統：CentOS7

• 1.将Vue項目進行打包

在項目根目錄的指令行中輸入npm run build

• 2.打包完成

打包完成後，會在項目根目錄生産dist檔案夾，我們到時需要将這個檔案夾丢到伺服器上。

二.使用nginx部署

參考教程：https://www.cnblogs.com/boonya/p/7907999.html

安裝所需環境

Nginx 是 C語言 開發，建議在 Linux 上運作，當然，也可以安裝 Windows 版本，本篇則使用 CentOS 7 作為安裝環境。

• gcc 安裝

yum install gcc-c++
           

• PCRE pcre-devel 安裝

yum install -y pcre pcre-devel
           

• zlib 安裝

yum install -y zlib zlib-devel
           

• OpenSSL 安裝

yum install -y openssl openssl-devel
           

• Nginx下載下傳

nginx目前最新版本為1.18

1.官網下載下傳，直接下載下傳.tar.gz安裝包，位址https://nginx.org/en/download.html，到時候丢到伺服器上去就好了。

2.在centOS中用wget指令下載下傳，如果沒有安裝wget-》安裝wget指令 yum

在有nginx壓縮包的目錄下執行指令：

tar -zxvf nginx-1.18.0.tar.gz
cd nginx-1.18.0
           

使用預設配置，輸入指令：

./configure
           

自定義配置參考上面給出的教程

安裝指令：

make
make install
           

安裝完畢之後，查找安裝路徑指令：

whereis nginx
           

(一般會在/usr/local/nginx)

進入到安裝目錄，指令如下：

cd /usr/local/nginx
           

啟動、停止nginx

cd /usr/local/nginx/sbin/
 ./nginx 啟動nginx
 ./nginx -s stop 強制關閉nginx程序，kill
 ./nginx -s quit 等待nginx程序任務處理完畢後退出
 ./nginx -s reload 重新啟動nginx
           

啟動時報80端口被占用

netstat -antp | grep : 檢視伺服器上端口占用情況

解決辦法：

• 1、安裝net-tool包：

  yum install net-tools

• 2、kill程序，要清楚80端口上的程序是什麼 ，kill 程序ID

重新開機nginx

1.先停止再啟動(推薦):

先執行停止指令再執行啟動指令

./nginx -s quit
./nginx
           

2.重新加載配置檔案

當nginx的配置檔案./conf/nginx.conf，要想讓配置生效需要重新開機nginx

./nginx -s reload

啟動完成後，通路伺服器的IP位址，就會看到:

修改nginx配置檔案

1.找到配置檔案，nginx的配置檔案在安裝目錄(usr/local/nginx)下的conf/nginx.conf

2.對配置檔案進行修改（這裡可以用filezilla連接配接伺服器，将檔案拉到本地修改後再傳回伺服器）

user  nobody;
worker_processes  1; #伺服器的核心數

events {
    worker_connections  1024;
}
http {
	#沒有下面這兩行，Vue樣式會出不來
    include       mime.types;
    default_type  application/octet-stream;
    server {
        listen       8080;#端口号
        server_name  localhost;#伺服器的IP
        location / {
            root   /usr/local/dist;#Vue打包好的項目位置
            index  index.html;
        }
    }
}

           

3.修改完畢後，将打包後的Vue項目丢到配置檔案中指定的目錄下，然後重新開機nginx。

三.使用NodeJS部署

安裝參考文檔：https://github.com/nodesource/distributions

1.在伺服器上安裝nodejs

curl -sL https://rpm.nodesource.com/setup_15.x | bash -
yum install -y nodejs
           

2.在伺服器中建立一個檔案夾——vue_server(随便取)

在檔案夾目錄下，執行指令：

npm i express -S
           

(檔案夾也可以在自己電腦上創，到時候弄好通過filezilla丢到伺服器上就行了)

将dist檔案夾（打包好的vue項目）也放到該檔案夾下

3.在vue_server檔案夾中建立檔案app.js

const express = require('express')
const compression = require('compression')
const app = express()

// 一定要把這一行代碼 寫到靜态資源托管之前
app.use(compression())
app.use(express.static('./dist'))

app.listen(8080, () => {
})
           

這裡可以用指令 node app.js看下效果

4.使用pm2管理應用

在伺服器中安裝pm2: npm i pm2 -g

啟動項目：pm2 start app.js --name自定義名稱

檢視運作項目：pm2 ls

重新開機項目：pm2 restart 自定義名稱

停止項目：pm2 stop 自定義名稱

删除項目：pm2 delete 自定義名稱