从0到1，vue+node+mongdb项目上线阿里云服务器

前端on9仔
220 阅读4分钟

为什么要写这篇文章呢😄

最近秋招结束，打算研究一下自己实习期间没有机会触碰的模块（太菜了😂）。从一开始的写页面，模块开发，到一整个小程序和后台的开发，感觉只停留在前端最基础的层面，想通过这篇文章记录下最近项目上线的整套流程。

参考

# 把nodejs项目部署到阿里云

# pm2到底是什么呢？你真的了解吗

技术栈

  • 前端：Vue；
  • 后端：NodeJS，MongoDB；
  • 服务器：Nginx，PM2，Navicat

第一步 阿里云服务器

我买的配置：

  • 镜像：WorldPress
  • 系统：CentOS

第二步 VsCode连接服务器

以前用过Xshell和Xftp连接服务器，不太熟悉Linix系统，所以改用vscode连接，好处是上传文件只要拖进去就ok，开多个终端方便，并且修改文件就像平时开发一样

安装Remote-SSH

remote-ssh.png

配置Remote-SSH

step1.png

step2.png

step3.png

然后输入密码，打开根目录文件夹'/',就连接成功，可以下一步操作啦！

第三步 配置服务器

1. 安装NodeJs

wget命令下载Node.js安装包

wget https://nodejs.org/dist/v18.12.1/node-v18.12.1-linux-x64.tar.xz

解压

tar xvf node-v18.12.1-linux-x64.tar.xz

通常文件会安装到/root目录下，为了方便把文件夹名称改为nodejs，放到/usr/local下

mv nodejs /usr/local/

配置环境变量 打开/etc/profile，加上这两行代码

export NODE_HOME=/usr/local/nodejs 
export PATH=$NODE_HOME/bin:$PATH

执行下命令

source /etc/profile

最后检查一下node是否装好

node -v

2.安装PM2

  • pm2是可以用于生产环境的Nodejs的进程管理工具，并且它内置一个负载均衡。它不仅可以保证服务不会中断一直在线，并且提供0秒reload功能，还有其他一系列进程管理、监控功能。并且使用起来非常简单。（通俗易懂点就是只要服务器开着node进程就一直开启，不用你每次手动执行node app.js开启后端服务器）

介绍一些常用命令

pm2 start app.js        //启动app.js应用
pm2 start app.js --name 程序名 //启动进程并指定应用的程序名
pm2 start app.js --name 程序名 --watch  //监听模式启动，当文件发生变化，自动重
pm2 ls  //列出所有进程
pm2 delete app  // 指定进程名删除
pm2 stop [AppName]    //根据应用名停止指定应用

安装

npm install pm2 -g

建立软连接

ln -s /usr/local/nodejs/bin/pm2 /usr/local/bin

3.安装MongDB并将本地数据库同步到服务器

安装

  • 软件安装位置：/usr/local/mongodb
  • 数据存放位置：/var/mongodb/data
  • 日志存放位置：/var/mongodb/logs

进入 /usr/local/

wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.4.5.tgz
tar zxvf mongodb-linux-x86_64-3.4.5.tgz

把文件名改为mongodb

创建数据和日志存放目录

mkdir /var/mongodb 
mkdir /var/mongodb/data 
mkdir /var/mongodb/logs

配置开机启动项

打开/etc/rc.d/rc.local文件，在后面输入

/usr/local/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork

然后在终端执行一下（需要把服务器的27017端口打开）

/usr/local/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork

最后检查一下是否安装成功mongo

使用Navicat同步数据

先把本地和服务器的数据库都开启

nav1.png

nav2.png

类似的新建一个连接，将主机改为服务器ip地址

导入和导出数据

inout.png

对应的数据库点导出向导，导出为json文件，然后在服务器的数据库导入向导

最后在服务器检查一下,看看是否已经同步

mongo
show dbs

第三步 部署NodeJs

把后端的代码文件夹拖进/root，记得不要把node_modles也拖进来了，然后执行下nmp i安装依赖

记得先把服务器对应的端口打开

duankou.png

启动进程

pm2 start app.js --name demo

配置pm2开机启动

pm2 startup centos

到这一步后端已经部署完成，可以用postman或浏览器测试一下后端接口

第四步 Nginx

阿里云的服务器自带了nginx所以不用安装啦，这里先从前端打包说起 在axios配置文件中

const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, 
    timeout: 50000 // 请求超时时间
})

方案一 客户端直接请求后端地址加端口

.env.production配置

ENV = 'production'
VUE_APP_BASE_API  = 'http://服务器ip:后端端口'

/usr/local/nginx/nginx.conf配置

server {
    listen 80;
    charset utf-8;
    server_name localhost;    
    location / {
      root /root/demo/dist;           #打包出来的dist存放路径
      index index.html index.htm;
    }   
}

检查一下有没有问题nginx -t,显示successful的话，就执行nginx -s reload

方案二 通过nginx反向代理，前端不直接请求后端

.env.production配置

ENV = 'production'
VUE_APP_BASE_API  = '/api'

nginx配置

server {
    listen 80;
    charset utf-8;
    server_name localhost;    
    location / {
      root /root/demo/dist;           #打包出来的dist存放路径
      index index.html index.htm;
    }  
    
    location /api {
      proxy_pass http://127.0.0.1:XXXX；       #XXXX是真实的后端服务器的端口
    } 
}

END

到这一步已经部署完成啦，完结撒花🎉🎉🎉 可以直接从服务器的公网ip地址访问啦

踩了几天的坑，希望这篇文章能帮助有需要的小伙伴啦哈哈哈，我也是小白，大家有问题可以评论或者私信我呀，写的不好的地方，欢迎大佬们指出🙏🙏

avatar
文章
阅读
粉丝