nginx部署静态页面(vue/uniapp)+node服务到同一服务器

一、准备工作

1、购买云服务器（我购买的是腾讯云）

（1）腾讯云链接： 登录 - 腾讯云

（2）我购买的是宝塔面板，最简单的轻量服务器；https://console.cloud.tencent.com/lighthouse/instance/index?rid=8

2、使用腾讯云OrcaTerm终端：连接服务器工具

注： 使用root角色，不然有些地方权限不够；

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/;