linux配置https,让vue-cli打包项目和node服务器跑起来

ssl证书绑定域名

• 购买域名，解析域名并绑定公网ip
• 购买ssl证书绑定该域名也就是公网ip

服务器配置node环境

• 安装分布式版本管理系统Git

yum install git -y 

• 使用Git将NVM的源码克隆到本地的~/.nvm目录下，并检查最新版本

git clone https://gitee.com/mirrors/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`

• 依次运行以下命令，配置NVM的环境变量

echo ". ~/.nvm/nvm.sh" >> /etc/profile
source /etc/profile

• 运行以下命令，查看Node.js版本

nvm list-remote

• 安装多个Node.js版本

nvm install v16.17.0

• 查看已安装的Node.js版本

nvm ls

• 切换Node.js版本

nvm use v16.17.0

• 查看npm版本

npm -v

• 确保npm版本与开发环境的npm版本一致

npm install -g npm@9.7.2

• 如果npm i报错运行如下命令，参考https://blog.csdn.net/shuux666/article/details/123427231

npm fund
npm audit fix --force
npm audit

将node服务器挂起

• 将本地的node服务器文件，放到/usr/server/node文件夹下，如果不存在该文件夹，则手动创建
• 运行nohup node [启动js文件] > output.log 2>&1 &

nohup 命令可以在会话关闭后保持进程运行，而 & 用于将进程放到后台。
nohup: 忽略挂起信号，确保进程在关闭终端后仍然运行。
> output.log 2>&1: 将标准输出和错误日志写入 output.log 文件。
&: 将进程放入后台运行

nginx代理node服务器

• 进入/etc/nginx/conf.d目录，新建node.conf文件，并把ssl证书的key文件和pem文件放置到该目录

server {
     listen 3888 ssl; // 公网ip的3888端口映射到本地node服务3000端口
     server_name *****; // 域名
     ssl_certificate /etc/nginx/conf.d/pem文件;
     ssl_certificate_key /etc/nginx/conf.d/key文件;
     ssl_session_cache shared:SSL:1m;
     ssl_session_timeout 5m;
     ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
     ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
     ssl_prefer_server_ciphers on;
     location / {
         proxy_pass http://127.0.0.1:3000/; //本地node服务
     }
}

nginx配置vue项目

• 将打包好的vue项目放到/usr/server/app目录
• 进入/etc/nginx/conf.d目录，新建vue.conf文件

server {
     listen 3333 ssl;  // 公网ip的对应访问端口
     server_name *****; // 域名
     ssl_certificate /etc/nginx/conf.d/pem文件;
     ssl_certificate_key /etc/nginx/conf.d/key文件;
     ssl_session_cache shared:SSL:1m;
     ssl_session_timeout 5m; 
     ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
     ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
     ssl_prefer_server_ciphers on;
     gzip_static on;
     gzip_proxied expired no-cache no-store private auth;
     gzip on;
     gzip_min_length 1k;
     gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript;
     gzip_vary on;
     gzip_disable "MSIE [1-6]\.";
     location / {
         root /usr/server/app/large-screen; // vue打包文件目录
         index index.html;
         try_files $uri $uri/ /index.html;
     }
     // 如果服务器存在跨域问题，那么这里需要配置下代理，配置跟vue-cli开发服务器的跨域配置一致
    location /api {
     proxy_pass http://127.0.0.1:3000;
    }
    location /res {
     proxy_pass http://127.0.0.1:3000;
    }
    location /static {
     proxy_pass http://127.0.0.1:3000;
    }
}

对此，通过访问https://域名:3333即可访问到vue项目

贴一个vue-cli项目，开发环境和生产环境的baseURL

const instance = axios.create({
    baseURL: process.env.NODE_ENV === 'production' ? "https://域名:3888/" : "http://127.0.0.1:3000/",
    timeout: 5000
})