nginx部署静态页面(vue/uniapp)+node服务到同一服务器
一、预备工作1、购买云服务器（我购买的是腾讯云）
（1）腾讯云链接： 登录 - 腾讯云
（2）我购买的是宝塔面板，最简朴的轻量服务器；https://console.cloud.tencent.com/lighthouse/instance/index?rid=8
2、使用腾讯云OrcaTerm终端：连接服务器工具
注： 使用root脚色，不然有些地方权限不够；
https://img-blog.csdnimg.cn/direct/6dfd87a93b53494a89c41406735efda5.png
3、安装nginx、mysql、nvm等
（1）安装nginx
参考https://cloud.tencent.com/developer/article/1654844
执行以下命令：
1. cd到根目录： cd /
2. 安装以下依赖
yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel
3、创建一个文件夹
cd /usr/local
mkdir nginx
cd nginx
//下载tar包
wget http://nginx.org/download/nginx-1.13.7.tar.gz
// 解压包
tar -xvf nginx-1.13.7.tar.gz
4、安装nginx
// 进入nginx目录
cd /usr/local/nginx
// 进入目录
cd nginx-1.13.7
// 执行命令
./configure
// 执行make命令
make
// 执行make install命令
make install
// make时候遇到问题的解决方案
https://blog.csdn.net/Mercycpp/article/details/121629994
https://blog.csdn.net/weixin_44065695/article/details/126632836
5、启动nginx服务
/usr/local/nginx/sbin/nginx -s reload
大概
cd /usr/local/nginx/sbin/
启动服务: ./nginx
停止服务: ./nginx -s stop
重启服务：./nginx -s reload
⚠️：执行命令后没有任何信息，就是最好的消息！！！
（2）安装mysql
可以自己百度搜linux安装mysql;
但是我安装mysql失败,末了安装的是mariadb: https://blog.csdn.net/miaodichiyou/article/details/99289160
（3）安装nvm
参考链接:
CentOS7下安装nvm-腾讯云开发者社区-腾讯云
a.下载nvm包
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
b.
command -v nvm
c. 设置nvm自动运行
echo "source ~/nvm/nvm.sh" >> ~/.bashrc
source ~/.bashrc
d. 查看node版本: nvm list-remote
e. 安装16版本的node: nvm install v16.14.0
（4）安装pm2
npm install -g pm2
二、部署一个静态页面（hbuildx的h5项目）
(1) 在服务器中建立一个文件夹, 路径如下: mkdir /home/www;
(2) 本地打包前端项目, 打包后将unpackage/dist/build/h5文件夹上传到服务器的 /home/www 文件夹下, 并将h5改名为dist即可;
(3) 修改nginx.conf文件，vim nginx.conf
a. user root; # 修改为root用户, 不修改的话可能页面会出现403 forbidden;
b. 修改server内里的配置
server {
listen 80; // 修改为80端口
server_name xxx; // 修改为你购买的服务器的ip所在
location / {
root /home/www/dist; // 你的前端项目上传到的文件夹路径
try_files $uri $uri/ @router; // 防止革新页面404
}
//防止革新页面404
location @router {
rewrite ^.*$ /index.html last;
}
}
(4) 此时应该通过服务器的ip所在访问你的页面了！即http://xxx/
三、部署一个node服务到同一服务器
(1)在服务器中建立一个文件夹, 路径如下: mkdir /home/admin;
(2) 将node项目上传到服务器的 /home/admin 文件夹下
(3) 像在本地运行代码一样，在/home/admin文件夹下执行npm install, 并找到app.js文件，执行node app.js;
(4) 可以重新打开一个终端，执行curl http://xxx/ 看下是否可以访问到node服务;
(5) 在nginx.conf文件中添加以下设置:
location /api/ {
# 我们后端express服务启用的端口是9999，所以这里就转发到这个所在
proxy_pass http://xxx:3000/;
# 下面三句话是用来获取用户访问的ip的
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
}
注: 此时可以在浏览器中访问： http://xxx/api/ 来访问node服务;
这里是通过识别api路径, 来将哀求转发到http://xxx:3000/,因此前端哀求接口的路径应该是: http://xxx/api/;
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]