且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-14-5.配置Nginx反向代理

更新时间:2022-02-16 06:34:11

我们需要根据域名访问项目,那么就需要配置Nginx反向代理,让访问的域名转发到localhost:3000上。

1.vscode安装remote-ssh插件

由于要操作很多文件,所以我们需要一个可视化工具进行修改项目。
vscode中的remote-ssh插件可以如本地操作一样,直接在本地操作服务器项目。类似宝塔。
插件搜索remote-ssh:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-14-5.配置Nginx反向代理
安装完成后,左侧导航栏就会出现远程连接图标:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-14-5.配置Nginx反向代理

2.使用remote-ssh进行远程连接

在远程资源管理器中找到设置图标,选择出现的第一条内容:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-14-5.配置Nginx反向代理
此时会出现配置文件,按照其格式写入我们的域名(或ip地址)等信息:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-14-5.配置Nginx反向代理
保存后会陈列在左侧远程连接窗口,鼠标移入会出现连接图标,点击连接:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-14-5.配置Nginx反向代理
根据提示选择网站服务器的系统类型,再输入密码:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-14-5.配置Nginx反向代理
打开文件夹找到我们需要配置的页面,此时我们进入服务器的根配置文件夹/etc/nginx/:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-14-5.配置Nginx反向代理
再次输入密码,进入页面:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-14-5.配置Nginx反向代理

3.配置nginx反向代理

(1)使用DigitalOcean网站nginxconfig.io工具
直接引擎输入nginxconfig.io,由于是外网所以需要多等一会,进入页面后选择node.js,开始配置。
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-14-5.配置Nginx反向代理
其中子域名重定向暂时不用启用,另外https端口也不要启用,其他默认:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-14-5.配置Nginx反向代理
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-14-5.配置Nginx反向代理

来到下方,下载配置文件:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-14-5.配置Nginx反向代理
打开,查看其中内容,其中网站服务器中已存在两个文件夹,直接将其内部文件拖拽进已有的两个文件夹中。.io文件夹直接拖入这个目录中,.conf文件是刚才网站的配置文件,不用管它:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-14-5.配置Nginx反向代理
如果不能直接拖拽,就新建同名文件,然后复制内容进去,最终呈现:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-14-5.配置Nginx反向代理

4.配置完成后重启服务器
service nginx reload

如果跟我一样报错,可以按照网站中的提示再次输入到终端执行一遍:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-14-5.配置Nginx反向代理
根据上线命令重启nginx服务:

sudo nginx -t && sudo systemctl reload nginx

然后重启服务器,刷新页面,此时跳出502错误,502表示nginx服务器没问题:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-14-5.配置Nginx反向代理
此时重新进入网站服务器,pm2查看网站是否启动项目:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-14-5.配置Nginx反向代理
可见重启服务器后pm2项目也关闭了,我们再次启动pm2项目:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-14-5.配置Nginx反向代理
开启后,可以进入页面了,此时进入admin端:
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-14-5.配置Nginx反向代理
没问题,但是此时是无法登录后台的,因为网站服务器中数据库数据没有数据。
下篇文章学习如何将数据导入到网站项目数据库中。