小白 学习 vue+nodejs+mongodb部署项目到阿里云

2021年4月21日 4点热度 0条评论 来源: 前端辣么菜

vue+nodejs+mongodb部署项目到阿里云

这是我毕设,想学下项目部署,然后搞了两天,终于成功了哈哈,这个部署过程参考链接如下,写的很好,我自己也做了一遍笔记,更详细介绍了过程,跟着步骤就行,我也是第一次部署哈哈。

参考链接: https://segmentfault.com/a/1190000022921908

目录

1.项目环境如下:

  • 部署时间: 2021年4月20号
  • 本地环境: windows 10
  • 服务器: 阿里云服务器 ECS 型, CentOS 8.0; 主要使用宝塔面板(这个是liunx可视化管理工具,很方便), 内含 SSH 终端, 没有使用 Xshell, Xftp
  • 前端项目: Vue(v2.6) & Vue-Cli(v4.5)
  • 后端项目: Node.js(v12.18.2,express框架)
  • 数据库: MongoDB

2. 服务器准备与配置

1.购买服务器

服务器我用的是免费试用的,如果是学生,可以认证学生,购买学生优惠的,我也认证了,但是看到有免费试用,就白嫖一个月先哈哈哈哈,服务器自己练习用就买最便宜的就好,如果不懂得可以百度一下吧,我就不说了哈。
试用链接(好像首次使用才有):https://free.aliyun.com/?spm=5176.21103406.J_6174043250.2.58cd597cGSa6NA&accounttraceid=f7f0b408034941c0906a059f25d9b2acntvv
购买链接:https://www.aliyun.com/activity/new?spm=5176.12901015.1em2wirsb.d71.776e525cCmvyVF&scm=20140722.3873.4.3972

2.服务器设置

(1)登录阿里云,选择控制台->选择云服务 ESC ,就可以看到自己的服务器了(如果看不到实例, 要在页面左上角选择区域, 选择自己购买的区域 “华南1(深圳)” 就能看到了)

(2)点击实例,前往实例详情,进行 密码重置 和 配置安全组规则

说明: 重置密码是为了等下远程连接我们的服务器, 配置安全组规则 为了开发端口, 这样才能访问服务器

(3) 点击 重置密码, 输入新密码就好了,这里要记住用户名, 方便后面远程连接用到

(4)设置安全规则, 点击配置安全组规则 —> 点击设置规则, 然后添加 80 端口和 8888 端口(这个是宝塔面板默认的,先加上), 再加上自己NodeJS监听的端口就好了, 授权对象就 0.0.0.0/0 ,默认的

配置完重启实例,我记得我没有重启也可以,大家重启一下吧。

(5)远程连接

这里直接选择阿里云提供的远程连接, 在实例那里, 右边有个远程连接

1.阿里云自带的远程连接
2.Xshell等工具连接
3.fileZill连接可以发送文件// 这些工具也可以连接


选择workbench ->立即登录

连接需要 账号和密码,就是上面说的重置密码那里, 输入密码,连接成功就会进入linux 终端界面了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.安装宝塔面板

(1)宝塔面板是一款提升运维效率的服务器管理软件。于我们而言,作用就是在Linux服务器上,可视化操作和管理网站。使用很方便,不需要自己一个个敲命令,喜欢敲命令操作的可以用命令操作哈

参考教程:https://zhuanlan.zhihu.com/p/149675843 (这个讲的很详细,针对centos)
https://www.bt.cn/bbs/thread-19376-1-1.html(其版本安装命令这里有)

1.宝塔默认端口8888 ,需要到服务器安全组添加(我们上面已经添加了,所以这里跳过)
2.centos 下载地址: yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh (在刚才连接成功的linux终端,复制命令进入执行,等待下载)
下载提示y/n , 直接y , 完成后会有用户名和密码 和访问链接
 
这是我的访问地址,用户名和密码记起来,然后复制链接在浏览器访问,就会进入登录宝塔界面了,如果下次重新登陆,忘记了密码,可以远程连接后, 输入命令 bt default ,就会出来宝塔访问链接和 用户名密码了 
    
外网面板地址: http://47.106.247.172:8888/d8577725
内网面板地址: http://172.18.21.17:8888/d8577725
username: cajvpqx // 用户名和密码
password: 6c23ccd 
    

(2)安装配置
刚进入会有推荐安装,不要选择极速安装,选择编译安装,我选择了LNMP , 安装了 nginx 和 pure-ftpd ,mysql, 因为安装有点慢,我没安装php, 现在也用不上

然后修改端口,宝塔默认端口 8888 , 为了防止被暴力破解, 我们改个端口 ,我改成了 8899

修改了端口,需要在安全组添加, 直接点击宝塔 安全 -> 输入放行端口 就好

