我们需要根据域名访问项目,那么就需要配置Nginx反向代理,让访问的域名转发到localhost:3000上。
1.vscode安装remote-ssh插件
由于要操作很多文件,所以我们需要一个可视化工具进行修改项目。
vscode中的remote-ssh插件可以如本地操作一样,直接在本地操作服务器项目。类似宝塔。
插件搜索remote-ssh:
安装完成后,左侧导航栏就会出现远程连接图标:
2.使用remote-ssh进行远程连接
在远程资源管理器中找到设置图标,选择出现的第一条内容:
此时会出现配置文件,按照其格式写入我们的域名(或ip地址)等信息:
保存后会陈列在左侧远程连接窗口,鼠标移入会出现连接图标,点击连接:
根据提示选择网站服务器的系统类型,再输入密码:
打开文件夹找到我们需要配置的页面,此时我们进入服务器的根配置文件夹/etc/nginx/:
再次输入密码,进入页面:
3.配置nginx反向代理
(1)使用DigitalOcean网站nginxconfig.io工具
直接引擎输入nginxconfig.io,由于是外网所以需要多等一会,进入页面后选择node.js,开始配置。
其中子域名重定向暂时不用启用,另外https端口也不要启用,其他默认:
来到下方,下载配置文件:
打开,查看其中内容,其中网站服务器中已存在两个文件夹,直接将其内部文件拖拽进已有的两个文件夹中。.io文件夹直接拖入这个目录中,.conf文件是刚才网站的配置文件,不用管它:
如果不能直接拖拽,就新建同名文件,然后复制内容进去,最终呈现:
4.配置完成后重启服务器
service nginx reload
如果跟我一样报错,可以按照网站中的提示再次输入到终端执行一遍:
根据上线命令重启nginx服务:
sudo nginx -t && sudo systemctl reload nginx
然后重启服务器,刷新页面,此时跳出502错误,502表示nginx服务器没问题:
此时重新进入网站服务器,pm2查看网站是否启动项目:
可见重启服务器后pm2项目也关闭了,我们再次启动pm2项目:
开启后,可以进入页面了,此时进入admin端:
没问题,但是此时是无法登录后台的,因为网站服务器中数据库数据没有数据。
下篇文章学习如何将数据导入到网站项目数据库中。