node和前端项目宝塔部署

首先需要一台服务器

购买渠道:阿里云、腾讯云、百度云、华为云

一、以阿里云为例 购买esc

可临时购买测试服务器

二、安装宝塔

复制公网ip地址 通过Xshell 进行账号密码的连接

node和前端项目宝塔部署_第1张图片

连接后访问宝塔官网 宝塔面板下载,免费全能的服务器运维软件

找到自己购买时的系统进行安装

node和前端项目宝塔部署_第2张图片

把命令输入到 Xshell 或其他工具中 等待安装 安装后会出现 一个宝塔的地址和账号密码 可进行访问

三、宝塔操作

1.导入数据库

1.软件商店找到自己的数据库、mysql/mongodb

点击设置修改MongoDB配置

bindIp 由127.0.0.1改为0.0.0.0,放开ip限制

node和前端项目宝塔部署_第3张图片

authorization 默认disabled,如需要权限验证改为enabled

node和前端项目宝塔部署_第4张图片

之后访问ip+端口就可以看到mongodb启动成功了

It looks like you are trying to access MongoDB over HTTP on the native driver port.

2.可找到自己的数据库进行导入之前的数据

node和前端项目宝塔部署_第5张图片

导入后可设置账号密码 之后代码需要进行连接

2.运行node服务

把服务端项目进行导入

可以提前把nodemodules进行删除 移动进来后 通过安装node 在 npm i

node和前端项目宝塔部署_第6张图片

找到连接数据库的代码

mongoose.connect("mongodb://账号:密码@ip:端口/数据库名称")

导入后要写一段代码进行端口运行监听,

const serve_ip = 8889;
const serve_port = 8889;
const port = serve_port;
app.listen(port, () => {
  console.log(`http://${serve_ip}:${port}`);
})

记得 在宝塔和阿里云开启8889端口 (所有用到的端口都需要开启)

阿里云去安全组里面添加自定义端口

之后可以运行npm start 把下面跑起来 就可以进行访问了 就可以通过http进行访问自己的服务

3.pm2托管

软件商店 安装 pm2 进行添加项目

node和前端项目宝塔部署_第7张图片

启动文件 以自己的为准,我这个项目是以www为准的进行启动的

node和前端项目宝塔部署_第8张图片

点击保存就可以了

如果运行有错误 可以查看日志

之后就可以一直挂起了,如果有改动 需要重启服务器

四、部署前端

前端目前可以直接打包 以/api的形式 因为前端可以在开发中解决 部署后需要后端让nginx代理解决

打包后把dist文件放入目录中

1.添加站点

把自己的ip地址添加进去,默认就是80 不需要处理

和根目录的文件的dist 会自动匹配index文件

node和前端项目宝塔部署_第9张图片

设置对应的网站目录

node和前端项目宝塔部署_第10张图片

之后要在配置文件中添加 解决跨域 和刷新404问题

node和前端项目宝塔部署_第11张图片

主要是处理前端使用代理 跨域 前端不需要修改路径 例如api开头

 # nginx 跨域代理
    location ^~/api/ {
        proxy_pass ip:8889/;
    }

    # nginx 解决history路由刷新  404代理
    location / {
        try_files $uri $uri/ @router;
        index index.html;
    }

    location @router {
      rewrite ^.*$ /index.html last;
    }

node代码解决跨域:

app.all('*', function (req, res, next) {
	res.header("Access-Control-Allow-Origin", "*");
	res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
	res.header("Access-Control-Allow-Headers", "X-Requested-With");
	res.header('Access-Control-Allow-Headers', ['mytoken','Content-Type']);
	next();
});

你可能感兴趣的:(前端,node)