Nginx部署前端vue后端express项目步骤细节

项目前端使用vue画页面、后端使用express写接口。部署项目之前,要做好准备工作。要把前端的vue项目 npm run build打包生成一个dist文件夹,同时也要把nginx安装好。我们接着往下阅读步骤:

第一步

首先找到nginx安装的目录,然后修改nginx的服务配置文件,是在nginx安装目录里的conf文件夹中的nginx.conf这个文件,我们使用vscode打开,并加上一个serve{}配置我们所需要的反向代理,接下来就是写对应nginx配置代码了

第二步

我们比较喜欢 5678这个数字,于是我们就把自己电脑上的 5678这个端口开放给用户使用。即:我们使用nginx这个工具(哨兵)监听本机的5678这个端口,当有用户来访问这个端口的时候,我们就给到相应的反馈。
所以对应nginx代码:listen 5678

第三步

假设我们电脑的ip是10.9.26.121,因为我们用自己的电脑当做服务器部署项目。

所以对应nginx代码: server_name 10.9.26.121

第四步

当用户访问我们的ip端口时,即:用户访问:10.9.26.121:5678的时候,因为哨兵工具nginx在时时刻刻监听监视这个ip端口。所以nginx收到ip端口的访问请求时,就会把请求转发到,或者说定位location到我们前端vue项目打包好的dist文件中去。dist文件夹中的存放的是我们写好的前端页面代码,代码解析执行,用户即可看到前端页面。因为程序执行需要找到对应的文件代码位置,所以root就是对应前端打包代码dist存放的位置。至于dist入口,肯定是index.html不需赘述。对应nginx代码如下:

location / { 
    root D:/nginx-1.18.0/html/personManage/dist; 
    index index.html; 
}

比如上述的root是,我把vue打包的dist文件放在电脑D磁盘中的这个目录位置D:/nginx-1.18.0/html/personManage/dist 但是注意,这里有一个坑:如果我们直接在文件地址栏复制dist文件地址位置,复制的结果是不对的。如下图这样的错误操作:
Nginx部署前端vue后端express项目步骤细节_第1张图片

我们最终复制到的是这样的地址: D:\nginx-1.18.0\html\personManage,如果我们直接把这个地址放在root后面,运行nginx以后,会显示500 Internal Server Error,因为这里是去文件夹里面找程序代码,所以需要用正斜杠/,这样的话nginx才能识别,即,解决方案为:
修改成: D:/nginx-1.18.0/html/personManage/dist(毕竟windows喜欢用 反斜杠\,但是Nginx只使用 正斜杠/

第五步

又因为,前端vue项目中ajax交互跨域解决方案使用的是vue.config.js中的devServer中proxy代理,所以nginx中还需要一个location去处理,前端跨域请求转发的问题,所以proxy中的跨域转发前缀要和nginx中的跨域转发前缀保持一致,页面接口交互才能正常实现。图示如下:

Nginx部署前端vue后端express项目步骤细节_第2张图片

最终nginx代码

# personManage项目 history路由模式
server {
    listen    5678; # 给用户使用5678端口并监听
    server_name    10.9.26.121; # 本机服务器ip地址为:10.9.26.121
    client_max_body_size 100m; # 上传大文件的配置,nginx默认20M容量,想要上传更大文件,就要额外设置
    location / { # 定位具体的文件入口
        try_files $uri $uri/ /index.html; # 解决vue中history路由模式,部署后刷新页面404问题,hash路由模式则不需要
        root D:/nginx-1.18.0/html/personManage/dist; # 前端代码dist文件所在磁盘目录位置
        index index.html; # dist文件夹中的入口文件index.html
    }
    location /api/ { # 处理前端跨域转发请求
        # 我们后端express服务启用的端口是9999,所以这里就转发到这个地址
        proxy_pass http://10.9.26.121:9999/;
        # 下面三句话是用来获取用户访问的ip的
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
    }
}
后端express启用的是9999端口,代码:
app.listen(9999, (req,res) => { console.log('后端服务端口地址为:localhost://9999') } )

第六步

因为后端我们使用的是node中的express框架,不是java中的springboot框架什么的,不需要打一个jav包,我们只需要在express中使用pm2插件去管理我们的后端项目即可。

6.1 全局安装pm2

npm install -g pm2

6.2 使用pm2启动express项目

之前我们启动express项目使用的命令是node app.js,但是有局限,所以我们使用pm2这个插件去管理后端的express项目。pm2功能挺强大的,包括开机自启动项目、停止项目、进程管理、负载均衡、日志查看等功能,而node app.js只能启动项目,所以还是要使用pm2更加方便管理。全局安装好pm2以后,我们执行pm2 -v命令能查看到版本号,就说明我们已经安装成功了,然后执行pm2 start app.js启动项目。出现下图,就说明我们服务启动好了,然后用户就可以正常访问了

Nginx部署前端vue后端express项目步骤细节_第3张图片

总结

上述就是nginx部署一个vue+express项目的流程步骤。如果大家想进一步了解pm2插件的使用细节,可以去pm2官网看看。附上传送门:
https://pm2.keymetrics.io/

你可能感兴趣的