日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 前端技术 > vue >内容正文

vue

一三五、服务器部署Node项目、Vue spa静态项目、ssr项目

發布時間:2023/12/10 vue 33 豆豆
生活随笔 收集整理的這篇文章主要介紹了 一三五、服务器部署Node项目、Vue spa静态项目、ssr项目 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、 準備一個服務器

我學習使用,買的騰訊輕量應用服務器¥198 4年

二、 linux環境搭建

  • Node (服務器預裝了)
  • Nginx(服務器預裝了)
  • git 具體查看linux 安裝git教程
  • MySql 具體查看Linux 安裝 MySQL 詳細教程
  • 三、 node部署

  • cd /home/node/
  • git clone git@github.com:Alie-z/nodejs-koa-blog.git 或者 git clone https://github.com/Alie-z/nodejs-koa-blog.git
  • cd nodejs-koa-blog
  • npm i || yarn || pnpm i
  • mysql -uroot -p xxx 登陸mysql
  • 初始化mysql 創建數據庫 CREATE DATABASE IF NOT EXISTS boblog DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
  • npm run start
  • postman 或者瀏覽器訪問 ip + 端口 發現訪問不了,是因為服務器防火墻沒有開放對應端口
  • 到服務器后臺 防火墻>添加規則 填寫自己的端口 確定 (順便把mysql web要使用的端口也添加)

  • 訪問一個接口 http://119.91.139.245:9000/api/v1/category
  • node部署大功告成
  • 四、 spa靜態項目部署

  • cd /home/node/nodejs-koa-blog/admin-blog/
  • npm i || yarn || pnpm i
  • npm run build:prod
  • 查看Nginx 配置路徑 ps -aux|grep nginx
  • cd /usr/local/lighthouse/softwares/nginx/conf
  • 新建文件夾 mkdir web
  • 新建文件 blob-admin.conf
  • server {listen 8081; #端口server_name 119.91.139.245; #域名或者IPlocation / {root /home/node/nodejs-koa-blog/admin-blog/dist; #靜態文件的目錄index index.html index.htm; #入口文件try_files $uri $uri/ /index.html;# 首先嘗試打開指定path的文件,如果文件不存在,則繼續打開下一個文件,如果都打不開則返回500# 假設請求為http://www.baidu.com/test,則$uri為test# 訪問時查找/$root/test文件沒,如果不存在就嘗試打開/$root/test/目錄,如果還不存在就打開/index.html} }
  • 編輯nginx.conf 加載web文件夾下的 .conf文件
  • cd ../ vim nginx.conf# 在最下面插入 include web/*.conf; # 保存退出
  • 查看配置文件是否正確 nginx -t
  • 重啟nginx nginx -s reload
  • 訪問 http://119.91.139.245:8081/
  • spa靜態項目部署大功告成
  • 五、 ssr部署

  • cd /home/node/nodejs-koa-blog/frontend-boblog/
  • npm i || yarn || pnpm i
  • npm run build
  • npm run start
  • cd /usr/local/lighthouse/softwares/nginx/conf/web
  • 新建文件 blob.conf
  • server {listen 8080;server_name 119.91.139.245;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;#反向代理到本機的nuxt node服務上proxy_pass http://localhost:3001/; } }
  • 查看配置文件是否正確 nginx -t
  • 重啟nginx nginx -s reload
  • 訪問 http://119.91.139.245:8080/
  • ssr項目部署大功告成
  • 六、 踩坑

  • 使用命令mysql -uroot -p連接mysql數據庫報錯:error while loading shared libraries: libncurses.so.5: cannot open shared object file
    • 沒有libncurses.so.5,可能有libncurses.so不同版本的文件,使用命令 find / -name 'libncurses*'
      - 查找到/usr/lib/x86_64-linux-gnu/libncurses.so.6.2
      - 建立軟鏈接 ln -s libncurses.so.6.2 libncurses.so.5
      - 如果沒有找到的話,使用yum或apt安裝即可
  • error while loading shared libraries:libtinfo.so.5: cannot open shared object file
  • 同上,先查找有沒有其它版本,建立軟鏈接
  • 部署后訪問不了,一直以為是代碼或者部署流程的原因,后來發現是防火墻端口沒開啟😭

  • 部署ssr的時候,因為ssr項目是啟一個node服務,配置nginx的時候proxy_pass一直監聽的是開發環境的端口,一直訪問不了,后端發現端口不對,所以在nuxt.config.js 需要配置server的port、host,建議和開發環境的端口保持一直,減少心智負擔😭

  • export default {......server: {port: '3001',host: 'localhost'} };

    下一篇:node實現從零到一自動化部署

    看完記得 github點個start

    總結

    以上是生活随笔為你收集整理的一三五、服务器部署Node项目、Vue spa静态项目、ssr项目的全部內容,希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。