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

相关文章
|
2月前
|
应用服务中间件 BI nginx
Nginx的location配置详解
【10月更文挑战第16天】Nginx的location配置详解
|
20天前
|
存储 负载均衡 中间件
Nginx反向代理配置详解,图文全面总结,建议收藏
Nginx 是大型架构必备中间件,也是大厂喜欢考察的内容,必知必会。本篇全面详解 Nginx 反向代理及配置,建议收藏。
Nginx反向代理配置详解,图文全面总结,建议收藏
|
1月前
|
应用服务中间件 API nginx
nginx配置反向代理404问题
【10月更文挑战第18天】本文介绍了使用Nginx进行反向代理的配置方法,解决了404错误、跨域问题和302重定向问题。关键配置包括代理路径、请求头设置、跨域头添加以及端口转发设置。通过调整`proxy_set_header`和添加必要的HTTP头,实现了稳定的服务代理和跨域访问。
166 1
nginx配置反向代理404问题
|
17天前
|
应用服务中间件 网络安全 nginx
轻松上手Nginx Proxy Manager:安装、配置与实战
Nginx Proxy Manager (NPM) 是一款基于 Nginx 的反向代理管理工具,提供直观的 Web 界面,方便用户配置和管理反向代理、SSL 证书等。本文档介绍了 NPM 的安装步骤,包括 Docker 和 Docker Compose 的安装、Docker Compose 文件的创建与配置、启动服务、访问 Web 管理界面、基本使用方法以及如何申请和配置 SSL 证书,帮助用户快速上手 NPM。
93 1
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
346 4
|
1月前
|
缓存 负载均衡 应用服务中间件
Nginx配置
【10月更文挑战第22天】在实际配置 Nginx 时,需要根据具体的需求和环境进行调整和优化。同时,还需要注意配置文件的语法正确性和安全性。
49 7
|
2月前
|
前端开发 JavaScript 应用服务中间件
终极 Nginx 配置指南
本文介绍了Nginx的基本配置及其优化方法。首先,通过删除注释简化了Nginx的默认配置文件,使其更易于理解。接着,文章将Nginx配置文件分为全局块、events块和http块三部分进行详细解释。此外,还提供了如何快速上线网站、解决前端history模式404问题、配置反向代理、开启gzip压缩、设置维护页面、在同一IP上部署多个网站以及实现动静分离的具体配置示例。最后,附上了Nginx的基础命令,包括安装、启动、重启和关闭等操作。
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
156 2
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
45 0
|
2月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。