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

随笔2个月前发布羲龙文化

7 0 0

引言简介

遗憾：这里没有进行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/

“`

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

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

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

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;
}

}

“`

# 随笔