我们需要根据域名访问项目,那么就需要配置Nginx反向代理,让访问的域名转发到localhost:3000上。
1.vscode安装remote-ssh插件
由于要操作很多文件,所以我们需要一个可视化工具进行修改项目。
vscode中的remote-ssh插件可以如本地操作一样,直接在本地操作服务器项目。类似宝塔。
插件搜索remote-ssh:
![](https://img.kancloud.cn/82/5c/825cbd34b5314b09a84d60fae1f0ec39_1261x526.png)
安装完成后,左侧导航栏就会出现远程连接图标:
![](https://img.kancloud.cn/c2/97/c29795134abe1bbb55236d4b9e8f2979_264x430.png)
2.使用remote-ssh进行远程连接
在远程资源管理器中找到设置图标,选择出现的第一条内容:
![](https://img.kancloud.cn/2c/3d/2c3d0684fb7b9af9e24e3dec047cb7cb_957x295.png)
此时会出现配置文件,按照其格式写入我们的域名(或ip地址)等信息:
![](https://img.kancloud.cn/7e/df/7edf9bacd28d9ad32cd998a0d2e3f681_661x115.png)
保存后会陈列在左侧远程连接窗口,鼠标移入会出现连接图标,点击连接:
![](https://img.kancloud.cn/4a/2b/4a2b8554704833ae4fcdfdab95913260_609x123.png)
根据提示选择网站服务器的系统类型,再输入密码:
![](https://img.kancloud.cn/89/d5/89d5abcb23ba690fd9607ee8e99deffc_750x124.png)
打开文件夹找到我们需要配置的页面,此时我们进入服务器的根配置文件夹/etc/nginx/:
![](https://img.kancloud.cn/dc/58/dc5865191f7be080d6d5db90a1e36a85_942x435.png)
再次输入密码,进入页面:
![](https://img.kancloud.cn/8a/bd/8abdd66b1534c2da1ee2ed60e4789fdb_1024x768.png)
3.配置nginx反向代理
(1)使用DigitalOcean网站nginxconfig.io工具
直接引擎输入nginxconfig.io,由于是外网所以需要多等一会,进入页面后选择node.js,开始配置。
![](https://img.kancloud.cn/73/f9/73f9a8b6be66b971072bf34fc360d97a_1245x1280.png)
其中子域名重定向暂时不用启用,另外https端口也不要启用,其他默认:
![](https://img.kancloud.cn/e0/c1/e0c19866b6400f6dec2516b2654b0654_1245x1280.png)
![](https://img.kancloud.cn/ac/7e/ac7e578a9f5257acf7b1a3b7d8e4e934_661x229.png)
来到下方,下载配置文件:
![](https://img.kancloud.cn/65/45/6545fd9cd5fb3b2d0944e2f487dd2f32_1245x1279.png)
打开,查看其中内容,其中网站服务器中已存在两个文件夹,直接将其内部文件拖拽进已有的两个文件夹中。.io文件夹直接拖入这个目录中,.conf文件是刚才网站的配置文件,不用管它:
![](https://img.kancloud.cn/88/21/8821a2e56d9f815e799095ab7907e3bc_1024x817.png)
如果不能直接拖拽,就新建同名文件,然后复制内容进去,最终呈现:
![](https://img.kancloud.cn/f5/d5/f5d5aec0c1ea36bfe658fb02adc5c175_226x627.png)
4.配置完成后重启服务器
```
service nginx reload
```
如果跟我一样报错,可以按照网站中的提示再次输入到终端执行一遍:
![](https://img.kancloud.cn/32/e5/32e573bfa8a0001757de1a5bb788e794_1141x601.png)
根据上线命令重启nginx服务:
```
sudo nginx -t && sudo systemctl reload nginx
```
然后重启服务器,刷新页面,此时跳出502错误,502表示nginx服务器没问题:
![](https://img.kancloud.cn/e7/66/e7667b84dc63ff66ebfaf5183376c547_1259x708.png)
此时重新进入网站服务器,pm2查看网站是否启动项目:
![](https://img.kancloud.cn/2d/bc/2dbc0096383e133e1e15e73927345d93_595x377.png)
可见重启服务器后pm2项目也关闭了,我们再次启动pm2项目:
![](https://img.kancloud.cn/49/94/49946523a27ddc81c79090581dacc87a_559x160.png)
开启后,可以进入页面了,此时进入admin端:
![](https://img.kancloud.cn/50/75/507529964b120ad05cada6e6c0eca72a_1258x778.png)
没问题,但是此时是无法登录后台的,因为网站服务器中数据库数据没有数据。
下篇文章学习如何将数据导入到网站项目数据库中。
- tp6+vue
- 1.工具和本地环境
- 2.启动项目
- 3.路由、模型与数据库操作
- 4.优化后端接口,前端使用axios实现接口功能
- 5.用户登录,bcrypt(hash)加密与验证
- 6.用户登录(二),token验证
- 7.分类的模型关联和通用CRUD接口
- 8.使用vue的markdown编辑器并批量上传图片
- Node.js + Vue.js
- 工具,本地环境
- 2.1启动项目
- 3.element-ui和vue-router路由的安装和使用
- 4.使用axios,并创建接口上传数据到mongodb数据库
- 5.mongoodb数据库的“删、改、查”操作
- 6.mongodb数据库无限层级的数据关联(子分类)
- 7.使用mongodb数据库关联多个分类(关联多个数据)
- 8.server端使用通用CRUD接口
- 9.图片上传
- 10.vue的富文本编辑器(vue2-editor)
- 11.动态添加分栏上传多组数据
- 12-1.管理员模块
- 13-1.搭建前台web端页面
- 1.使用sass工具搭建前台web端页面
- 2.sass工具的变量
- 3.使用flex布局并开始搭建web端
- 4.vue广告轮播图,并使用接口引入数据
- 5.使用字体图标(iconfont)
- 6.卡片组件的封装
- 14-1.生产环境编译
- 1.环境编译
- 2.购买域名服务器并解析域名到服务器
- 3.nginx配置web服务器并安装网站环境
- 4.git拉取代码到服务器
- 5.配置Nginx反向代理
- 6.迁移本地数据到服务器(mongodump)
- uni
- 1.工具&本地环境
- 2.页面制作
- 3.页面制作、组件与轮播
- 4.页面跳转与横向滑动
- 5.用户授权登录和用户信息获取
- 6.用户注册和数据存储
- 7.用户填写表单信息