1. 程式人生 > 實用技巧 >centos7部署vue專案(前後端分離,nginx)

centos7部署vue專案(前後端分離,nginx)

轉載:https://www.cnblogs.com/tyrone2005/p/10298702.html

一、環境準備 

1、centos7系統 

2、mysql資料庫

3、在centos7虛擬機器上安裝好nginx

二、部署內容準備

1、後端war包或者可執行jar

因為我這裡是spring boot專案。我就以可執行jar檔案作為後端部署內容,如果是war包,則需要部署在web容器中,這個很簡單,不多說。

首先右鍵點選自己要部署的專案,run as---->maven insatll打包

  

  

找到打包好的jar,複製到centos上,

  

  

執行 java -jar XXXX.jar,後臺正常啟動,

  

2、前端,VUE靜態資源。

如果沒有安裝過node的先安裝node 、npm

進入前端專案根目錄,執行 nmp run build

構建完成後,可以看到前端專案根目錄下多了一個dist資料夾,這就是要部署的前臺檔案,

複製dist資料夾到centos下,

  

3.修改nginx配置檔案。

  

  

vi /usr/local/nginx/conf/nginx.conf

新建server節點

1 2 3 4 5 6 7 8 9 10 server { listen 8001; server_name 192.168.0.178; location /lic/ {
alias /usr/local/renren/dist/; index index.html index.htm; } }

  檢查配置檔案是否正確

   ./nginx -t

重新載入nginx配置

./nginx -s reload

檢查埠,並開放8001埠,

瀏覽器訪問:

http://192.168.0.178:8001/lic/

一切正常。

這裡有幾個問題需要注意:

第一,前臺專案的路徑和nginx配置檔案中配置的路徑需要一直。這裡用的root使用者,如果用其他使用者,可能訪問靜態資源會被禁止訪問(403),需要“chmod 755靜態資源路徑 ”授權,授權的時候要逐級授權,

比如、 chmod 755 /usr/local/renren/dist

    chmod 755 /usr/local/renren

chmod 755 /usr/local/

chmod 755 /usr

chmod 644 /usr/local/renren/dist/*

第二,nginx配置檔案中配置時,沒有用root ,而是使用alias