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

本文涉及的产品
.cn 域名,1个 12个月
简介: 一键生成反向代理文件,并部署到nginx服务器。

我们需要根据域名访问项目,那么就需要配置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端:
在这里插入图片描述
没问题,但是此时是无法登录后台的,因为网站服务器中数据库数据没有数据。
下篇文章学习如何将数据导入到网站项目数据库中。

相关文章
|
3月前
|
缓存 负载均衡 应用服务中间件
Nginx 学习
【10月更文挑战第17天】Nginx 是一款非常强大的工具,掌握它的使用和配置对于构建高性能、可靠的 Web 应用至关重要。随着技术的不断发展,Nginx 也在不断更新和完善,为我们提供更好的服务和支持。
|
2月前
|
负载均衡 监控 应用服务中间件
配置Nginx反向代理时如何指定后端服务器的权重?
配置Nginx反向代理时如何指定后端服务器的权重?
138 61
|
8天前
|
缓存 Java 应用服务中间件
nginx的正向代理和反向代理以及tomcat
Nginx的正向代理和反向代理功能在不同的场景中具有重要作用,正向代理主要用于客户端访问控制和匿名浏览,而反向代理则用于负载均衡和高可用性服务。Tomcat作为Java Web应用服务器,与Nginx结合使用,可以显著提升Web应用的性能和稳定性。通过合理配置Nginx和Tomcat,可以构建高效、稳定和可扩展的Web服务架构。
79 11
|
16天前
|
存储 应用服务中间件 nginx
nginx反向代理bucket目录配置
该配置实现通过Nginx代理访问阿里云OSS存储桶中的图片资源。当用户访问代理域名下的图片URL(如 `http://代理域名/123.png`)时,Nginx会将请求转发到指定的OSS存储桶地址,并重写路径为 `/prod/files/2024/12/12/123.png`。
54 5
|
2月前
|
缓存 负载均衡 算法
如何配置Nginx反向代理以实现负载均衡?
如何配置Nginx反向代理以实现负载均衡?
|
2月前
|
存储 负载均衡 中间件
Nginx反向代理配置详解,图文全面总结,建议收藏
Nginx 是大型架构必备中间件,也是大厂喜欢考察的内容,必知必会。本篇全面详解 Nginx 反向代理及配置,建议收藏。
Nginx反向代理配置详解,图文全面总结,建议收藏
|
2月前
|
应用服务中间件 API nginx
nginx配置反向代理404问题
【10月更文挑战第18天】本文介绍了使用Nginx进行反向代理的配置方法,解决了404错误、跨域问题和302重定向问题。关键配置包括代理路径、请求头设置、跨域头添加以及端口转发设置。通过调整`proxy_set_header`和添加必要的HTTP头,实现了稳定的服务代理和跨域访问。
346 1
nginx配置反向代理404问题
|
2月前
|
安全 应用服务中间件 网络安全
如何测试Nginx反向代理实现SSL加密访问的配置是否正确?
如何测试Nginx反向代理实现SSL加密访问的配置是否正确?
77 3
|
2月前
|
安全 应用服务中间件 网络安全
配置Nginx反向代理实现SSL加密访问的步骤是什么?
我们可以成功地配置 Nginx 反向代理实现 SSL 加密访问,为用户提供更安全、可靠的网络服务。同时,在实际应用中,还需要根据具体情况进行进一步的优化和调整,以满足不同的需求。SSL 加密是网络安全的重要保障,合理配置和维护是确保系统安全稳定运行的关键。
132 3
|
2月前
|
缓存 负载均衡 安全
Nginx的反向代理具体是如何实现的?
Nginx的反向代理具体是如何实现的?

热门文章

最新文章