4.安装项目需要的工具

  • pm2: 搜索安装 pm2(包含了node模块)

  • mongoDB: 搜索安装 mongoDB (搜索出来只有一个,直接安装就好)

此时,服务器基本已经好了,下面就是项目相关配置了。

3.项目配置

(1) Nginx配置

在软件商店下面有已经下载的软件,软件商店->选择已安装->选择nginx-> 设置->配置修改

安装下面配置自己的信息,这里配置是代理配置, 到时候前端 访问就会 代理成本地nodeJS的 接口

server
{ 
    listen 80; //默认http 端口, 需要在安全组规则中开放此端口, 也可以自己设置个端口, (80 端口用于: ECS 实例作为网站或 Web 应用服务器)
    server_name ********;  //自己服务器公网 IP
    index index.html index.htm index.php; // 默认index.html打开
    root  /www/wwwroot/dist; //项目所在文件夹,到时候前端打包为dist,所以我这里直接加上dist
    
   // #error_page 404 /404.html; 
    include enable-php.conf;
    
    location /api/  // 写正确 /api/ , /api开头接口会代理
    { 
        proxy_pass http://127.0.0.1:8886/; //node 服务的域名与端口 ,代理的node接口地址, 我监听端口是 8886
    }
     error_page 404 /404.html;
        location = /40x.html {  // 错误网页配置
    }

    error_page 500 502 503 504 /50x.html;
        location = /50x.html {  // 错误网页配置
    }
}
//在 wwwroot/dist下放入 index.html, 通过 ********公网ip(:80 端口可不输入) 即可访问到该页面
//启动 nginx, 这是常用命令, 我们需要用命令去启动,默认已经启动,我们这里也是界面化启动哈哈,了解一下命令就好
nginx -t 测试nginx语法是否有误
nginx 启动nginx
nginx -s reload 重启nginx,修改nginx.conf后记得重启
其他命令

ps -ef | grep nginx 显示nginx进程
nginx -s stop 停止nginx
nginx -v 查看nginx版本

(2)前端打包上线

