宝塔面板nodejs+vue+mysql前后分离项目部署上线

准备

• 服务器（我用的1核2G1兆 国内 Centos 7.5）
• 域名（可以不用）
• 项目
• mysql 5.7
• PM2

安装宝塔面板，及安装推荐配置

这个很简单，教程很多，就不赘述了。

部署项目

数据库

我用MYSQL
建库一定要记得选 utf6mb4

然后该导库导库。

前端

我是基于Vue，所以npm run build打包，然后把dist目录上传到前端的文件夹中。

然后面板 -> 网站

目录指向前端的目录，有域名写域名，没域名可以写服务器IP。

设置>配置文件，添加（文章尾有整体配置代码）：

location /api/
{
   proxy_pass http://域名:后端端口/;
}

前端的baseURL也需要对应进行修改
axios.defaults.baseURL = "http://域名/api/"的形式，与上面配置保持一致，实现跨域。

后端

同理，我个人是直接打包上传，解压（本地依赖都安装好的打包上传的，也没啥毛病）

打开终端跑跑看，有木有问题。

注意点

• Specified key was too long; max key length is 767 bytes 版本5.6以下很可能会报。

原因：
msyql5.6及以前版本， 默认索引最大长度767bytes，若使用utf8mb4格式编码（utf8字符占用3字节，utf8mb4字符占用4字节）， 则单个字段长度不能超过191， 5.7及之后版本， 限制放开到3072 bytes。

PS: 由于mysql的utf8编码并不是真正UTF-8，详细介绍请自行百度google，推荐使用utf8mb4，这个是通常所说的UTF-8。而utf8mb4的字符占用4字节，所以相较于utf8的占用3字节，更容易出现上面这种索引长度超限的问题。
解决方法：

查看配置：
show variables like 'innodb_large_prefix';
show variables like 'innodb_file_format';
修改为如下配置：
set global innodb_large_prefix=1;
set global innodb_file_format=BARRACUDA;

• 我是用的sequlize，所以数据库要5.7版本及以上。宝塔推荐配置mysql是5.6。所以要重装，用到的小伙伴要注意下。

没啥问题之后，找到软件商店下载PM2

下载完成，回到终端 pm2 start XXX(eg: ./bin/www)

需要到安全去开放后端端口

网站配置

1. SSL证书（教程也很多，腾讯云可以免费申请）
   强制HTTPS
   
2. 相关配置
   搞HTTPS搞出好多问题
   问题：
   • Mixed Content: The page at ‘.........’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘.........’. This request has been blocked; the content must be served over HTTPS.
   • Failed to load resource: net::ERR_NAME_NOT_RESOLVED
   • ERR_CERT_COMMON_NAME_INVALID
   • 此链接不安全
   • 访问静态资源404
   • vue在路由页面刷新404

原因：
1-4：HTTPS页面里动态的引入HTTP资源
6：用了history模式

上面问题尝试了无数种方法，最终的解决方式如下：

1-4 ：需要在前端端index.html中添加：
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
意思是自动将http的不安全请求升级为https，可以解决
修改完成之后会出现获取后端静态资源404, 如Get https....../1.jpg 404 需要nginx配置

整体配置（在网站>设置）如下：

server
{
    listen 80;
	listen 443 ssl http2;
    server_name 域名;
  
    index index.php index.html index.htm default.php default.htm default.html;
    root 前端目录;
    # 反向代理
    location /api/
    {
       proxy_pass http://域名:后端端口/;
    }
    # vue路由刷新404
    location /
    {
        index index.html index.htm index.php;
        root  前端目录;
        try_files $uri $uri/ @rewrites;
    }
    location @rewrites
    {
      rewrite ^(.+)$ /index.html last;
    }
    # 静态资源404
    location ~ /img/.*\.(gif|jpg|jpeg|png)$
    {
        proxy_pass http://域名:后端端口;
        rewrite ^/api/img/(.*)$ /img/$1 last;
    }
    
    ........................

nginx反向代理解释：

如：打开 http://www.qqq.com/api 访问 http://www.qqq.com:3000

#http://www.qqq.com服务器nginx配置api反向代理
location /api/ {
       proxy_pass http://www.qqq.com/;
}
# http://www.qqq.com/api/img  =>http://www.qqq.com:3000/img
就上面一段简单的代码，就完成了
注：http://www.qqq.com后面必须要有/

# 不加/
location /api/ {
       proxy_pass http://www.qqq.com/;
}
# http://www.qqq.com/api/img  =>http://www.qqq.com:3000/api/img

如果只是代理api，上面的已经满足了
如果要代理静态文件（如jpg,js等）可能就报404静态文件

http://www.qqq.com/api/img/1.gif  //404
http://www.qqq.com/api/img/1.jpg //404
静态部分需要单独代理：

location ~ /api/.*\.(gif|jpg|jpeg|png)$ { 
     proxy_pass http://www.qqq.com:3000;
}

# http://www.qqq.com/api/img/1.jpg => http://www.qqq.com:3000/api/img/1.jpg

以上代码就差一下，如果静态放在api/img目录，那就不用改了，如果静态文件都放在img目录，使用rewrite 替换即可

location ~ /img/.*\.(gif|jpg|jpeg|png)$ { 
     proxy_pass http://www.qqq.com:3000; 
     rewrite ^/api/img/(.*)$ /img/$1 last;
}

# http://www.qqq.com/api/img/1.jpg => http://www.qqq.com:3000/img/1.jpg

我后端用的NodeJS，静态资源访问的链接是http://www.qqq.com:3000/img/1.jpg
文件夹是img，后端地址：http://www.qqq.com:3000

前端在调用时，前端IP/api/img/1.jpg

我相信大家都会改哒。

我的网站：
www.ricolo.cn
希望大家来踩踩呀~

参考链接:
不用域名用IP部署的小伙伴可以看看：
https://blog.csdn.net/qq_23347131/article/details/109952657