node express+vue+html,后端+后台管理+官网线上部署

发布时间 2024-01-02 14:56:39作者: 嗯哼Nymph

引言简介

 遗憾:这里没有进行linux的mysql安装不完美,有空补全

1. node安装

安装nodejs参考地址: https://blog.csdn.net/cnds123321/article/details/121301089

报错 GLIBC_2.28 not found

这里安装的时候报错了,因为对linux不懂,所以搜索方法是让我对linux某个模块进行升级,但是我没有。

的解决的方法是对node版本进行降级,这里我降到了12.x版本,解决了问题

node项目运行线上部署地址:https://blog.csdn.net/cnds123321/article/details/121303219

这个部署对我来说不太行,直接用的node来运行,不知道能不能监听,下文介绍了用pm2来运行项目实现的,

这个案例中运行的应该是node原生项目,没有用express。

我用的express框架,这里要用node运行不能运行app.js,大概应该运行根目录bin/www这个文件才行

 

2. 后端nodejs项目运行

参考地址 https://blog.csdn.net/weixin_43845090/article/details/108950721

这里用了pm2运行node项目,对项目进行管理,

没啥用,也可以看看,项目运行:https://blog.csdn.net/cnds123321/article/details/121303219

**参考安装nodejs项目,这个更全,从下载工具,node安装,Nginx 部署,PM2部署, MongoDB 安装,非常全,https://juejin.cn/post/6956587204189650957**

 

3. vue项目布置

vue部署没啥好说的,npm run build 对项目进行打包,我这里在线上是用的nginx ,对后端接口用了反向代理,这里的接口baseUrl用的标识是/api

这里主要是nginx的配置

*** nginx配置在文章最后面***

4.html项目布置

 这个也没啥好说的,把项目代码放到线上,然后用nginx配置只想就行了

*** nginx配置在文章最后面***

5.nginx 配置,服务器端口打开

布置启动服务对外要打开对应的端口,这个取决于你的线上服务器提供商,

例如我是在华为云上,我就登录华为云官网,找到我购买的服务器,然后配置安全规则,在安全规则中把我要用的端口进行配置开放

nginx配置主要是html和vue页面的配置,配置文件地址,端口,域名 ,ssl证书,都在这里。

 

1. node安装

node安装包下载官网地址 https://nodejs.cn/download/

遇到安装错误在上文

软链接文件有类似于Windows的快捷方式。包含的有另一文件的位置信息。

软连接 增删改查操作参考地址 https://www.cnblogs.com/sueyyyy/p/10985443.html

 

```

创建软链接

// ln  -s  [源文件或目录]  [目标文件或目录]

# 使用绝对路径建立node的软链接
ln -s /root/home/installation-packages/node.js/node.js/bin/node /usr/local/bin/
# 使用绝对路径建立npm的软链接
ln -s /root/home/installation-packages/node.js/node.js/bin/npm /usr/local/bin/

```

 

2. 后端nodejs项目运行

下载,npm install -g pm2

注意这里其实没有全局能够进行访问,和node一样也需要建立软连接,才能全局访问

下载的PM2的时候会显示,安装到哪里了 仔细看/root/node-v12.22.10-linux-x64/bin/pm2 -> /root/node-v12.22.10-linux-x64/lib/node_modules/pm2/bin/pm2

首先进入项目根目录

启动进程/应用 pm2 start bin/www 或 pm2 start app.js

重命名进程/应用 pm2 start app.js --name wb123

添加进程/应用 watch pm2 start bin/www --watch

结束进程/应用 pm2 stop www

结束所有进程/应用 pm2 stop all

删除进程/应用 pm2 delete www

删除所有进程/应用 pm2 delete all

列出所有进程/应用 pm2 list

查看某个进程/应用具体情况 pm2 describe www

查看进程/应用的资源消耗情况 pm2 monit

查看pm2的日志 pm2 logs

若要查看某个进程/应用的日志,使用 pm2 logs www

重新启动进程/应用 pm2 restart www

重新启动所有进程/应用 pm2 restart all

 

 

 

3. vue项目布置

vue部署没啥好说的,npm run build 对项目进行打包,我这里在线上是用的nginx ,对后端接口用了反向代理,这里的接口baseUrl用的标识是/api

这里主要是nginx的配置

 

4.html项目布置

这个也没啥好说的,把项目代码放到线上,然后用nginx配置只想就行了

5.nginx 配置,服务器端口打开

 

布置启动服务对外要打开对应的端口,这个取决于你的线上服务器提供商,

例如我是在华为云上,我就登录华为云官网,找到我购买的服务器,然后配置安全规则,在安全规则中把我要用的端口进行配置开放

nginx配置主要是html和vue页面的配置,配置文件地址,端口,域名 ,ssl证书,都在这里。

```

server {
listen 8009;
server_name localhost;

#charset koi8-r;

#access_log logs/host.access.log main;

location /web { # html页面
root /root/websutstatic;
index index.html index.htm;
rewrite "^/web/(.*)" /$1 break;
}
location / { #vue后台管理
root /root/websutb;
index index.html index.htm;
#前端Vue-router 设置为history模式----↓这行必须加
#try_files $uri $uri/ /index.html;
}
#配置跨域问题 ↓
location /api { #反向代理
proxy_pass http://xx.xx.xx.xx:3000;
rewrite "^/api/(.*)" /$1 break;
}


error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}


}

```