部署vue項目到Linux服務器

案例一

• vue-cli構建vue3項目，將項目上傳到Linux服務器，服務器安裝node，並啟動vue項目

• 首先本地有一個vue項目，啟動后可正常訪問
  

• 本地打包后，也可直接訪問
  
  

• 若打包后的index.html頁面顯示空白，需在項目的根路徑下新建vue.config.js，再重新打包，參考
  

• Linux服務器安裝nodejs，參考

# 下載node壓縮包，在哪條路徑下執行該命令，就會下載到哪條路徑下
  wget https://npm.taobao.org/mirrors/node/v12.16.1/node-v12.16.1-linux-x64.tar.gz      
# 將壓縮包剪切到/usr/local/bin/路徑下，並解壓   
  tar -xvf node-v12.16.1-linux-x64.tar.gz       
# 修改文件夾名稱為NodeJs   
  mv node-v12.16.1-linux-x64 NodeJs  
# 安裝gcc        
  yum install gcc gcc-c++            
# 在/usr/local/bin/NodeJs/bin路徑下有三個文件：node  npm  npx
# 為這三個文件設置軟連接，/usr/bin目錄用於存放系統命令，此時在任意路徑下執行：node  相當於是執行/usr/local/bin/NodeJs/bin/node路徑下的文件，執行node后會進入node環境
  ln -s /usr/local/bin/NodeJs/bin/node /usr/bin/node         
  ln -s /usr/local/bin/NodeJs/bin/npm /usr/bin/npm          
  ln -s /usr/local/bin/NodeJs/bin/npx /usr/bin/npx         
# 進入根目錄
  cd
# 驗證
  node

• 將vue項目上傳到Linux服務器，編譯運行

# 進入vue項目的根目錄
  cd /home/web
# 安裝依賴
  npm install
# 編譯打包
  npm run build
# 啟動項目
  npm run serve

• 測試
  

錯誤總結

• 在Linux服務器上編譯項目時報錯如下，說明node版本過低，參考
  
• 在Linux服務器上編譯項目時報錯如下，說明node版本17.1.0過高
  
• 解決方案，參考

# 若之前使用yum安裝的node，需卸載后重新安裝，安裝步驟參考本篇博客中使用`源碼包`的方法安裝
# 卸載nodejs
  yum remove nodejs npm -y
# 進入 /usr/local/lib 刪除所有 node 和 node_modules文件夾
# 進入 /usr/local/include 刪除所有 node 和 node_modules 文件夾
# 進入 /usr/local/bin 刪除 node 的可執行文件

• 若編譯、啟動項目時報錯權限不足
  
• 解決方案

# 將指定文件設置權限
  chmod 777 /home/web/xxx

• 運行項目時報錯：warnings potentially fixable with the --fix option
• 解決方案，將項目中package.json中"lint": "vue-cli-service lint" 修改為：eslint --fix --ext .js,.vue src
  
• 參考

案例二

• vue-cli構建vue3項目，打包后將dist文件放到tomcat上
• Linux服務器安裝tomcat

# 用docker拉取tomcat容器
  docker pull tomcat   
# 后台啟動       
  docker run -d -p 8080:8080 tomcat    
# 啟動后瀏覽器訪問 http://192.168.0.102:8080/ 返回404
# 解決方案：
# 對外開放8080端口
  firewall-cmd --zone=public --add-port=8080/tcp --permanent  
# 重啟防火牆生效 
  firewall-cmd --reload     
# 進入tomcat容器
  docker exec -it 正在運行的容器id /bin/bash     
