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

其他 2021-12-10 18:36:45 阅读次数: 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, 现在也用不上

img

然后修改端口，宝塔默认端口 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 这样

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

猜你喜欢

转载自blog.csdn.net/weixin_45295262/article/details/115941694
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022