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

相关文章
|
16天前
|
JavaScript
ES6学习(9)js中的new实现
ES6学习(9)js中的new实现
|
2天前
|
机器学习/深度学习 数据采集 JavaScript
ADR智能监测系统源码,系统采用Java开发,基于SpringBoot框架,前端使用Vue,可自动预警药品不良反应
ADR药品不良反应监测系统是一款智能化工具,用于监测和分析药品不良反应。该系统通过收集和分析病历、处方及实验室数据,快速识别潜在不良反应,提升用药安全性。系统采用Java开发,基于SpringBoot框架,前端使用Vue,具备数据采集、清洗、分析等功能模块,并能生成监测报告辅助医务人员决策。通过集成多种数据源并运用机器学习算法,系统可自动预警药品不良反应,有效减少药害事故,保障公众健康。
ADR智能监测系统源码,系统采用Java开发,基于SpringBoot框架,前端使用Vue,可自动预警药品不良反应
|
8天前
|
存储 JSON JavaScript
学习node.js十三,文件的上传于下载
学习node.js十三,文件的上传于下载
|
21天前
|
前端开发 Java UED
JSF遇上Material Design:一场视觉革命,如何让传统Java Web应用焕发新生?
【8月更文挑战第31天】在当前的Web开发领域,用户体验和界面美观性至关重要。Google推出的Material Design凭借其独特的动画、鲜艳的颜色和简洁的布局广受好评。将其应用于JavaServer Faces(JSF)项目,能显著提升应用的现代感和用户交互体验。本文介绍如何通过PrimeFaces等组件库在JSF应用中实现Material Design风格,包括添加依赖、使用组件及响应式布局等步骤,为用户提供美观且功能丰富的界面。
30 0
|
21天前
|
前端开发 大数据 数据库
🔥大数据洪流下的决战:JSF 表格组件如何做到毫秒级响应?揭秘背后的性能魔法!💪
【8月更文挑战第31天】在 Web 应用中,表格组件常用于展示和操作数据,但在大数据量下性能会成瓶颈。本文介绍在 JavaServer Faces(JSF)中优化表格组件的方法,包括数据处理、分页及懒加载等技术。通过后端分页或懒加载按需加载数据,减少不必要的数据加载和优化数据库查询,并利用缓存机制减少数据库访问次数,从而提高表格组件的响应速度和整体性能。掌握这些最佳实践对开发高性能 JSF 应用至关重要。
37 0
|
7天前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
1月前
|
存储 前端开发 JavaScript
前端语言串讲 | 青训营笔记
前端语言串讲 | 青训营笔记
22 0
|
3月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
67 2
|
3月前
|
前端开发 JavaScript 数据库
如何实现前后端分离-----前端笔记
如何实现前后端分离-----前端笔记
|
3月前
|
前端开发 安全 NoSQL
技术笔记:Security前端页面配置
技术笔记:Security前端页面配置