- 打包

  • 在 vue.config.js 中配置路径, 以免找不到资源

    module.exports = { 
      // 自动打开
      outputDir: 'dist', // 打包文件夹
      assetsDir: 'static', // 静态资源目录
      publicPath: process.env.NODE_ENV === 'production' ? './' : '/', // 设置index.html文件路径,网上说要设置这个,但是我打包出来还是/开头
      devServer: {  // 开发阶段的代理
        proxy: 'http://localhost:8886', // 我是全部代理了
        port: '8088',
        open: true,
        overlay: { 
          warnings: false,
          errors: true
        }
      },
      
    
  • 在 router/index.js 中改 mode 为 “hash”, 如果是history,还需要结合后端配置,官网也有说,可以自己百度一下,我是hash

  • 更改 axios baseURL, 例如 axios.defaults.baseURL = “http://localhost:8886”, 将其中的 localhost:8886 改为云服务器公网 IP, 并在后面加上 /api (与上面 Nginx 配置 location 处一致)

    const service = axios.create({ 
      baseURL: 'http://47.106.247.172:80/api/' // 配置代理了不用设置这个url了,端口默认80
      //baseURl: process.env.NODE_ENV === 'production' ? 'http://47.106.247.172:80/api/': ''
    })
    
    
  • 执行 npm run build 命令打包 , 打包出来的我们直接打开 dist文件下 index.html 是加载不到资源的,不用担心,部署在服务器就可以了

  • 上传至服务器

    • 在宝塔面板中, 点击: “文件” > 进入 /www/wwwroot /dist文件夹 > 将 dist 文件夹压缩后上传
    • 在浏览器中访问公网 IP, 即可看到自己的前端页面,但是请求还不行哦,因为后端还没配置呢

(3) 后端Node项目上线

  • 在宝塔面板中, 点击: “文件” > 进入 /www/wwwroot/dist 文件夹 > 新建文件夹 server > 将 node 文件上传至该文件夹

  • 在宝塔面板中的 “安全” 界面下, 放行 node 服务端口, 如本项目使用的 8886

  • 在宝塔面板中的 “软件商店” 界面下, 进行相关配置

    • pm2 配置 => 点击: “设置” >
      "Node 版本": 切换至本地开发时的版本 v12.18.2(在自己电脑 cdm 命令输入 node -v ,查看自己版本)
      "模块管理": 安装使用的依赖 mongoose ,express等等第三方模块,会安装到/www/server/nvm/versions/node/v12.18.2/lib/node_modules/,


- node 文件引入注意事项

- 如果使用了第三方模块, 文件中引入时不能直接写模块名称, 需要加上 /www/server/nvm/versions/node/v12.18.2/lib/node_modules/, 以 mongoose 为例, 就是 const mongoose = require('/www/server/nvm/versions/node/v12.18.2/lib/node_modules/mongoose')
  // 比如我的app.js
      const {  varifyToken, errorToken } = require('./utils/ejwt/checkToken');
      const createToken = require('./utils/ejwt/token');
      //连接数据库
      require('./model/connect');
      const express = require('/www/server/nvm/versions/node/v12.18.2/lib/node_modules/express');
      const app = express();
      const bodyParser = require('/www/server/nvm/versions/node/v12.18.2/lib/node_modules/body-parser');
      const multer = require('/www/server/nvm/versions/node/v12.18.2/lib/node_modules/multer'); // 第三方引入
      const fs = require('fs');
      const path = require('path'); // 自带的直接引入
  • 在 "项目列表"填写相关信息,我的启动是 app.js

    启动文件: /www/wwwroot/dist/server/ app.js


这样node就可以了,已经自己启动了,但是我没看到那里可以查看启动状态,这个有点烦。

(4)数据库设置和导入

现在只剩数据库了,前面我们已经安装了MongoDB了,现在要导入数据

(1)在 宝塔 ’安全‘ 那里 ,放行数据库默认端口 27017

(2) 创建数据库和用户名密码权限 ,这个看自己需不需要,不设置也可以,因为我的本地开发就设置了用户名和密码,所以我这里也要添加数据库,并添加用户名和密码,和本地用户名密码一样哦。

show dbs // 显示所有的数据库
use admin // 切换到admin
db.createUser({ user:'root',pwd:'root',roles:['userAdminAnyDatabase']}) // 管理员用户
db.auth('root','root') // 校验
// use 自己的数据库名称(这如果数据库存在就用存在的,不存在就好创建一个,我这里是创建我的数据库)
use ManageSystem 
db.createUser({ user:'root',pwd:'root',roles:['readWrite']}) // 添加用户名密码,我本地也是这个,不然连接不上node哦

如果设置了权限, 那么在宝塔面板中的 “软件商店” 界面下, 点击 MongoDB 的 “设置” > “配置文件” > 作出如下修改

security:
authorization: enabled

(3)Mongodb导入导出数据 (可以选择json或者csv文件格式,我选择json)

A.先导出自己数据库文档( 我这里是一个一个文档导出的,没看到一次性导出的命令…唉)

A1. 进入mongodb的bin目录,配置了环境变量可不用进

打开cmd(快捷键: win + r, 输入cmd),然后进入mongodb的bin目录,(或者在cmd中先切换至mongodb所在磁盘,通过cd D:\soft\worksort\MongoDB\bin 这种方式进入)

A2. 导出

命令格式:  mongoexport -d 数据库名字 -c 集合名字 -o "要导出到哪里"
比如: 我要将我数据库test中的user表导出到 “C:\Users\ddi\Desktop\db\user.json”
mongoexport -d test-c user -o "C:\Users\ddi\Desktop\db\user.json"

//有用户名和密码的加上 : -u 用户名 -p 密码, 我用的是这个

mongoexport -u root -p root -d ManageSystem -c gmcs -o "C:\Users\21202\Desktop\mydb\gmcs.json"

导出类型默认json,可以指定为csv

mongoexport -u root -p root -d python -c car --file car --headerline --type csv -f field

B. 在本地导出了,然后在www/wwwroot/dist下创建一个文件(我创了mydb),用来放数据库文件

  • 然后将数据库文件(json 或 csv 格式)上传至云服务器 /www/wwwrootdist/mydb 文件夹下

B1 导入

命令格式: mongoimport -d 数据库名字 -c 集合名字 --file “从哪里导入”

但是这里我们还要指定主机名和端口号, 还有,直接运行命令,不要先运行mongo再运行导入命令,我入坑过哈哈

//变成这样:mongoimport -h 主机名:端口 -u 用户名 -p 密码 -d 数据库名 -c 集合名 --file 文件地址(如: /www/wwwroot/reading/db/words.json)
比如: 我要将上面导出的user.json导入至我的数据库ManageSystem下面的users集合, file后面家双引号
mongoimport -h 127.0.0.1:27017 -u root -p root -d ManageSystem -c users --file “/www/wwwroot/mydb/user.json”

然后一个个导入数据库就好了

此时,项目已经部署完成了。可以正常访问了,这是我的毕设

我遇到的问题:
都配置好了,静态文件加载正常,接口访问404?
我是因为前端打包baseURL设置问题,现在的配置文件就是我成功时候的配置文件,大家如果也出现请求后端失败,去看看接口,有没有正常时http:公网ip/api 这样

总结: 这是我第一次部署,过程也遇到很多问题,项目也还没有进行优化等操作,只是部署项目运行起来了,成功了也很高兴,学到了很多,大家有问题可以评论交流。

    原文作者:前端辣么菜
    原文地址: https://blog.csdn.net/weixin_45295262/article/details/115941694
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。