前后端分离项目部署在远程服务器
前后端分离项目部署在远程服务器
一、关于SQL
软件
- 设法找到Linux版本的XAMPP软件下载地址
/8.2.4/xampp-linux-x64-8.2.4-0-installer.run
-
在Linux系统中下载指定地址处的XAMPP软件
wget XAMPP的下载地址 -
为XAMPP安装文件添加“执行”权限
chmod +x XAMPP安装包文件名 -
安装XAMPP可执行文件，稍等片刻即可安装完成
./XAMPP安装包文件名 -
找到XAMPP中服务器的启动脚本，运行其中的服务器
/opt/lampp/xampp restart -
删除XAMPP自带的欢迎网页，替换为自己的个人空间内容
rm -rf /opt/lampp/htdocs/*
运行
/opt/lampp/bin/mysql -uroot < /root/zhsq.sql
二、关于后端
软件
-
下载Node.js安装程序：
wget Node.js下载地址 -
解压缩下载得到的.tar.xz文件：
tar -xf Node.js压缩包 -
把Node.js可执行程序移动到/opt目录下：
mv /root/node-v18.16.0-linux-x64 /opt -
为Node.js目录创建一个快捷方式：
ln -s /opt/node-v18.16.0-linux-x64 /opt/node -
执行Node.js解释器，运行.js文件：
/opt/node/bin/node /root/zhsq_api/index.js #程序运行在前台，会阻塞后续的命令行输入 Ctrl+C 退出 /opt/node/bin/node /root/zhsq_api/index.js & #程序运行在后台，命令行可以继续接收输入 kill 进程编号 退出
运行
后端服务器源码 baseURL 需改为服务器地址 或 域名
/opt/node/bin/node /root/zhsq_api/index.js #程序运行在前台，会阻塞后续的命令行输入 Ctrl+C 退出
/opt/node/bin/node /root/zhsq_api/index.js & #程序运行在后台，命令行可以继续接收输入 kill 进程编号 退出
npm start / pm2 start index.js 运行
-
首先，使用以下命令更新软件包列表
sudo apt update -
接下来，运行以下命令安装
node.js运行环境和npm包管理器：sudo apt install nodejs npm -
安装完成后，您可以使用以下命令安装
pm2：sudo npm install pm2 -g -
日常启动
# npm start 启动 cd /root/fhtj && npm start & # pm2 启动 cd /root/xs && pm2 start index.js &如果安装pm2出现问题(可使用cnpm安装pm2)
#安装 Node.js
sudo apt install nodejs
#使用 npm 安装 cnpm
sudo npm install -g cnpm --registry=
#以上命令将使用淘宝 NPM 镜像来安装 cnpm。安装完成后，你可以使用 cnpm 命令来代替 npm 命令
cnpm install pm2 -g
三、关于页面
1.使用 XAMPP 自带的 Apach 部署
软件
之前说过安装XAMPP，此处不作赘述
源码改造
更改后端请求api的地址
在http/BasrUrl.js中把导出的URL环境改为生产环境
-
index.html 引入的.js/css 等资源的路径改为相对地址
-
修改 Vite 或 Webpack 的配置文件，指定加载资源时使用相对路径
//修改webpack.config.js 或 vite.config.js文件 base：'./', //Vite publicPath: './', //Webpack
-
-
路由模式
-
改为 hash 模式
-
在router下的index.js中
const router = new VueRouter({mode: 'hash', //路由地址访问时使用hash模式base: '/zhsq',routes, }) -
修改 Vite 或 Webpack 的配置文件，指定加载资源时使用相对路径
//修改webpack.config.js 或 vite.config.js文件 base：'./', //Vite publicPath: './', //Webpack -
执行 npm run build 执行文件打包上线
-
把静态文件打包为.zip，上传到Linux服务器，保存到XAMPP的htdocs下
-
-
继续使用 history 模式
- 首先在vue项下的router.js 文件配置 mode为history模式，并且设置好对应的base选项
const router = new VueRouter({mode: 'history', //路由地址访问时使用hash模式base: '/zhsq',routes, })-
为了防止打包上线引入文件的路径出错, 在vue.config.js文件配置publicPath
//修改webpack.config.js 或 vite.config.js文件 base：'./', //Vite publicPath: './', //Webpack -
执行 npm run build 执行文件打包上线
-
在对应站点的目录下 dist 文件夹下新建一个 .htaccess 文件注意前面有个点 在其中添加以下代码
RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ /zhsq/index.html [L] -
最后把刚刚build 出来的dist 目录下的重命名为 zhsq 就可以了
-
需要注意的是，记得在vue中准备一个404页面
还有就是 开启apache支持分布式配置(也就是支持.htaccess文件配置)
需要设置 AllowOverride All (XMAPP 默认设置过了)
需要支持路径重写必须加载重写模块 LoadModule rewrite_module modules/mod_rewrite.so
-
-
加载速度
运行
#启动MySQL和Apache服务
/opt/lampp/xampp restart
#访问以下地址
http://121.37.198.111/zhsq
2.使用 nginx 代理 部署
软件
-
下载安装包
进入官网 .html 下载稳定版
.25.1.tar.gz -
进入usr下的local文件夹
cd /usr/local/ -
在user下的local中创建nginx文件夹
mkdir nginx -
把nginx放到新建的nginx文件夹中,在这里解压
mv /root/nginx-1.25.1\(2\).tar.gz /usr//local/nginx/cd /usr/local/nginx/tar -xf nginx-1.25.1\(2\).tar.gz -
安装nginx的相关依赖
sudo apt update sudo apt install gcc zlib1g-dev libpcre3-dev libssl-dev -
生成 Makefile 可编译文件
# 进入解压后的 nginx-1.22.0 目录 cd nginx-1.22.0 目录# 执行configure脚本，设置安装nginx的初始化配置（--with-http_ssl_module：启动 SSL 的支持），生成 Makefile 可编译文件 ./configure --with-http_ssl_module运行make
make make install启动(不能使用重启命令)
/usr/local/nginx/sbin/nginx关闭
/usr/local/nginx/sbin/nginx -s stop如果自启动
/usr/local/nginx/sbin/nginx -s stop /usr/local/nginx/sbin/nginx
运行
页面打包前配置
//修改webpack.config.js 或 vite.config.js文件
base：'./', //Vite
publicPath: './', //Webpack
nginx.conf
server {listen 80;server_name 121.37.198.111;rewrite ^(.*) https://$server_name$1 permanent; location / {root html;index index.html index.htm;try_files $uri $uri/ /index/index.html;}location /skyy {alias skyy;index index.html;try_files $uri $uri/ /skyy/index.html; }}
前后端分离项目部署在远程服务器
前后端分离项目部署在远程服务器
一、关于SQL
软件
- 设法找到Linux版本的XAMPP软件下载地址
/8.2.4/xampp-linux-x64-8.2.4-0-installer.run
-
在Linux系统中下载指定地址处的XAMPP软件
wget XAMPP的下载地址 -
为XAMPP安装文件添加“执行”权限
chmod +x XAMPP安装包文件名 -
安装XAMPP可执行文件，稍等片刻即可安装完成
./XAMPP安装包文件名 -
找到XAMPP中服务器的启动脚本，运行其中的服务器
/opt/lampp/xampp restart -
删除XAMPP自带的欢迎网页，替换为自己的个人空间内容
rm -rf /opt/lampp/htdocs/*
运行
/opt/lampp/bin/mysql -uroot < /root/zhsq.sql
二、关于后端
软件
-
下载Node.js安装程序：
wget Node.js下载地址 -
解压缩下载得到的.tar.xz文件：
tar -xf Node.js压缩包 -
把Node.js可执行程序移动到/opt目录下：
mv /root/node-v18.16.0-linux-x64 /opt -
为Node.js目录创建一个快捷方式：
ln -s /opt/node-v18.16.0-linux-x64 /opt/node -
执行Node.js解释器，运行.js文件：
/opt/node/bin/node /root/zhsq_api/index.js #程序运行在前台，会阻塞后续的命令行输入 Ctrl+C 退出 /opt/node/bin/node /root/zhsq_api/index.js & #程序运行在后台，命令行可以继续接收输入 kill 进程编号 退出
运行
后端服务器源码 baseURL 需改为服务器地址 或 域名
/opt/node/bin/node /root/zhsq_api/index.js #程序运行在前台，会阻塞后续的命令行输入 Ctrl+C 退出
/opt/node/bin/node /root/zhsq_api/index.js & #程序运行在后台，命令行可以继续接收输入 kill 进程编号 退出
npm start / pm2 start index.js 运行
-
首先，使用以下命令更新软件包列表
sudo apt update -
接下来，运行以下命令安装
node.js运行环境和npm包管理器：sudo apt install nodejs npm -
安装完成后，您可以使用以下命令安装
pm2：sudo npm install pm2 -g -
日常启动
# npm start 启动 cd /root/fhtj && npm start & # pm2 启动 cd /root/xs && pm2 start index.js &如果安装pm2出现问题(可使用cnpm安装pm2)
#安装 Node.js
sudo apt install nodejs
#使用 npm 安装 cnpm
sudo npm install -g cnpm --registry=
#以上命令将使用淘宝 NPM 镜像来安装 cnpm。安装完成后，你可以使用 cnpm 命令来代替 npm 命令
cnpm install pm2 -g
三、关于页面
1.使用 XAMPP 自带的 Apach 部署
软件
之前说过安装XAMPP，此处不作赘述
源码改造
更改后端请求api的地址
在http/BasrUrl.js中把导出的URL环境改为生产环境
-
index.html 引入的.js/css 等资源的路径改为相对地址
-
修改 Vite 或 Webpack 的配置文件，指定加载资源时使用相对路径
//修改webpack.config.js 或 vite.config.js文件 base：'./', //Vite publicPath: './', //Webpack
-
-
路由模式
-
改为 hash 模式
-
在router下的index.js中
const router = new VueRouter({mode: 'hash', //路由地址访问时使用hash模式base: '/zhsq',routes, }) -
修改 Vite 或 Webpack 的配置文件，指定加载资源时使用相对路径
//修改webpack.config.js 或 vite.config.js文件 base：'./', //Vite publicPath: './', //Webpack -
执行 npm run build 执行文件打包上线
-
把静态文件打包为.zip，上传到Linux服务器，保存到XAMPP的htdocs下
-
-
继续使用 history 模式
- 首先在vue项下的router.js 文件配置 mode为history模式，并且设置好对应的base选项
const router = new VueRouter({mode: 'history', //路由地址访问时使用hash模式base: '/zhsq',routes, })-
为了防止打包上线引入文件的路径出错, 在vue.config.js文件配置publicPath
//修改webpack.config.js 或 vite.config.js文件 base：'./', //Vite publicPath: './', //Webpack -
执行 npm run build 执行文件打包上线
-
在对应站点的目录下 dist 文件夹下新建一个 .htaccess 文件注意前面有个点 在其中添加以下代码
RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ /zhsq/index.html [L] -
最后把刚刚build 出来的dist 目录下的重命名为 zhsq 就可以了
-
需要注意的是，记得在vue中准备一个404页面
还有就是 开启apache支持分布式配置(也就是支持.htaccess文件配置)
需要设置 AllowOverride All (XMAPP 默认设置过了)
需要支持路径重写必须加载重写模块 LoadModule rewrite_module modules/mod_rewrite.so
-
-
加载速度
运行
#启动MySQL和Apache服务
/opt/lampp/xampp restart
#访问以下地址
http://121.37.198.111/zhsq
2.使用 nginx 代理 部署
软件
-
下载安装包
进入官网 .html 下载稳定版
.25.1.tar.gz -
进入usr下的local文件夹
cd /usr/local/ -
在user下的local中创建nginx文件夹
mkdir nginx -
把nginx放到新建的nginx文件夹中,在这里解压
mv /root/nginx-1.25.1\(2\).tar.gz /usr//local/nginx/cd /usr/local/nginx/tar -xf nginx-1.25.1\(2\).tar.gz -
安装nginx的相关依赖
sudo apt update sudo apt install gcc zlib1g-dev libpcre3-dev libssl-dev -
生成 Makefile 可编译文件
# 进入解压后的 nginx-1.22.0 目录 cd nginx-1.22.0 目录# 执行configure脚本，设置安装nginx的初始化配置（--with-http_ssl_module：启动 SSL 的支持），生成 Makefile 可编译文件 ./configure --with-http_ssl_module运行make
make make install启动(不能使用重启命令)
/usr/local/nginx/sbin/nginx关闭
/usr/local/nginx/sbin/nginx -s stop如果自启动
/usr/local/nginx/sbin/nginx -s stop /usr/local/nginx/sbin/nginx
运行
页面打包前配置
//修改webpack.config.js 或 vite.config.js文件
base：'./', //Vite
publicPath: './', //Webpack
nginx.conf
server {listen 80;server_name 121.37.198.111;rewrite ^(.*) https://$server_name$1 permanent; location / {root html;index index.html index.htm;try_files $uri $uri/ /index/index.html;}location /skyy {alias skyy;index index.html;try_files $uri $uri/ /skyy/index.html; }}
发布评论