# 將webapps.dist目錄下的所有文件復制到webapps路徑下
  cp -r webapps.dist/* ./webapps        
# 刪除webapps.dist目錄
  rm -rf webapps.dist           
# 此時能通過瀏覽器訪問到tomcat頁面了，但tomcat鏡像重啟后依舊404，需將當前修改后的容器提交為一個新的鏡像
# 不停止容器的情況下退出
  ctrl + p + q                  
# 在容器運行狀態下提交自定義的容器，tomcat10:10.1是我自定義的鏡像名稱和版本號
  docker commit -a="作者" -m="備注" 正在運行的容器id tomcat10:10.1       
# 停止當前tomcat容器  
  docker stop 正在運行的容器id    
# 刪除該容器
  docker rm 運行后的容器id    
# 啟動自己提交的鏡像
  docker run -d -p 8080:8080 tomcat10:10.1         
 
# 補充
# 啟動tomcat鏡像的時候報錯：driver failed programming external connectivity on endpoint quirky_allen
# 錯誤原因：之前啟動后端項目時占用了8080端口，需將后端項目結束

# 測試，訪問 http://192.168.0.102:8080 看到tomcat頁面說明啟動成功

• 將打包后的項目放到tomcat容器

# 創建共享文件夾
  mkdir -p /home/mydocker/mytomcat8080/data
# 啟動容器8080：
  docker run \
  -p 8080:8080 \
  --name my-tomcat8080 \
  -v /home/mydocker/mytomcat8080/data:/usr/local/tomcat/webapps \
  -d \
  tomcat10:10.1

# 啟動容器時報錯：docker: invalid reference format.
# 錯誤原因：docker命令寫錯了，我這里是-v /home/mydocker/mytomcat8080/data:/usr/local/tomcat/webapps \  冒號后面多了一個空格

# 進入vue項目根目錄，打包后生成dist文件夾，這里我們還是使用案例一中的項目
  npm install
  npm run bulid
# 將打包后的文件復制到tomcat
  mv dist /home/mydocker/mytomcat8080/data
# 重啟tomcat容器
  docker restart tomcat容器id

# 測試，本地訪問 http://192.168.0.102:8080/dist/

案例三

• 使用nginx動靜分離的特性，轉發到vue項目打包后的dist/index.html
• docker安裝nginx，參考

# 拉取鏡像到本地
  docker pull nginx              
# 啟動鏡像，創建一個實例：
  docker run --name my-nginx -p 80:80 -d nginx
# 宿主機創建共享文件夾：
  mkdir -p /home/mydocker/mynginx/conf/conf.d
  mkdir -p /home/mydocker/mynginx/html
  mkdir -p /home/mydocker/mynginx/logs
# 將容器中的配置文件復制到共享文件夾：
  docker cp 正在運行的容器id:/etc/nginx/nginx.conf /home/mydocker/mynginx/conf
  docker cp 正在運行的容器id:/etc/nginx/conf.d /home/mydocker/mynginx/conf
  docker cp 正在運行的容器id:/usr/share/nginx/html /home/mydocker/mynginx
# 拷貝完之后就停止並刪除容器
  docker stop 容器id
  docker rm 容器id
# 重新啟動一個新的容器
  docker run -p 80:80 --name my-nginx --restart=always -v /home/mydocker/mynginx/conf/nginx.conf:/etc/nginx/nginx.conf -v       
  /home/mydocker/mynginx/conf/conf.d:/etc/nginx/conf.d -v /home/mydocker/mynginx/html:/usr/share/nginx/html -v /home/mydocker/mynginx/logs:/var/log/nginx -d nginx
# 自定義一個index.html，使用pscp傳輸到Linux，將該文件復制到/home/mydocker/mynginx/html目錄，再次訪問就是自定義的頁面了
 

• 配置default.conf
  
• 根據以上配置信息，我們需要將vue項目打包后，生成的dist文件夾里的文件復制到如下路徑
  
• 瀏覽器測試是否部署成功
  

補充

• 部署原理：vue項目打包后生成的dist文件夾其實就可以直接訪問了，nginx只是將請求轉發到Linux服務器的靜態文件
• 查看nginx配置文件：上面的localhost:80表示nginx的地址，如果nginx在一台服務器上，可通過http://服務器ip:80訪問到nginx
• 下面的root則表示訪問nginx時，會轉發到該路徑下的index.html頁面，也就是說我們可以隨意轉發到Linux服務器的靜態文件
  
• 而我最開始配置轉發路徑后卻沒有找到，下面進行錯誤還原
• 首先我有一個vue項目，編譯打包后是如下路徑
  
• 再配置一下nginx，最開始一看是沒有問題的
  
• 重啟nginx后測試，沒有找到指定的文件
  
• 錯誤原因：這是因為我啟動的nginx是一個容器，這個容器跑在docker上，就算指定了靜態文件路徑，它也不能訪問到宿主機上的文件的