这边文章有点长，有点干，自行备水，直接上干货，先说node后端服务器部署流程，服务器这里是以阿里云为例子，也可以用其他运营商，没啥区别
服务器介绍及初步设置
登录阿里云，点击左侧菜单->云服务器ECS
进来后如果你已经购买过了就会显示当前服务器，如果没有就去“创建实例”，如果不太懂配置什么的，
你就直接切换到“快速购买”，然后根据自身实力去购买，个人网站的话最低配都没问题。
购买成功后，阿里云会给你发短信，告诉你账户（默认root）和公网IP。
购买成功后，直接访问公网IP 是不能访问的，需要配置安全组规则，点击左侧菜单“安全组”--->“匹配规则“
点击“手动添加”，443、3306、80端口
下面我们去尝试远程连接服务器
防止我下面误导你，ssh root@123.....（用户：root，公网IP：123.***） 有问题，您留言吧！！
Node.js部署
1. 服务器连接及环境安装
经过上面的步骤我门已经有了服务器账号密码，现在可以先尝试一下去远程连接一下，打开终端窗口输入ssh root(账号)@IP 和服务器密码
ssh root@123.**(公网IP)
有可能会提示其他的错 比如当前第二次连接，已经有了key，你就要删掉。
通过输入命令，回车
ssh-keygen -R 123.**(公网IP)
下面就继续重新远程连接，ssh root(账号)@IP 和密码
ssh root@123.**(公网IP)
回车后，会提示你以前没连接过这个服务器，要不要继续连接？ 输入yes ！
会告诉你已经将你这个公网IP添加到服务器列表当中了！继续重新输入远程连接，ssh root(账号)@IP 和密码
ssh root@123.**(公网IP)
进入服务器后，通过下面命令，可观察到初始化的文件夹
// 进入根目录
cd /
ls
目录结构图 （https://www.runoob.com/linux/linux-system-contents.html）runoob这里有详细的目录解释，阿里云开发社区也有，但是我这下子没找到
初步认识了服务器后，我们接下来安装环境
// 进入/usr/local目录去安装node、nginx
cd /usr/local
安装Node
https://nodejs.org/en/download 进入node.js官网下载目录，鼠标右击选择复制链接地址
在终端窗口中执行
下载node压缩包 node-v16.17.0-linux-x64，
wget https://nodejs.org/dist/v16.17.0/node-v16.17.0-linux-x64.tar.xz
下载完成后，执行ls 可以看到当前下载的node 包
node压缩包
然后我们去解压它,
// 解压
tar -xvf node-v16.17.*****.tar.xz
// 解压后可以删除node压缩包，也可以不用,命令是
rm node-vv16.17.*****.tar.xz
配置全局环境变量，使全局下都能使用node 命令
// 配置全局node
// 把 /usr/local/node-v16.17.0-linux-x64/bin/node 指向 /usr/local/sbin/node
ln -s /usr/local/node-v16.17.0-linux-x64/bin/node /usr/local/sbin/node
// 配置全局npm
ln -s /usr/local/node-v16.17.0-linux-x64/bin/npm /usr/local/sbin/npm
友情提示开始：
如果是node 版本过高，目前18算高的，访问node -v则会报错，则需要降低版本，下面提一嘴怎么删！！！
先删除高版本node 以及全局环境变量
//删除文件夹
rm -rf 文件夹名称
// 删除安装包
rm 文件名称
// 进入sbin目录删除node、npm环境变量
cd /usr/local/sbin/
rm -rf node
rm -rf npm
删除后重新安装低版本就好，18的版本是会报错的。
友情提示结束：
安装16.7.0成功后的样子，接下来安装mysql
安装MySQL
进入mysql官网 https://downloads.mysql.com/archives/shell/ 复制下载链接, 用我提供的也行，也是新的！
进入/usr/local目录下下载mysql 安装包
[root@hecs-79640 local]# rpm -ivh http://dev.mysql.com/get/mysql80-community-release-el7-3.noarch.rpm
安装mysql
[root@localhost ~]# yum install -y mysql-server
或
[root@localhost ~]# yum install mysql-community-server
如果显示以下内容说明安装成功
Complete!
如果提示失败,比如下面的提示 “什么公钥尚未安装”，可执行
sudo yum install mysql-server --nogpgcheck
设置mysql
设置开机启动Mysql
[root@localhost ~]# systemctl enable mysqld.service
检查是否已经安装了开机自启动
[root@localhost ~]# systemctl list-unit-files | grep mysqld
如果显示以下内容说明已经完成自动启动安装 mysqld.service enabled, 这里有的会显示俩个，无所谓啊！mysqld.service enabled开着的就行
设置开启服务
[root@localhost ~]# systemctl start mysqld.service
登录并修改mysql密码
查看mysql默认密码
[root@hecs-79640 local]# grep 'temporary password' /var/log/mysqld.log
2023-05-04T09:07:16.268453Z 6 [Note] [MY-010454] [Server] A temporary password is generated for root@localhost: Yk.QRmiq4K4j （Yk.QRmiq4K4j 就是初始密码）
第一次登录mysql，输入账号和默认密码
[root@hecs-79640 local]# mysql -u root -p
// （-u 指的是user, -p 指的是password）
这里第一次登录输入默认密码
命令前面的路径是故意复制进来的，怕有的人搞错位置了
修改当前默认密码
（改密码需要有大小写字母、数字、特殊字符组合）
mysql> ALTER USER 'root'@'localhost' IDENTIFIED BY '你的新密码';
改了密码需要退出后使用新密码重新登录
exit // 退出
命令立即执行生效, 这个好像可以不用执行
mysql> flush privileges;
这时候使用navicat等数据库工具去远程连接，还是会报错，因为mysql 默认是本机连接，
解决方案，登录MySQL，修改user表登录用户的host
mysql> use mysql;
更新主机，“%”=“*” 表示所有的主机都能访问呢
mysql> update user set host ='%' where user='root';
更改加密方式
mysql> ALTER USER 'root' @ '%'IDENTIFIED BY 'password' PASSWORD EXPIRE NEVER;
更新你的密码
mysql> ALTER USER 'root' @ '%' IDENTIFIED WITH mysql_native_password BY '你的mysql密码';
注意英文别打错了， 成功后，重新使用navicat 测试连接
这里因为我们设置了所有的远程工具都可以去连接它，所以后期需要在安全组规则中把3306端口关闭掉！！！！！
连接上mysql后，自己可以把自己的库和表结构都导出导入一下
代码部署
首先把本地代码提交到git 仓库
依然通过终端窗口登录服务器
ssh root@123.***
然后我们去安装git
yum install git
安装成功后，我们在根目录下新建项目存放目录
// 进入根目录下
[root@hecs-79640 /]# cd /
// 新建项目存放目录
[root@hecs-79640 /]# mkdir www
//进入www
[root@hecs-79640 /]# cd www/
//新建存放目录，因为后期会有很多项目
mkdir admin
// 进入项目 cd admin/
// 然后通过git clone <url> 拉代码, 私有项目的话，每次clone、拉取会要求输入git账户、密码
[root@hecs-79640 admin]# git clone https://gitee.com/******.git
//并且安装一下扩展
npm install
//拉下来后，可以去执行一下 启动文件
node main.js
⚠️这里注意一下，确认代码里面的服务器请求地址配置，以及远程数据库的表结构是否都已经导入进来，不然会提示找不到数据库啥的，
这是启动成功的样子，我们知道我们启用了项目后，命令行就无法使用了，哪怎么办？接着看
解决上面的问题，就要提到pm2,
Pm2安装及使用
pm2是一个进程管理工具,可以用它来管理你的node进程，并查看node进程的状态，当然也支持性能监控，进程守护，负载均衡等功能。
全局安装pm2，因为后期可能会在不同的目录下去使用pm2
npm install -g pm2
创建全局环境变量
[root@hecs-79640 www]# ln -s /usr/local/node-v16.17.0-linux-x64/bin/pm2 /usr/local/bin/pm2
一些简单的命令
// 查看当前进程列表
[root@hecs-79640 www]# pm2 list
第一次运行项目，后面可以使用ID去改变 项目状态
pm2 start app.js
online 表示在线，正在运行中...
我们也可以通过这个id去改变项目的开启和停止
pm2 start 0 //启动
pm2 stop 0 // 停止
凡是去更新过项目代码，则需要重启一下项目
项目启动后，暂时就不管了！接下来，要访问项目还需要配置反向代理，别人才能域名访问你这个网站
nginx安装及配置
nginx安装
第一步：下载nginx压缩包
点我下载nginx->鼠标右击复制链接
然后直接使用wget命令下载，指令如下所示（请根据自己的需求进行下载）：
// 注意：这里建议选择官网发布的稳定版本
wget -c http://nginx.org/download/nginx-1.22.1.tar.gz
注意：这一步最好在自己的目标目录进行操作，我一般是把压缩包下载到/usr/local目录下。
第二步：配置nginx安装所需的环境
安装gcc
安装 nginx 需要先将官网下载的源码进行编译，编译依赖 gcc 环境。安装指令如下：
yum install gcc-c++
安装PCRE pcre-devel
Nginx的Rewrite模块和HTTP核心模块会使用到PCRE正则表达式语法。这里需要安装两个安装包pcre和pcre-devel。第一个安装包提供编译版本的库，而第二个提供开发阶段的头文件和编译项目的源代码。安装指令如下：
yum install -y pcre pcre-devel
3.安装zlib
zlib库提供了开发人员的压缩算法，在Nginx的各种模块中需要使用gzip压缩。安装指令如下:
yum install -y zlib zlib-devel
4.安装Open SSL
nginx不仅支持 http协议，还支持 https（即在 ssl 协议上传输 http），如果使用了 https，需要安装 OpenSSL 库。安装指令如下：
yum install -y openssl openssl-devel
第三步：解压nginx压缩包并安装
将压缩包进行解压，解压指令还是写一下吧：
tar -zxvf nginx-1.22.1.tar.gz
解压之后，进入加压文件，即
cd nginx-1.22.1.tar.gz。
然后进行配置，推荐使用默认配置，直接./configure就好了，如下图所示：
额外说明：如果需要开始https支持，这里请不要直接执行./configure，即不要直接执行该脚本，而是在该脚本后面加上SSL模块，请执行如下命令替代 ./confingure :
./configure --with-http_ssl_module
至于 --with-http_ssl_module 的意思，顾名思义可知是添加https支持。
添加https支持也很简单，添加SSL证书并修改 nginx.conf 配置文件即可，后面有
编译安装nginx
这里和redis的编译安装比较类似，首先在当前目录（/usr/local/nginx-1.10.1）进行编译。输入make即可
make
然后回车，如果编译出错，请检查是否前面的4个安装都没有问题。
编译成功之后，就可以安装了，输入以下指令：
make install
ok，安装成功。
这时候返回上一级目录，就会发现多了nginx目录，接下来，启动nginx。
第五步：启动nginx
进入/usr/local/nginx/sbin目录，输入./nginx即可启动nginx
./nginx
关闭nginx
./nginx -s quit 或者 ./nginx -s stop
重启nginx
./nginx -s reload
查看nginx进程
ps aux|grep nginx
设置nginx开机启动，只需在rc.local增加启动代码即可。
vim /etc/rc.local
然后在底部增加/usr/local/nginx/sbin/nginx
此外，进入/usr/local/nginx/conf目录可修改nginx的配置文件 -> vim nginx.conf
譬如修改域名以及端口啥的，在server里面进行修改，下面我们就去看看吧
配置Nginx
我这里推荐直接使用远程工具链接服务器，然后进入到/usr/local/nginx/conf目录里面，
用开发编辑器打开nginx.conf，这样不会因为服务器卡死什么的，省得麻烦,下面是配置,最好是复制到编辑器去看⚠️
user nobody; worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; #gzip on; server { listen 80; //默认指向80端口 server_name localhost; //域名，也可以直接就写localhost location / { //这里放前端配置，因为需要打开域名就直接访问网站，而不是要加子目录 root /www/项目名称/dist; index index.html index.htm; #防止刷新404 try_files $uri $uri/ /index.html; #add_header Access-Control-Allow-Origin *; #add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; #add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; } # 配置api location /service/ { proxy_pass http://127.0.0.1:8099/;端口是指你连接服务器的端口 proxy_connect_timeout 15s; proxy_send_timeout 15s; proxy_read_timeout 15s; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #} } # another virtual host using mix of IP-, name-, and port-based configuration # #server { # listen 8000; # listen somename:8080; # server_name somename alias another.alias; # location / { # root html; # index index.html index.htm; # } #} # HTTPS server # server { listen 443 ssl; server_name localhost; #这是ssl证书，一定的是“以签发”的证书，下载到本地后。 #在服务器/usr/local/nginx/目录下新建cert目录，把下载好的 # 这里的目录啊是从根节点开始的，如果cert/server.crt;是找不到文件的，重启的时候会报错 ssl_certificate /usr/local/nginx/cert/server.crt; ssl_certificate_key /usr/local/nginx/cert/server.key; ssl_session_cache shared:SSL:1m; ssl_session_timeout 5m; ssl_ciphers HIGH:!aNULL:!MD5; #加密套件。 ssl_prefer_server_ciphers on; location / { //这里放前端配置，因为需要打开域名就直接访问网站，而不是要加子目录 root /www/项目名称/dist; index index.html index.htm; #防止刷新404 try_files $uri $uri/ /index.html; #add_header Access-Control-Allow-Origin *; #add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; #add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; } # 配置api location /service/ { proxy_pass http://127.0.0.1:8099/;端口是指你连接服务器的端口 proxy_connect_timeout 15s; proxy_send_timeout 15s; proxy_read_timeout 15s; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }
升级https,
下面是配置,最好是复制到编辑器去看⚠️
HTTPS server # server { listen 443 ssl; server_name localhost; #这是ssl证书，一定的是“以签发”的证书，下载到本地后。 #在服务器/usr/local/nginx/目录下新建cert目录，把下载好的俩个文件更名为server.crt和server.key ssl_certificate /usr/local/nginx/cert/server.crt; ssl_certificate_key /usr/local/nginx/cert/server.key; ssl_session_cache shared:SSL:1m; ssl_session_timeout 5m; ssl_ciphers HIGH:!aNULL:!MD5; #加密套件。 ssl_prefer_server_ciphers on; location / { //这里放前端配置，因为需要打开域名就直接访问网站，而不是要加子目录 root /www/项目名称/dist; index index.html index.htm; #防止刷新404 try_files $uri $uri/ /index.html; #add_header Access-Control-Allow-Origin *; #add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; #add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; } # 配置api location /service/ { proxy_pass http://127.0.0.1:8099/;端口是指你连接服务器的端口 proxy_connect_timeout 15s; proxy_send_timeout 15s; proxy_read_timeout 15s; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }
然后在工具上传，再到终端窗口里面去重启一下nnginx
进入/usr/local/nginx/sbin目录，输入./nginx -s reload即可启动nginx， 但凡修改过nginx 配置 都需要重新启动一下
./nginx -s reload
再回到浏览器中，通过访问“公网IP /service”就能直接访问部署的接口，访问“公网IP ”就是你的前端工程项目
后端部署到这里就结束了！文档太大了，有点卡。如果要开启gzip 后面有，继续看
Vue.js项目部署
目前我们服务器已经安装了node、npm、git等环境。我们继续部署前端工程项目
打开终端窗口登录服务器
//登录
ssh root@123.***(公网IP)
//输入密码后成功进入根目录下
// 进入我们新建的工程目录下
cd /www
// 新建前端项目目录
mkdir client
// 进入client
cd client
// 拉取git仓库代码
git clone <url>
// 安装扩展
npm install
因为我们可以从vite.config.js或者vue.config.js的outDir：‘dist’去配置打包生产的目录名称，
所以这里的目录名称要跟nginx里面的配置项名称一致，不然nginx找不到目录,就无法生效。
这样我们的项目就部署好了
备注⚠️
但是有几个点需要记住一下，
以前都是在开发, mysql数据库 都是连的本地的，就需要改成线上的，通过域名方式，云服务器都有了，肯定也要去买个不值钱的域名嘛！https://****.com/service/api*****， 前端请求也改为线上域名。
就是前端接口请求成功了但是不会响应数据回来，响应里面是一个html，我自己的方式是注释vite.config.js（vue.config.js）里面的proxy，在Axios 里面设置baseUrl；肯定有其他方式，但是我这里为了快点解决 就是这样做的。
- nginx 如果改了还是不生效的，记得重启， 还有就是目录结构对不对
就这，有问题欢迎留言，再见再见！持续更新～～
更新帖
开启Gzip
如果要开启gzip ，只需做俩件事 前端工程中开启gzip, 服务器配置中nginx开启gzip。
前端工程这边我用的是vite构建的项目，使用的是vite-plugin-compression
yarn add vite-plugin-compression -D
or
npm i vite-plugin-compression -D
// vite.config.js
import viteCompression from 'vite-plugin-compression';
export default () => {
return {
plugins: [
// 启用zip包压缩
viteCompression({
algorithm: 'gzip', // 压缩算法，可选[‘gzip’，‘brotliCompress’，‘deflate’，‘deflateRaw’]
threshold: 307200, // 大于300k启用zip包压缩,默认1025，单位是b, 不是kb
verbose: false, //是否在控制台中输出压缩结果
deleteOriginFile: true, // 压缩后是否删除源文件
}),
],
};
};
配置好后 然后build 打包后diast目录里面就会生成文件***.gz 带gz格式文件
如果直接上传服务器是不能别解析，会提示找不到或者以下错误提示， 所以nginx 也需要配置
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
进入nginx文件夹内 /usr/local/nginx/conf 找到nginx.conf使用编辑工具打开，下面是配置，根据注释来开启
#开启压缩包
gzip on;
#低于300k的资源不压缩
gzip_min_length 300k;
#压缩级别1-9，越大压缩率越高，同时消耗cpu资源也越多，建议设置在4左右。
gzip_comp_level 4;
#需要压缩哪些响应类型的资源，多个空格隔开。不建议压缩图片.
gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
#配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
gzip_disable "MSIE [1-6]\.";
#是否添加“Vary: Accept-Encoding”响应头
gzip_vary on;
#设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区
gzip_buffers 4 16k;
#nginx对于静态文件的处理模块，开启后会寻找以.gz结尾的文件，直接返回，不会占用cpu进行压缩，如果找不到则不进行压缩
gzip_static on;
#设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;
这里要说一下gzip_static怎么配置的，其他的项只要复制上去就行了，但还是gzip_static 需要配置，如果已经配置过了，直接重启一下nginx 就行了, 如果不知道自己有没有配置，看下面
1.检测是否安装gzip_static， 在***/nginx/sbin/目录下执行 ./nginx -V 如果没有--with-http_gzip_static_module，则就是没有配置
[root@localhost sbin]# ./nginx -V
nginx version: nginx/1.22.1
built by gcc 4.8.5 20150623 (Red Hat 4.8.5-44) (GCC)
built with OpenSSL 1.0.2k-fips 26 Jan 2017
TLS SNI support enabled
configure arguments: --with-http_ssl_module
当前还有一个方法执行 ./nginx -t, 检测nginx配置是否正确,如果不正确会有下面提示
root@localhost sbin]# ./nginx -t
nginx: [emerg] unknown directive “gzip_static” in /usr/local/nginx/conf/nginx.conf:31
- 并使用 cd 命令切换到解压后的 Nginx 源代码目录。例如，如果源代码解压在 /usr/local/nginx-1.22.1 目录中，则运行：
cd /usr/local/nginx-1.22.1
请注意，根据您解压源代码的位置和版本号，上述路径可能会有所不同。
- 现在，再次尝试运行 ./configure，把你原来的 configure arguments 拷贝过来（上面./nginx -V里面有），然后增加 --with-http_gzip_static_module 即可，执行命令如下:
[root@localhost nginx-1.22.1]# ./configure --with-http_ssl_module --with-http_gzip_static_module
请确保您在执行命令时使用的是标准的短横线（-）
- 运行 make 命令以编译 Nginx
make
- 运行 make install 命令以安装新编译的 Nginx
make install
然后去重启nginx就可以了 ；
执行./nginx -s reload，或者在重启的地方执行./nginx -V就可以看见 已经加入了gzip_static
[root@localhost sbin]# ./nginx -V
nginx version: nginx/1.22.1
built by gcc 4.8.5 20150623 (Red Hat 4.8.5-44) (GCC)
built with OpenSSL 1.0.2k-fips 26 Jan 2017
TLS SNI support enabled
configure arguments: --with-http_ssl_module --with-http_gzip_static_module
