技能学习:学习使用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端:
在这里插入图片描述
没问题,但是此时是无法登录后台的,因为网站服务器中数据库数据没有数据。
下篇文章学习如何将数据导入到网站项目数据库中。

相关文章
|
27天前
|
Cloud Native 前端开发 JavaScript
前端开发者必看:不懂云原生你就OUT了!揭秘如何用云原生技术提升项目部署与全栈能力
【10月更文挑战第23天】随着云计算的发展,云原生逐渐成为技术热点。前端开发者了解云原生有助于提升部署与运维效率、实现微服务化、掌握全栈开发能力和利用丰富技术生态。本文通过示例代码介绍云原生在前端项目中的应用,帮助开发者更好地理解其重要性。
57 0
|
11天前
|
存储 负载均衡 中间件
Nginx反向代理配置详解,图文全面总结,建议收藏
Nginx 是大型架构必备中间件,也是大厂喜欢考察的内容,必知必会。本篇全面详解 Nginx 反向代理及配置,建议收藏。
Nginx反向代理配置详解,图文全面总结,建议收藏
|
13天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
24天前
|
应用服务中间件 API nginx
nginx配置反向代理404问题
【10月更文挑战第18天】本文介绍了使用Nginx进行反向代理的配置方法,解决了404错误、跨域问题和302重定向问题。关键配置包括代理路径、请求头设置、跨域头添加以及端口转发设置。通过调整`proxy_set_header`和添加必要的HTTP头,实现了稳定的服务代理和跨域访问。
116 1
nginx配置反向代理404问题
|
6天前
|
负载均衡 监控 应用服务中间件
配置Nginx反向代理时如何指定后端服务器的权重?
配置Nginx反向代理时如何指定后端服务器的权重?
24 4
|
6天前
|
缓存 负载均衡 安全
Nginx的反向代理具体是如何实现的?
Nginx的反向代理具体是如何实现的?
|
20天前
|
JavaScript 前端开发 中间件
JS服务端技术—Node.js知识点
本文介绍了Node.js中的几个重要模块,包括NPM、Buffer、fs模块、path模块、express模块、http模块以及mysql模块。每部分不仅提供了基础概念,还推荐了相关博文供深入学习。特别强调了express模块的使用,包括响应相关函数、中间件、Router和请求体数据解析等内容。文章还讨论了静态资源无法访问的问题及其解决方案,并总结了一些通用设置。适合Node.js初学者参考学习。
33 1
|
25天前
|
开发框架 JavaScript 前端开发
Node.js日记:客户端和服务端介绍、Node.js介绍
Node.js日记:客户端和服务端介绍、Node.js介绍
|
26天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
254 4
|
1月前
|
JavaScript 前端开发 测试技术
前端全栈之路Deno篇(五):如何快速创建 WebSocket 服务端应用 + 客户端应用 - 可能是2025最佳的Websocket全栈实时应用框架
本文介绍了如何使用Deno 2.0快速构建WebSocket全栈应用,包括服务端和客户端的创建。通过一个简单的代码示例,展示了Deno在WebSocket实现中的便捷与强大,无需额外依赖,即可轻松搭建具备基本功能的WebSocket应用。Deno 2.0被认为是最佳的WebSocket全栈应用JS运行时,适合全栈开发者学习和使用。
104 7
下一篇
无影云桌面